知识背景
对 React 进行单元测试需要支持 import 与 export 的语法形式，因此在运行时阶段 Babel 的代码转换支持是必不可少的。需要注意的一点是 React 单元测试的期待值大多都需要体现在 DOM（可控与不可控）上，也因此对 React 进行单元测试与对 Java 或者其他语言进行单元测试有着一定的本质区别。以下所有的单元测试方法是以 DDT 进行展开的，并不包含最为理想的 TDD 单元测试方法。
- 框架——Mocha 与 Jest
- 辅助类库——enzyme，enzyme-to-json，enzyme-adapter-react-16
Mocha
Mocha 彰显了自由个性化，对结果进行断言需要额外安装依赖包，输出覆盖率报告也需要额外安装依赖包，一切都需要你本着自己的喜爱来进行搭建，因此整套单元测试流程的疏通需要一定的时间来做好准备。
Configuration 配置
在 React 项目根目录下创建 mocha.config.js 文件，并配置以下内容
require("@babel/register");
require("ignore-styles");
require("./src/utils/dom");
require("./src/utils/helpers");
需要额外安装一些依赖包来确保单元测试流程无阻碍
# 确保在运行时能够进行转换为可运行的代码
$ npm i -D @babel/register
# 运行单元测试时对样式相关的语法、文件等进行忽略，不做相应的语法分析检查
$ npm i -D ignore-styles
# 为项目运行所处的Node.js环境也拥有Browser的特性(window与document)
$ npm i -D jsdom
# 为Mocha安装上额外的断言库
$ npm i -D chai
# 安装上额外的依赖库使得Mocha具备操作DOM节点的能力，其中enzyme提供操作DOM的方法，enzyme-to-json能提供获取代码快照的方法，与git diff功能有点相像，enzyme-adapter-react-16用来使enzyme匹配16版本的React
$ npm i -D enzyme enzyme-to-json enzyme-adapter-react-16
配置 dom.js 与 helpers.js
JSDOM 是基于 JavaScript 的无头浏览器，可用于创建实际的测试环境。由于 enzyme 的 mount API 需要 DOM，因此运行环境如果不是处于 Browser 环境（即 Node 环境）中，则必须使用 JSDOM 才能使用，在运行 React 代码之前先创造一个 Browser 环境将使得 enzyme 得到最佳体验。
// dom.js
const { JSDOM } = require("jsdom");
const { window } = new JSDOM("<!doctype html><html><body></body></html>");
const copyProps = (src, target) => {
Object.defineProperties(target, {
...Object.getOwnPropertyDescriptors(src),
...Object.getOwnPropertyDescriptors(target)
});
};
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: "node.js"
};
global.requestAnimationFrame = callback => {
return setTimeout(callback, 0);
};
global.cancelAnimationFrame = id => {
clearTimeout(id);
};
copyProps(window, global);
Mocha 需要额外的断言库来支持断言，因此我们需要将断言用到的断言 API 挂载到 global 中，不仅能保证 Eslint 不报错，也能供各个 test 文件使用而不再需要重复导入。enzyme-adapter-react-16 提供适配器的功能，让 enzyme 支持 16 版本的 React，而且将 enzyme 的 API 挂载到 global 也能方便我们使用。
// helpers.js
import { expect } from "chai";
import toJson from "enzyme-to-json";
import Adapter from "enzyme-adapter-react-16";
import { mount, render, shallow, configure } from "enzyme";
configure({ adapter: new Adapter() });
global.expect = expect;
global.mount = mount;
global.render = render;
global.shallow = shallow;
global.toJson = toJson;
如果你使用 Eslint，另外还需要在Eslint Configuration中添加 globals 配置，这样才能确保代码运行不报错
{
// ...
"globals": {
"mount": true,
"render": true,
"shallow": true,
"toJson": true
}
// ...
}
Usage 用法
建议使用 React Hooks 来创建 Component，因为函数的单元测试更为友好一些，而且 React Hooks 的使用能为我们节省相当一部分代码，针对代码覆盖率低的问题我们也能更好更快地调整代码，而不用担心像 Class Component 中的 this 与 setState 的影响。值得注意的一点是不管是 Class Component 还是 React Hooks，它们提供的 API（生命周期函数、useState、useEffect 等）如果需要进行单元测试，则需要将这部分单独拆分出来进行测试，因为这一部分的测试与 DOM 的关联性比较低，有点偏向于数据驱动型测试。
React Hooks 方式构建的 Component
import React, { useState, useEffect } from "react";
export const fetchData = () => {
return Promise.resolve({
status: 200,
data: [
{
name: "Jayson",
age: 10
}
]
});
};
export const App = () => {
const [count, setCount] = useState(0);
const [users, setUsers] = useState([]);
const setUsersData = async () => {
try {
const result = await fetchData();
result && result.status === 200 && result.data && setUsers(result.data);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
setUsersData();
}, [users]);
return (
<div onClick={() => setCount(count + 1)}>
{users &&
users.map((user, index) => (
<div key={index}>
<div>{user.name}</div>
<div>{user.age}</div>
</div>
))}
</div>
);
};
在书写 React Hooks 时要注意，如果副作用只产生一次，则需要将 useEffect 的第二个数组参数置空，这样会得到与 Class Component componentDidMount 一样的效果。这里如果我们想得到一个好的代码覆盖率，则需要对 App，fetchData，setUsersData 以及 onClick 这几个进行单元测试，需要进行适当的二次封装，让代码对单元测试更友好。
为了与 Jest 作对比，测试代码都放于test下，因此 package.json 下可以这样添加指令
// package.json
{
// ...
"scripts": {
"test": "mocha --require mocha.config.js __test__/**/*.spec.js"
}
// ...
}
在安装 Node.js 之后在项目根目录下打开终端执行指令即可
$ npm run test
测试代码形如
import { fetchData } from "../src/App";
describe("fetchData()", () => {
it("Should Return Data Successfully", async () => {
const result = await fetchData();
expect(result.status).to.equal(200);
expect(result.data.length).to.equal(1);
expect(result.data).to.deep.equal([
{
name: "Jayson",
age: 10
}
]);
});
});
建议不同的函数使用不同的 describe 关键字分开，这样会使得测试代码保持结构的一致性，每一个 it 关键字针对一种情况来进行测试。
Jest
测试依赖的环境基本一致，Jest 对 React 的单元测试只进行不同点的描述。
Configuration 配置
// jest.setup.js，与Mocha的helpers.js的效用是一致的
import toJson from "enzyme-to-json";
import Adapter from "enzyme-adapter-react-16";
import { mount, render, shallow, configure } from "enzyme";
configure({ adapter: new Adapter() });
global.mount = mount;
global.render = render;
global.shallow = shallow;
global.toJson = toJson;
// jest.config.js
module.exports = {
// 测试的文件名格式
testRegex: "((\\.|/*.)(spec))\\.js?$",
// 提供全局使用环境
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
// 快照功能
snapshotSerializers: ["enzyme-to-json/serializer"],
// 对样式文件进行转换使得在Jest环境下能正常运行
moduleNameMapper: {
"\\.(css|scss|less)$": "babel-jest"
}
};
更多 Jest 配置项可参考: Configuring Jest
Usage 用法
由于 Jest 的默认测试代码目录在test下，因此不需要在测试指令上加上指定测试代码目录的参数，在安装 Node.js 之后在项目根目录下打开终端执行指令即可
{
// ...
"scripts": {
"test": "jest --watchAll --coverage"
}
// ...
}
如果需要保持验证测试代码的正确性，可以加上监视测试变动的参数，对更改测试代码进行热更新，与 Mocha 不同的是 Jest 自带输出代码覆盖率功能，因此如果你想得到代码覆盖率的报告，则只需要加上对应的指令参数即可。
Enzyme
Enzyme可以让我们对 React 的 DOM 节点进行操作，它的效用跟 jQuery 很相像，不过像浏览器事件Enzyme则需要通过模拟来实现操作，测试代码的书写可以参考API Reference下的说明。需要注意一下 Enzyme 在 Class Component 下对 Input 的 value 取值是正常的，但在 React Hooks 下 Input 的 value 取值是非正常的，因为在 React Hooks 下 Input 输出的 DOM 是不可控的，尽管输出的 Input 仍然具有 value 这个 prop，此时我们需要额外加上我们定义的 prop 来进行获取 Input 的 value 值。其他的测试框架如React Testing Library在这里不进行详细铺述，关于 React Hooks 的单独测试可查看React Hooks Testing Library
结论
- 在提供支持上 Jest 是专门为 React 进行打造的，因此在功能多样上优于 Mocha。
- 在测试代码编写上使用相同的依赖库 Mocha 与 Jest 都能达到一致的效果，但由于集成了更多的功能使得 Jest 在测试的时间上明显劣势于 Mocha。
- 在代码覆盖率上不管是 Jest 还是 Mocha 都需要对生命周期函数或是 Hooks 函数进行单独的测试，不能通过 DOM 的操作直接体现出来。
- 在项目结构上通过单元测试代码的编写能让开发者更好地梳理项目结构，从而能更好地统一对相似功能代码进行测试。
