jest单元测试（一）

本文是以react-native的项目为前提，记录使用jest进行单元测试所遇到的一些问题。

准备工作

1. 安装jest，babel-jest，babel-preset-react-native, 注意版本

npm install jest babel-jest babel-preset-react-native --save-dev

2. 在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)/)"
    ]
 },

3. 在package.json中配置 jest运行命令, 之后在项目根目录下运行npm test就能开始测试，发现会提示找不到test的用例

"scripts": {
    "test": "jest --no-cache",
  },

No tests found

4. 在项目目录下新建_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(
    
  );
});

会得到如下：

 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 }],
 ]