React开发中要进行单测，主要是针对UI层的 React Components 和业务流程的 Redux Saga来进行。
Jest 简介
Jest 是由facebook提供的一个开源 Javascript 测试框架，由于和 React 同出一源，所以能很好的和 React 程序结合使用。
- Jest 是基于Jasmine 2实现的，所以沿用了Jasmine的Matcher，熟悉Jasmine的可以直接上手。
- Jest 执行环境默认是使用的Node.js 上的 jsdom，所以对于 DOM 的操作不依赖浏览器，通过命令行完成，因此不需要安装任何别的测试运行环境。
- 支持 Mock，覆盖率，Snapshots等测试工具。
- 优先执行前回出错的测试，支持并行执行，执行速度很快。
Enzyme 简介
Enzyme 是基于React原生Test Utilities的一个扩展工具包，能够更好的帮助完成React的控件测试。提供了一套类 Jquery查询器语法的选择方法，对于定位Dom元素相当方便。Enzyme 也是 React 官网推荐的进行单测的工具，可以认为是标配了。Test Utilities
开始实现
安装必要包和类型定义文件
yarn add -D jest @types/jest enzyme enzyme-adapter-react-16 @types/enzyme @types/enzyme-adapter-react-16
这里的 enzyme-adapter-react-16 包是为了建立 React 和 enzyme的一个适配器。
接着我们在根目录创建 jest.config.js 的 Jest 配置文件。
module.exports = {
// 设置jsdom运行环境的URL
// 默认值：: http://localhost
testURL: 'http://localhost/',
// glob模式指定查找测试文件的规则
// 默认值：: [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ]
testMatch: [
'<rootDir>/**/__tests__/**/*.{js,jsx,ts,tsx}',
'<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}',
],
// 项目模块中使用的文件扩展名数组
// 默认值：: ["js", "json", "jsx", "ts", "tsx", "node"]
// 因为是从左到右寻找，推荐将自项目常用的文件扩展名排在前面
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
// 每个测试文件运行前执行指定代码配置或者是创建测试环境
// 默认值：[]
setupFiles: [
'<rootDir>/__test__/test.setup.ts',
],
// 指定测试环境
// 默认值︰"jsdom"，这里是指jsdom11
// 可以安装自定义的测试环境，来指定对应的jsdom版本，例如jest-environment-jsdom-fourteen
testEnvironment: 'jsdom',
// 指定模块的搜索路径
// 默认值：[]
modulePaths: ['<rootDir>/src/'],
// 允许使用一个简单的module，来替换类似图片，样式类的资源
// 默认值︰null
moduleNameMapper: {}
};
Jest 的配置相当丰富，你可以通过一个简单的配置扩展自己的实际项目需求，具体配置请参照官方文档 Configuring Jest
完成配置后，在根目录新建如下项目结构
__test__
├─ components/
└─ sagas/
test.setup.ts
如上面配置所示，test.setup.ts完成了再运行测试之前，对于 Enzyme 的配置启动。
test.setup.ts
/* eslint-disable import/no-unresolved */
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });
我们分别针对组件 Header 和 novel的saga业务流程增加单元测试。
Header.spec.tsx
/* eslint-disable import/no-unresolved */
import React from "react";
import { shallow } from "enzyme";
import Header from "../../src/components/Header";
describe("<Header />", () => {
it("renders four li tag", () => {
const wrapper = shallow(<Header />);
expect(wrapper.find("ul Link")).toHaveLength(4);
});
});
novel.spec.ts
import { watchSearchNovels } from "../../src/sagas/novel";
import { take, call } from "redux-saga/effects";
import { fetchNovels } from "../../src/actions/novel";
import { queryNovels } from "../../src/services/novelapi";
test("watchSearchNovels Saga test", () => {
const gen = watchSearchNovels();
expect(gen.next().value).toEqual(take(fetchNovels));
expect(gen.next().value).toEqual(call(queryNovels));
});
以上演示的只是简单应用，对于复杂的测试可能需要增加Mock操作或者引入其他工具插件，后续会陆续记录追加。
最后我们修改package.json，增加对应的执行命令。
"scripts": {
"build": "webpack --config webpack.prod.js",
"build_dev": "webpack --config webpack.dev.js",
"dev": "webpack-dev-server --open --config webpack.dev.js",
"mock": "node ./src/mock/mock-server.js",
"test": "jest",
"test_dev": "jest --coverage"
},
执行yarn test
单测执行结果
如此我们可以愉快的开始写单体测试代码了。
