作者：Marcin Wanago翻译：疯狂的技术宅
原文：https://wanago.io/2018/09/10/...
未经允许严禁转载
-
- JavaScript测试教程-part 1：用 Jest 进行单元测试
-
- JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件
-
- JavaScript测试教程–part 3：测试 props，挂载函数和快照测试
-
- JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互
在上一篇教程中，我介绍了使用 Enzyme 测试 React 组件的基础知识。今天，将进行更深入的研究，并学习如何测试 props，如何（以及为什么）使用 mount 函数以及什么是快照测试。开始吧！
测试 props
在上一篇文章中，我们测试了通过一些 props 的结果。但是实际上，我们可以直接测试 props。让我们回到上次的 ToDoList 组件，不过这次要用一个新的 Task 组件。
ToDoList.js
import React from 'react';
import Task from "../Task/Task";
const ToDoList = (props) => {
return (
{
props.tasks.map(task =>
)
}
)
};
export default ToDoList;我们将要测试 ToDoList 组件是否渲染 Task 组件，并将任务名称传递给他们。
ToDoList.test.js
import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from './ToDoList';
describe('ToDoList component', () => {
describe('when provided with an array of tasks', () => {
it('passes them to the Task components', () => {
const tasks = [
{
id: 0,
name: 'Wash the dishes'
},
{
id: 1,
name: 'Make the bed'
}
];
const toDoListInstance = shallow(
);
toDoListInstance.find('Task').forEach(taskInstance => {
const taskProps = taskInstance.props();
const matchingTask = tasks.find(task => task.id === taskProps.id);
expect(taskProps.name).toBe(matchingTask.name);
})
})
});
});
通过测试，我们可以确保 Task 组件能够从 ToDoList 接收正确的 props。
由于 toDoListInstance 和 taskInstance 均继承自 ShallowWrapper，因此我们可以调用 props 函数。同样，你可以检查和更改状态。有关可用函数的完整列表，请访问文档。
但是如果我们想测试 Task 组件中 标记的实际内容怎么办？
toDoListInstance.find('Task').forEach(taskInstance => {
const taskProps = taskInstance.props();
const matchingTask = tasks.find(task => task.id === taskProps.id);
const listItem = taskInstance.first('li');
expect(listItem.text()).toBe(matchingTask.name);
})运行测试后你将会看到一个错误：
FAIL app/components/ToDoList/ToDoList.test.js
● ToDoList component › when provided with array of tasks › passes them to the Task components
expect(received).toBe(expected) // Object.is equality
Expected: "Wash the dishes"
Received: "使用 mount 函数渲染
失败了，因为我们在这里用了“浅渲染”。在这种情况下子组件将根本不会被渲染。所以上面的测试失败了，你需要了解“浅渲染”的局限性。
Mount 模拟了 DOM 的实现，而 Jest 默认使用 jsdom。你可以通过 testEnvironment 属性进行更改。
在早期版本的Enzyme中，在浅层渲染期间未调用生命周期方法。但是在 Enzyme 3.0 中发生了变化
const toDoListInstance = mount(
); 运行上面的代码将使整个 ToDoList 组件及其所有子组件渲染。前面失败的测试现在将会通过。
由于 mount 函数可渲染更多内容并模仿实际的 DOM，所以测试将会花费更多时间。使用 mount 函数可能意味着你是在进行单元测试，而现在在进行集成测试。正是由于这个事实，使用 mount 函数能够测试这些组件是否可以协同工作，而不仅仅是单独的单元测试。
要弄清楚 单元测试和 集成测试的区别，请参见 本教程第一部分。
在测试与 DOM 的交互或高阶组件时，它也被证明是有用的。
要了解有关高阶组件的更多信息，请查看 官方指南和 David Kopal 的文章
快照测试
在测试中使用快照是非常有用的。在测试期间，将渲染组件并创建其快照。它包含渲染组件的整个结构，应该与测试本身一起提交给存储库。再次运行快照测试时，新的快照将与旧的进行比较。如果它们不同，则测试将失败。这将帮助你确保用户界面不会被意外更改。
ToDoList.test.js
import React from 'react';
import { shallow } from 'enzyme';
import ToDoList from './ToDoList';
describe('ToDoList component', () => {
describe('when provided with an array of tasks', () => {
it('should render correctly', () => {
const tasks = [
{
id: 0,
name: 'Wash the dishes'
},
{
id: 1,
name: 'Make the bed'
}
];
const toDoListInstance = shallow(
);
expect(toDoListInstance).toMatchSnapshot();
});
});
});
运行上面的代码将会创建一个名为 ToDoList.test.js.snap 的文件
ToDoList.test.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ToDoList component when provided with array of tasks should render correctly 1`] = `
`;要更新所有失败的快照，你可以使用 `-u 标志（ --updateSnapshot的别名）运行 Jest。命令为 npm run test -- -u。
你还可以在 watch 模式下运行 Jest，这能够允许你一个接一个地更新所有有冲突的快照。为了做到这一点，请运行 npm run test---watchAll，然后选择 i 交互式地更新失败的快照。 官方 Jest 文档中有一个很好的动画演示了这个过程。
快照测试可以成为跟踪组件更改的非常强大的工具。这样可以防止你以意想不到的方式更改组件，从而迫使你查看所做的更改并接受或解决问题。因此它可用作监视代码的工具。
摘要
在本文中，我们介绍了对组件的 props 进行测试的过程，并了解了 mount 函数和 浅渲染 之间的区别。除此之外，我们还介绍了快照测试，它是跟踪组件渲染方式变化的有用工具。在下一篇文章中，我们还将介绍组件的模拟交互，敬请关注！
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
- 深入理解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个方案及实现
- 更多文章...