本文是以react-native的项目为前提，记录使用jest进行单元测试所遇到的一些问题。
准备工作
- 安装jest，babel-jest，babel-preset-react-native, 注意版本
npm install jest babel-jest babel-preset-react-native --save-dev
- 在package.json中配置jest选项, 一般rn项目都是采用babel-preset-react-native来transform，这里的preset也设置为react-native。如果用其他transform规则，可自行设置。
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|react-native-button)/)"
]
},
- 在package.json中配置 jest运行命令, 之后在项目根目录下运行npm test就能开始测试，发现会提示找不到test的用例
"scripts": {
"test": "jest --no-cache",
},
No tests found
- 在项目目录下新建_tests_目录, 然后就可以开始写用例了。新建个app.js文件，代码如下：
import View from 'react-native';
import React from 'react';
import App from '../App';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<App />
);
});
会得到如下：
PASS __tests__/App.js (6.086s)
✓ renders correctly (3972ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 7.831s
注意事项
- 如果使用babel7，按如下方式添加babel-jest依赖
npm install babel-jest babel-core@^7.0.0-0 @babel/core --save-dev
- 如果代码中有使用@修饰符，需要在.babelrc中开启，默认关闭。必须先安装这个插件。
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
运行 npm jest ，默认是测试_tests_文件夹里的，实际还包括各文件夹下面的test.js文件
在package.json文件中对jest进行黑名单白名单设置
"jest": {
"transformIgnorePatterns": [
//这里的设置意味要转译node_modules目录下的react-native,my-project,react-native-button等包，其余不转译，这里不设置一般会转译报错
"node_modules/(?!(react-native|my-project|react-native-button)/)"
]
},
- 因为jest 依赖babel编译，所以如果项目中混合多个babel版本一般会崩，截止到当前时间，react-native～0.55.4还是用的babel6，建议跟着官方走。同时要注意babel-plugin依赖的版本是否一致，栗子来了：
为了支持修饰符@，babel6用的是babel-plugin-transform-decorators-legacy模块而babel7用的是@babel/plugin-proposal-decorators模块，babelrc依赖代码如下
"plugins": [
"transform-decorators-legacy",
]
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
]
