前端开发是一个快速发展的领域，在开发的过程中我们会面临各种各样的问题和挑战。其中之一就是如何有效地测试我们的代码。在这个过程中，Enzyme 和 Jest 是两个开发者用来做单元测试的普遍选择。在本文中，我们将介绍如何使用 Enzyme 和 Jest 来测试你的 React 代码，并给出一些简单的示例和技巧。
Jest 基础知识
Jest 是一个非常流行的 JavaScript 测试框架。它具有易于使用的 API，而且速度非常快。在使用 Jest 进行测试之前，您需要安装 Jest：
npm install --save-dev jest
安装好后，我们就可以开始编写测试代码了。
编写测试用例
我们现在假设我们需要测试一个函数，这个函数接受两个数字作为参数并返回它们的和。在撰写测试用例之前，我们需要先编写这个函数：
function add(a, b) {
return a + b;
}编写测试用例：
test('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});这个测试用例可以这样解释：我们期望 add(1, 2) 的结果应该是 3。
我们的测试用例放在名为 tests 的文件夹内，并且可以通过运行以下命令来运行测试：
npx jest
这将会执行所有的测试用例。
快照测试
Jest 还支持可视化的快照测试。快照测试是一种测试方法，可以使您轻松地比较当前 UI 的状态和之前 UI 的状态。
在使用快照测试之前，我们需要先安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
Enzyme 是一个流行的 React 测试工具，其 API 简单易用。
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
test('MyComponent snapshot renders correctly', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper).toMatchSnapshot();
});在运行此测试用例后，Jest 将会生成一个快照文件。以后如果我们修改代码，通过运行快照测试，我们还能在控制台中看到我们对 UI 做出了哪些改变。
匹配器
在编写测试用例时，您可能会使用 Jest 的“匹配器” API 之一。匹配器是一种验证函数，它可以帮助您在测试过程中实现“期望”的结果。在 Jest 中，期望的结果通过 expect 函数来传递。
举一个简单的例子：
test('two plus two is four', () => {
expect(2 + 2).toBe(4);
});toBe 就是一种基本的匹配器，它会检查两个变量是否完全相等。还有一些其他的匹配器，比如：
- toEqual: 用来检查两个对象的值是否相等
- toBeTruthy 和 toBeFalsy: 用来检查一个变量是否为 true 或 false
- toBeGreaterThan 和 toBeLessThan: 用来检查一个数值是否大于或小于另一个数值
您可以通过查看 Jest 文档来查看完整的匹配器列表。
Enzyme 入门
Enzyme 是一个流行的 React 测试工具，它可以帮助我们在测试中轻松地渲染组件。与 Jest 不同的是，Enzyme 是使用 React 测试工具提供的生命周期来实现的。在使用 Enzyme 之前，我们首先需要安装它：
npm install --save-dev enzyme enzyme-adapter-react-16
渲染 React 组件
我们在这里使用 Enzyme 的 shallow 方法来渲染一个 React 组件。
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
test('MyComponent should render', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.exists()).toBe(true);
});在这个测试用例中，我们使用 shallow 方法来渲染 MyComponent 组件，并使用 exists 方法来检查组件是否存在。
模拟事件
Enzyme 也可以帮助我们模拟 DOM 事件，以便更好地测试 React 组件。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------------- ------ ---- --------- -- -- - ----- ----------- - ---------- ----- ------- - -------------------- --------------------- ---- ----------------------------------------- --------------------------------------- ---
这个测试用例中，我们首先在组件上添加了一个 onClick 事件监听器。然后，我们使用 simulate 方法来模拟 click 事件，并使用 toHaveBeenCalled 检查是否调用了 onClick 监听器。
测试组件状态和属性
Enzyme 还可以提供方法来帮助您搜索组件的 props 和 state，以便更好地测试：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ----------- ---- ---------------- ----------------- ------ ------ ------- -- -- - ----- ------- - ------------------ ---- ------------------ ------ - --- --------------------------------------- --- ----------------- ------ ---- ------- ------- -- -- - ----- ------- - ------------------ ---------------- ---- -------------------------------------------------- ---
在上述测试用例中，我们使用 mount 方法来渲染 MyComponent，并使用 setState 和 state 方法来测试 state。我们还使用 props 方法来测试组件的 props 状态。
结论
在本文中，我们介绍了 Enzyme 和 Jest，这两个工具都是 React 测试中的流行选择。我们已经学习了一些基本的测试技巧和用例，包括快照测试、匹配器和模拟事件。希望本文能够帮助您更好地测试 React 组件，并提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b1158d91dce0dc8871767