在 Facebook，我們使用 Jest 來(lái)測(cè)試React Native應(yīng)用程序。

安裝

從 react-native 0.38 版開(kāi)始，運(yùn)行?react-native init?. 以下配置應(yīng)自動(dòng)添加到 package.json 文件中：

// package.json
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  }

注意：如果你正在升級(jí) react-native 應(yīng)用程序并且之前使用了?jest-react-native?預(yù)設(shè)，請(qǐng)從?package.json?文件中刪除依賴(lài)項(xiàng)并將預(yù)設(shè)更改為?react-native?。

用 yarn test 來(lái)運(yùn)行 Jest 測(cè)試。

快照測(cè)試

下面來(lái)為一個(gè)入門(mén)的小型組件創(chuàng)建一個(gè)快照測(cè)試，它的內(nèi)部有些View、Text組件和一些樣式：

// Intro.js
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flex: 1,
    justifyContent: 'center',
  },
  instructions: {
    color: '#333333',
    marginBottom: 5,
    textAlign: 'center',
  },
  welcome: {
    fontSize: 20,
    margin: 10,
    textAlign: 'center',
  },
});
export default class Intro extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>
          這是一個(gè) React Native 快照測(cè)試。
        </Text>
      </View>
    );
  }
}

現(xiàn)在，使用React的test renderer和Jest的快照特性來(lái)和組件交互，獲得渲染結(jié)果和生成快照文件：

// __tests__/Intro-test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Intro from '../Intro';
test('renders correctly', () => {
  const tree = renderer.create(<Intro />).toJSON();
  expect(tree).toMatchSnapshot();
});

當(dāng)你運(yùn)行 ?npm test? 或者 ?jest?，將產(chǎn)生一個(gè)像下面的文件：

// __tests__/__snapshots__/Intro-test.js.snap
exports[`Intro renders correctly 1`] = `
<View
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#F5FCFF",
      "flex": 1,
      "justifyContent": "center",
    }
  }>
  <Text
    style={
      Object {
        "fontSize": 20,
        "margin": 10,
        "textAlign": "center",
      }
    }>
    Welcome to React Native!
  </Text>
  <Text
    style={
      Object {
        "color": "#333333",
        "marginBottom": 5,
        "textAlign": "center",
      }
    }>
    This is a React Native snapshot test.
  </Text>
</View>
`;

下次你運(yùn)行測(cè)試時(shí)，渲染的結(jié)果將會(huì)和之前創(chuàng)建的快照進(jìn)行比較?？煺諔?yīng)與代碼更改一起提交。當(dāng)快照測(cè)試失敗，你需要去檢查是否是你想要或不想要的變動(dòng)。 如果變動(dòng)符合預(yù)期，你可以通過(guò)?jest -u?調(diào)用Jest從而重寫(xiě)存在的快照。

示例代碼可在 examples/enzyme 找到。

預(yù)設(shè)配置

預(yù)設(shè)設(shè)置了環(huán)境，并且非常的牢固，并且基于我們?cè)?Facebook 發(fā)現(xiàn)的有用內(nèi)容。所有配置選項(xiàng)都可以被覆蓋，就像在不使用預(yù)設(shè)時(shí)可以自定義一樣。

環(huán)境

?react-native?附帶一個(gè) Jest 預(yù)設(shè)，因此?jest.preset?您的字段?package.json?應(yīng)該指向?react-native?. 預(yù)設(shè)是一個(gè)模仿 React Native 應(yīng)用程序環(huán)境的節(jié)點(diǎn)環(huán)境。因?yàn)樗患虞d任何 DOM 或?yàn)g覽器 API，所以大大縮短了 Jest 的啟動(dòng)時(shí)間。

transformIgnorePatterns 自定義

該transformIgnorePatterns選項(xiàng)可用于指定 Babel 應(yīng)轉(zhuǎn)換哪些文件。不幸的是，許多 react-native npm 模塊在發(fā)布之前沒(méi)有預(yù)編譯它們的源代碼。

默認(rèn)情況下， jest-react-native 預(yù)設(shè)只處理項(xiàng)目自己的源文件和 react-native。如果有必須轉(zhuǎn)換的 npm 依賴(lài)項(xiàng)，可以通過(guò)包含 react-native 以外的模塊來(lái)自定義此配置選項(xiàng)：

"transformIgnorePatterns": [
  "node_modules/(?!(react-native|my-project|react-native-button)/)"
]

設(shè)置文件

如果想為每個(gè)測(cè)試文件提供額外的配置，可以使用?setupFiles?配置選項(xiàng)來(lái)指定安裝腳本。

模塊名稱(chēng)映射器

moduleNameMapper可用于一個(gè)模塊路徑映射到不同的模塊。默認(rèn)情況下，預(yù)設(shè)將所有圖像映射到圖像存根模塊，但如果找不到模塊，此配置選項(xiàng)可以提供幫助：

"moduleNameMapper": {
  "my-module.js": "<rootDir>/path/to/my-module.js"
}

提示

使用 jest.mock 模擬本機(jī)模塊

內(nèi)置的 Jest 預(yù)設(shè)?react-native?附帶了一些應(yīng)用于 react-native 存儲(chǔ)庫(kù)的默認(rèn)模擬。但是，一些 react-native 組件或第三方組件依賴(lài)于本地代碼來(lái)呈現(xiàn)。在這種情況下，Jest 的手動(dòng)模擬系統(tǒng)可以幫助模擬底層實(shí)現(xiàn)。

例如，如果你的代碼依賴(lài)于一個(gè)名為?react-native-video?的第三方本機(jī)視頻組件，你可能希望使用這樣的手動(dòng)模擬將其存根：

jest.mock('react-native-video', () => 'Video');

這將使組件呈現(xiàn)為?<Video{…props}/>?，其所有道具都將顯示在快照輸出中。想了解更多還可以閱讀 caveats around Enzyme and React 16.

有時(shí)需要提供更復(fù)雜的手動(dòng)模擬。例如，如果想將原生組件的 prop 類(lèi)型或靜態(tài)字段轉(zhuǎn)發(fā)到模擬，可以通過(guò) jest-react-native 的這個(gè)助手從模擬中返回不同的 React 組件：

jest.mock('path/to/MyNativeComponent', () => {
  const mockComponent = require('react-native/jest/mockComponent');
  return mockComponent('path/to/MyNativeComponent');
});

或者，如果想創(chuàng)建自己的手動(dòng)模擬，可以執(zhí)行以下操作：

jest.mock('Text', () => {
  const RealComponent = jest.requireActual('Text');
  const React = require('React');
  class Text extends React.Component {
    render() {
      return React.createElement('Text', this.props, this.props.children);
    }
  }
  Text.propTypes = RealComponent.propTypes;
  return Text;
});

在其他情況下，想要模擬不是 React 組件的本機(jī)模塊?？梢詰?yīng)用相同的技術(shù)。我們建議在真實(shí)設(shè)備上運(yùn)行 React Native 應(yīng)用程序時(shí)檢查原生模塊的源代碼并記錄模塊，然后在真實(shí)模塊之后對(duì)手動(dòng)模擬進(jìn)行建模。

如果你最終一遍又一遍地模擬相同的模塊，建議在單獨(dú)的文件中定義這些模擬并將其添加到?setupFiles?.