本文是以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",