React Native 单元测试目前网上的资料比较少，大多数都是点到为止，并没有什么实际用处，而在Github上的开源项目的单元测试也不多,提供的参考也有限。所以这方面只能自己一点点摸索，这里记录一下这几天摸索的心得，以及对项目进行单元测试遇到的问题和解决方法。
单元测试框架-Jest
Jest 是Facebook的一个专门进行Javascript单元测试的工具，也是RN自带的一个测试框架。因此没有理由不使用。
jest官方文档地址：https://facebook.github.io/jest/docs/getting-started.html#content
这里可以着重看下：Testing React Native Apps，专门为RN写的jest测试指南，虽然不多，聊胜于无。
jest测试运行方式，在终端通过命令：npm test运行
下面说下Jest测试遇到对一些问题。
项目使用了原生模块的第三方库
一些RN组件或第三方组件依赖原生API来实现，在这种情况下运行npm test命令会报错(但是测试可能会通过)。
比如在项目中引用了react-native-linear-gradient这个第三方库，这个线性渐变库有使用原生模块，因此jest测试会有以下问题。
enter description here
解决办法：
在index.ios.js/index.android.js文件中添加mock本地模块，比如react-native-linear-gradient这个第三方库，我们用jest.mock方法来模拟，消除原生模块的影响。mock方法如下：
jest.mock('react-native-linear-gradient', () => 'react-native-linear-gradient')
项目使用了自己编写的原生模块
在项目中使用自己编写的原生模块，引用时通过NativeModules.模块名进行引用.但在测试时会报以下错误。
enter description here
参考使用原生模块的第三方库解决方案，我们使用同样的方式进行解决，其中MyPageApiFunction为原生模块名，getMyPageInfo为原生模块中的方法，jest.fn()为jest提供的模拟方法。
jest.mock('NativeModules', () => {
return {
MyPageApiFunction: {
getMyPageInfo: jest.fn(),
},
};
});
然而这样还是没有解决！进过苦苦摸索，终于在Github的issue找到了解决办法。
修改package.json文件，在jest节点中添加以下配置：
"jest": {
"preset": "react-native",
"setupFiles": ["./jest/setup.js"]
}
同时在项目根目录下新建一个jest文件夹和setup.js文件,setup.js只需添加一句：
import 'react-native';
即可，此时再运行npm test 命令就不会再遇到native module cannot be null的错误了。
UI组件测试，目前所知的针对UI组件测试有两种方式，一个快照测试（Snapshot），一个是浅渲染测试（Shallow Rendering）
快照测试Snapshot
当想要确保您的UI不会意外更改时，快照测试是非常有用的工具。在RN中第一次对某个组件进行快照测试时，会在同目录下创建一个snapshots文件夹，并将快照结果存放在该文件夹中。快照结果文件以xxx.js.snap命名，其内容为某个状态下的UI组件树。
以下是一个快照测试例子：
//这是组件 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}>
This is a React Native snapshot test.
</Text>
</View>
);
}
}
现在创建一个快照测试：
// __tests__/Intro-test.js
import 'react-native';
import React from 'react';
import Intro from '../Intro';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
test('renders correctly', () => {
const tree = renderer.create(
<Intro />
).toJSON();
expect(tree).toMatchSnapshot();
});
然后运行npm test命令则会在snapshots文件夹输出快照结果。
// __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>
`;
下次运行测试时，渲染的输出将与先前创建的快照进行比较。快照应该沿代码更改提交。当快照测试失败时，您需要检查是否是非预期的更改。如果是预期的更改，您可以使用npm test -- -u命令来覆盖现有的快照。
浅渲染测试（Shallow Rendering）
浅渲染（Shallow Rendering）在我们针对某个上层组件进行测试时，可以不用渲染它的子组件，所以就不用再担心子组件的表现和行为，这样就可以只对特定组件的逻辑及其渲染输出进行测试了。Facebook 官方提供了 react-addons-test-utils 可以让我们使用浅渲染这个特性，用于测试虚拟 DOM 对象，即 React.Component 的实例。但我们这里介绍的不是react-addons-test-utils，而是Enzyme，来自于活跃在 JavaScript 开源社区的 Airbnb 公司，是对官方测试工具库（ react-addons-test-utils ）的封装，它模拟了 jQuery 的 API，非常直观并且易于使用和学习，提供了一些与众不同的接口和几个方法来减少测试的样板代码，方便你判断、操纵和遍历 React Components 的输出，并且减少了测试代码和实现代码之间的耦合。
下面是官方给出的一个简单例子：
import { shallow } from 'enzyme'
describe('Enzyme Shallow', () => {
it('App should have three <Todo /> components', () => {
const app = shallow(<App />)
expect(app.find('Todo')).to.have.length(3)
})
}
shallow 方法只会渲染出组件的第一层 DOM 结构，其嵌套的子组件不会被渲染出来，从而使得渲染的效率更高，单元测试的速度也会更快。
下面是天翼云项目针对表格组件写的浅渲染测试例子：
it('renders a MineGridItem using Enzyme without backup animation', () => {
const wrapper = shallow(
<MineGridItem
info={infos[0]}
keyIndex={0}
onPress={jest.fn()}
enableAutoBackup={false}
/>
);
const {title, image, keyIndex, enableAutoBackup} = infos[0];
expect(wrapper.contains(
<View style={styles.container}>
<Image style={[styles.icon, {justifyContent: 'flex-end'}]} source={{uri: image}}>
</Image>
<Text style={styles.title}>
{title}
</Text>
</View>
)).toBe(true);
});
MineGridItem组件如下：
<TouchableHighlight style={styles.container} onPress={this.props.onPress}>
<View style={styles.container}>
<Image style={[styles.icon, {justifyContent: 'flex-end'}]} source={{uri: imageUrl}}>
</Image>
<Text style={styles.title}>
{title}
</Text>
</View>
</TouchableHighlight>
浅渲染的常见用法：
使用shallow方法包裹待测试组件，在expect方法中写出期待渲染出来对UI并将两者进行比较。
不论快照测试还是浅渲染测试都是一些坑需要注意：
- 在快照测试中，如果待测试的组件带有Touchable组件，在期待组件中需要忽略Touchable组件。否则运行会报错
- 快照测试和浅渲染测试中，如果组件跟动画相关即使用 Animate.Component这些组件，在运行时也会报错
TypeError: Cannot read property 'validAttributes' of undefined，暂时还没有找到解决办法 - 订阅原生模块的事件的API暂时还没有办法模拟成功
关于快照测试和浅渲染测试，完整工程请查看：https://github.com/ferrannp/react-native-testing-example
关于代码覆盖率
有待补充。
关于RN的单元测试了解得还不够深，今后还会继续完善。
网友评论