测试 React Native 应用
本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
在 Facebook，我们使用 Jest 测试 React Native 应用。
通过阅读以下系列文章深入了解实际 React Native 应用的测试实践：第一部分：Jest - 快照测试实战 和 第二部分：Jest - Redux 操作与还原器的快照测试。
环境配置
从 react-native 0.38 版本开始，运行 react-native init 时会默认包含 Jest 配置。以下配置将自动添加到您的 package.json 文件中：
{
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}
}
运行 yarn test 即可使用 Jest 执行测试。
如果您正在升级 React Native 应用，且之前使用了 jest-react-native 预设，请从 package.json 中移除该依赖，并将预设改为 react-native。
快照测试
让我们为一个简单的介绍组件创建快照测试，该组件包含若干视图、文本组件和样式：
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
class Intro extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>
This is a React Native snapshot test.
</Text>
</View>
);
}
}
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 Intro;
现在使用 React 的测试渲染器和 Jest 的快照功能与组件交互，捕获渲染输出并创建快照文件：
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();
});
当您运行 yarn test 或 jest 时，将生成如下输出文件：
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 命令覆盖现有快照。
此示例代码可在 examples/react-native 查看。
预设配置
该预设会配置测试环境，其设计基于 Facebook 的经验总结，具有较强倾向性。所有配置选项均可覆盖，就像不使用预设时那样进行自定义。
环境配置
react-native 内置了 Jest 预设，因此您 package.json 中的 jest.preset 字段应指向 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)/)"]
}
您可以使用此类工具测试哪些路径会被匹配（从而被排除在转换范围外）。
当文件路径匹配任意提供的模式时，transformIgnorePatterns 会将其排除在转换范围外。因此若未谨慎处理，拆分为多个模式可能导致意外结果。下例中针对 foo 和 bar 的排除规则（称为负向先行断言）会相互抵消：
{
"transformIgnorePatterns": ["node_modules/(?!foo/)", "node_modules/(?!bar/)"] // not what you want
}
setupFiles 配置
若需为每个测试文件提供额外配置，可通过 setupFiles 配置选项指定初始化脚本。
moduleNameMapper 配置
moduleNameMapper 可用于将模块路径映射到不同的模块。默认预设会将所有图片映射到图片存根模块，但当某个模块无法找到时，此配置选项可以提供帮助：
{
"moduleNameMapper": {
"my-module.js": "<rootDir>/path/to/my-module.js"
}
}
提示
使用 jest.mock 模拟原生模块
react-native 内置的 Jest 预设附带了一些默认模拟，会应用于 react-native 仓库。然而，某些 react-native 组件或第三方组件需要依赖原生代码才能渲染。这种情况下，Jest 的手动模拟系统可以帮助模拟底层实现。
例如，如果你的代码依赖名为 react-native-video 的第三方原生视频组件，可能需要使用如下手动模拟进行存根：
jest.mock('react-native-video', () => 'Video');
这会将组件渲染为 <Video {...props} /> 并在快照输出中包含其所有属性。另请参阅使用 Enzyme 和 React 16 进行模拟快照测试的注意事项。
有时你需要提供更复杂的手动模拟。例如，若希望将原生组件的属性类型或静态字段转发到模拟，可以通过 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 列表中。