本文是以react-native的項(xiàng)目為前提，記錄使用jest進(jìn)行單元測(cè)試所遇到的一些問題。
準(zhǔn)備工作
- 安裝jest，babel-jest，babel-preset-react-native, 注意版本
npm install jest babel-jest babel-preset-react-native --save-dev
- 在package.json中配置jest選項(xiàng), 一般rn項(xiàng)目都是采用babel-preset-react-native來transform，這里的preset也設(shè)置為react-native。如果用其他transform規(guī)則，可自行設(shè)置。
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|react-native-button)/)"
]
},
- 在package.json中配置 jest運(yùn)行命令, 之后在項(xiàng)目根目錄下運(yùn)行npm test就能開始測(cè)試，發(fā)現(xiàn)會(huì)提示找不到test的用例
"scripts": {
"test": "jest --no-cache",
},
No tests found
- 在項(xiàng)目目錄下新建_tests_目錄, 然后就可以開始寫用例了。新建個(gè)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 />
);
});
會(huì)得到如下：
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
注意事項(xiàng)
- 如果使用babel7，按如下方式添加babel-jest依賴
npm install babel-jest babel-core@^7.0.0-0 @babel/core --save-dev
- 如果代碼中有使用@修飾符，需要在.babelrc中開啟，默認(rèn)關(guān)閉。必須先安裝這個(gè)插件。
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
運(yùn)行 npm jest ，默認(rèn)是測(cè)試_tests_文件夾里的，實(shí)際還包括各文件夾下面的test.js文件
在package.json文件中對(duì)jest進(jìn)行黑名單白名單設(shè)置
"jest": {
"transformIgnorePatterns": [
//這里的設(shè)置意味要轉(zhuǎn)譯node_modules目錄下的react-native,my-project,react-native-button等包，其余不轉(zhuǎn)譯，這里不設(shè)置一般會(huì)轉(zhuǎn)譯報(bào)錯(cuò)
"node_modules/(?!(react-native|my-project|react-native-button)/)"
]
},
- 因?yàn)閖est 依賴babel編譯，所以如果項(xiàng)目中混合多個(gè)babel版本一般會(huì)崩，截止到當(dāng)前時(shí)間，react-native～0.55.4還是用的babel6，建議跟著官方走。同時(shí)要注意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 }],
]
