Jest 测试 React Native 应用程序

2021-09-18 20:41 更新

在 Facebook，我们使用 Jest 来测试React Native应用程序。

安装

从 react-native 0.38 版开始，运行react-native init. 以下配置应自动添加到 package.json 文件中：

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

注意：如果你正在升级 react-native 应用程序并且之前使用了jest-react-native预设，请从package.json文件中删除依赖项并将预设更改为react-native。

用 yarn test 来运行 Jest 测试。

快照测试

下面来为一个入门的小型组件创建一个快照测试，它的内部有些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}>
          这是一个 React Native 快照测试。
        </Text>
      </View>
    );
  }
}

现在，使用React的test renderer和Jest的快照特性来和组件交互，获得渲染结果和生成快照文件：

// __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();
});

当你运行 npm test 或者 jest，将产生一个像下面的文件：

// __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>
`;

下次你运行测试时，渲染的结果将会和之前创建的快照进行比较。快照应与代码更改一起提交。当快照测试失败，你需要去检查是否是你想要或不想要的变动。如果变动符合预期，你可以通过jest -u调用Jest从而重写存在的快照。

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

预设配置

预设设置了环境，并且非常的牢固，并且基于我们在 Facebook 发现的有用内容。所有配置选项都可以被覆盖，就像在不使用预设时可以自定义一样。

环境

react-native附带一个 Jest 预设，因此jest.preset您的字段package.json应该指向react-native. 预设是一个模仿 React Native 应用程序环境的节点环境。因为它不加载任何 DOM 或浏览器 API，所以大大缩短了 Jest 的启动时间。

transformIgnorePatterns 自定义

该transformIgnorePatterns选项可用于指定 Babel 应转换哪些文件。不幸的是，许多 react-native npm 模块在发布之前没有预编译它们的源代码。

默认情况下， jest-react-native 预设只处理项目自己的源文件和 react-native。如果有必须转换的 npm 依赖项，可以通过包含 react-native 以外的模块来自定义此配置选项：

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

设置文件

如果想为每个测试文件提供额外的配置，可以使用setupFiles配置选项来指定安装脚本。

模块名称映射器

moduleNameMapper可用于一个模块路径映射到不同的模块。默认情况下，预设将所有图像映射到图像存根模块，但如果找不到模块，此配置选项可以提供帮助：

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

提示

使用 jest.mock 模拟本机模块

内置的 Jest 预设react-native附带了一些应用于 react-native 存储库的默认模拟。但是，一些 react-native 组件或第三方组件依赖于本地代码来呈现。在这种情况下，Jest 的手动模拟系统可以帮助模拟底层实现。

例如，如果你的代码依赖于一个名为react-native-video的第三方本机视频组件，你可能希望使用这样的手动模拟将其存根：

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

这将使组件呈现为<Video{…props}/>，其所有道具都将显示在快照输出中。想了解更多还可以阅读 caveats around Enzyme and React 16.

有时需要提供更复杂的手动模拟。例如，如果想将原生组件的 prop 类型或静态字段转发到模拟，可以通过 jest-react-native 的这个助手从模拟中返回不同的 React 组件：

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

或者，如果想创建自己的手动模拟，可以执行以下操作：

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 组件的本机模块。可以应用相同的技术。我们建议在真实设备上运行 React Native 应用程序时检查原生模块的源代码并记录模块，然后在真实模块之后对手动模拟进行建模。

如果你最终一遍又一遍地模拟相同的模块，建议在单独的文件中定义这些模拟并将其添加到setupFiles.

以上内容是否对您有帮助：