作者：Marcin Wanago翻译：疯狂的技术宅
原文：https://wanago.io/2018/09/03/...
未经允许严禁转载
-
- JavaScript测试教程-part 1：用 Jest 进行单元测试
-
- JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件
-
- JavaScript测试教程–part 3：测试 props，挂载函数和快照测试
-
- JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互
在本教程的第一篇中，我们简要介绍了单元测试的基础。这次要更进一步，使用 Enzyme 库测试 React。这样可以使你的程序将更加可靠，并且更加容易避免回归。我们在这里用了 Jest，不过 Enzyme 也可以与 Mocha 和 Chai 之类的库一起使用。
Enzyme 基础
Enzyme 是一个库，用于在测试时处理你的 React 组件。它由 Airbnb 开发。
设置 Enzyme
继续上一篇文章的内容，假设你 Jest 已经能够工作了。如果还没有，请随时查看课程的上一部分。下面开始安装 Enzyme
npm install enzyme首先要创建一个 setupTests.js 文件。它将包含 adapter 的用法，后者是一个附加库，允许你将 Enzyme 与一组特定的 React 版本一起使用。我将使用 React 16.x，所以需要安装 enzyme-adapter-react-16。有关兼容性列表，请查看 Enzyme repo。
你还可以找到 preact 和 inferno之类的库的适配器
npm install enzyme-adapter-react-16完成之后，setupTests.js 文件的内容应如下所示：
setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter: new Adapter()});最后要做的是在 package.json 中提供此文件的路径
package.json
"jest": {
"setupTestFrameworkScriptFile": "/app/setupTests.js"
} 准备就绪！
浅渲染
Enzyme 库的最基本用法是浅渲染。它允许你仅渲染父组件。“浅渲染”不但速度更快，而且非常适合单元测试。这样，你就不比测试传递给 shallow 函数的其他组件。
App.js
import React from 'react';
const App = () => {
return Hello world!
}
export default App;App.test.js
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
describe('app component', () => {
it('contains a header with the "Hello world!"', () => {
const app = shallow(Hello world!
)).toEqual(true);
});
});在这个简单测试中，我们正在检查 App 组件是否包含某个标头。运行 npm run test 后，你会看到一条成功消息。
PASS app/App.test.js
app component
✓ contains a header with the "Hello world!"这里要注意一个非常重要的点：即使我们用了 Enzyme，但测试运行程序仍然是 Jest。由于我们用的是 expect 函数，因此可以使用各种可供调用的匹配器函数。我已经在课程的第一部分中提到了它们。相关列表，请访问 Jest 文档。
让我们创建一些更有趣的测试。先创建一个全新的组件。
ToDoList.js
import React from 'react';
const ToDoList = (props) => {
return (
{
props.tasks.map((taskName, index) =>
- {taskName}
)
}
)
};
export default ToDoList;让我们测试一下，如果提供的任务列表为空，将会发生什么，如果包含任务，又会发生什么。
ToDoList.test.js
import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from './ToDoList';
describe('ToDoList component', () => {
describe('when provided with an empty array of tasks', () => {
it('contains an empty element', () => {
const toDoList = shallow();
expect(toDoList).toContainReact(
);
})
it('does not contain any - elements', () => {
const toDoList = shallow(
);
expect(toDoList.find('li').length).toEqual(0);
})
});
describe('when provided with an array of tasks', () => {
it('contains a matching number of - elements', () => {
const tasks = ['Wash the dishes', 'Make the bed'];
const toDoList = shallow(
);
expect(toDoList.find('li').length).toEqual(tasks.length);
})
});
});
测试顺利通过，但是我们应该解释一些内容。
在第一个测试中，我们使用了 toContainReact 函数，这是一个自定义匹配器函数。它是 enzyme-matchers 库的一部分。要将其与 Jest 一起使用，请安装 jest-enzyme 包。
npm install jest-enzyme最后要做的是将其导入 setupTests 文件中。
setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-enzyme';
configure({adapter: new Adapter()});有关其提供的功能列表，请查看自述文件。你会发现它非常有用。
在第二个测试中，我们在组件上调用了 find 函数。这要归功于 shallow 函数返回 ShallowWrapper，它是渲染输出的包装器。它有一组可供调用的函数。要检查函数列表，请转到 Enzyme 文档。
运行所有的测试会给我们带来成功的信息！
PASS app/App.test.js
PASS app/components/ToDoList/ToDoList.test.js
Test Suites: 2 passed, 2 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 1.41s
Ran all test suites.总结
本文中我们已经了解了使用 Enzyme 测试 React 组件的基本知识。我们已经介绍了安装 Enzyme 并运行第一个简单测试。使用的渲染类型称为“浅渲染”。之所以这样称呼，是因为它不渲染任何子组件。在编写单元测试时，它工作得很好。在本教程的后续部分中，我将介绍其他类型的渲染，并学习如何测试程序的不同部分。它将包括快照测试和模拟数据之类的技术。下次见！
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13个帮你提高开发效率的现代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
- WebSocket实战：在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么？
- 30分钟用Node.js构建一个API服务器
- Javascript的对象拷贝
- 程序员30岁前月薪达不到30K，该何去何从
- 14个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把HTML转成PDF的4个方案及实现
- 更多文章...