关于jest:React搭建jestenzyme单元测试框架

其实参考官网文档很容易就实现搭建了，因而本文也是对官网进行一个测试搭建过程的简略演练。
https://jestjs.io/
https://enzymejs.github.io/en…

装置依赖包

• jest — 测试框架
• enzyme — React 的测试工具，能够应用 mount、render、shallow 渲染 react 组件，测试组件的输入、state、props 等
• babel-jest — jest 增加 babel-jest 后，会主动应用 babel 编译代码
• @babel/core — babel 编译外围模块
• @babel/preset-env — 环境预设，将最新的 js 语言转化为 es5
• @babel/preset-react — babel 对 react 转换
• @babel/preset-typescript — babel 对 ts 语言转换
• enzyme-adapter-react-16 — 用于连贯 react 和 jest 的适配器，须要依据 react 版本下载，局部版本对照参考表格 1 -1
• identity-obj-proxy — 用于 css、js 文件的 mock，否则会包解析不了 css 文件的谬误
• jsdom — 模仿 Web 浏览器的子集用于测试（因为 enzyme 的 render 在构建时须要依赖 window、document 等 bom 对象）

当然为了不便开发，装置对应的 types 很有必要

• @types/jest
• @types/enzyme

enzyme-adapter-react 官网上目前的版本列表，其它版本请移步官网查问
表格 1 -1

babel 配置文件

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {"node": "current"}
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ]
}

jest 配置文件

jest.config.js

module.exports = {
  testEnvironment: 'node',
  roots: ['<rootDir>'],
  // 测试文件是 src 目录下 *.test.jsx 或者 *.test.tsx 的文件
  testRegex: 'src/(.+)\\.test\\.(jsx?|tsx?)$', 
  // 自定义转换形式，转换 jsx、tsx 文件
  transform: {'^.+\\.(j|t)sx?$': '<rootDir>/node_modules/babel-jest',
  },
  // 模块资源映射，例如 alias 的配置
  moduleNameMapper: {
    // 用于 css、js、图片等文件的 mock
    '\\.(css|less|scss)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'identity-obj-proxy',
    // alias
    '^@mock/(.*)$': '<rootDir>/mock/$1',
  },
  testPathIgnorePatterns: ['\\node_modules\\'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  // 覆盖率从哪些文件收集，设置后即便 0 覆盖率的文件也会计算进来
  collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}', '!**/node_modules/**', '!**/dist/**'],
  // 测试报告输入地址
  coverageDirectory: '<rootDir>/coverage',
  // 在每个测试文件执行之前，运行一些代码以配置或设置测试框架。setupFilesAfterEnv: ['./src/test/setupTests.js'],
};

jest 初始化文件

setupTests.js

import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import jsdom from 'jsdom';

// 设置 react 和 enzyme 的适配器
configure({adapter: new Adapter() });

// 配置给 render 挂载在 global 用到的 dom 对象
const {JSDOM} = jsdom;
const {window} = new JSDOM('');
const {document} = new JSDOM(``).window;
global.document = document;
global.window = window;

命令配置

package.json

"scripts": {
  ...
  "test": "jest"
  "test:coverage": "jest --coverage"
}

npm run test即可运行所有的单元测试
npm run test:coverage 就能够运行生成覆盖率报告的单元测试

单元测试代码编写示例

测试一个 checkbox 组件

import {mount, ReactWrapper} from 'enzyme';
import CheckBox, {Props} from './index';
import React from 'react';

describe('CheckBox', () => {
...
it('should emit onChange corretly', () => {
    const props: Props = {
      checked: false,
      option: {label: 'test1', value: '111'},
      onChange: jest.fn(),};
    const wrapper = mount(<CheckBox {...props}></CheckBox>);
    wrapper.find('.checkbox-item').simulate('click');
    expect(onChange).toHaveBeenCalledWith({checked: true, option});
  });
});

单个测试调试办法

在开发过程中，咱们可能只想运行一个测试 case，有 2 个计划能够解决

1. 批改 jest.config.js（不要提交到线上）

   module.exports = {
     ...
     // 批改为指定文件
     testRegex: 'src/(.+)\\checkbox\\.test\\.(jsx?|tsx?)$', 

2. vscode 编辑器装置插件 Jest Runner
   如图，装置后每个 case 都能够独自运行或者调试。