在前端开发中，测试是保证代码质量和可维护性的重要手段。Jest 和 Enzyme 是两个在 React 生态系统中广泛使用的测试工具，其中 Jest 是一个测试框架，而 Enzyme 是一个 React 组件测试工具。本文将介绍如何使用 Jest 与 Enzyme 进行快照（Snapshot）测试，并结合最佳实践来达到更好的测试效果。
什么是快照测试？
快照测试是一种测试技术，它通过记录组件的输出结果（快照）来检测组件在不同状态下是否发生了变化。在进行快照测试时，我们首次运行测试时会生成一个快照文件，以后每次运行测试时会将组件的输出结果与保存在快照文件中的内容进行比较。如果比较结果不一致，测试就会失败。
这种测试技术的好处在于，我们可以轻松地检测到 UI 组件是否产生了意外的变化。这通常发生在我们不注意的情况下，如改变了组件的样式或者调整了 DOM 结构。
Jest
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它提供了一套完整的测试工具，包括快照测试、单元测试和集成测试等。Jest 对 React 应用的支持非常好，并且具有非常快的测试速度和易于使用的断言语法。
要在 React 项目中使用 Jest，我们需要安装相应的依赖库：
npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react react-test-renderer
其中，babel-jest、@babel/core、@babel/preset-env 和 @babel/preset-react 是用来让 Jest 支持 ES6、JSX 和其他一些 JavaScript 语法的工具，react-test-renderer 则是用来在 Jest 中渲染 React 组件。
Enzyme
Enzyme 是一个由 Airbnb 开发的 React 组件测试工具，它提供了一系列 API 来帮助我们方便地测试 React 组件的行为和输出。Enzyme 支持三种渲染方式：浅渲染、完整渲染和静态渲染，其中浅渲染是最快的一种方式，适合我们进行快照测试。
要在 React 项目中使用 Enzyme，我们需要安装相应的依赖库：
npm install --save-dev enzyme enzyme-adapter-react-16 react-dom
其中，enzyme 和 enzyme-adapter-react-16 是 Enzyme 的依赖库，react-dom 则是 React 的 DOM 渲染器。
测试组件
现在，在我们已经安装好了 Jest 和 Enzyme 之后，我们就可以开始编写快照测试了。下面是一个简单的 React 组件，它是一个带有计数器的按钮：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
-
----------- - -- -- -
----------------------- -- --
------ --------------- - -
----
-
-------- -
------ -
------- ---------------------------
--- ---- ------- -- ------------------ ------
---------
--
-
-
------ ------- --------------这个组件有一个状态 count，它记录了按钮被点击的次数。每次点击按钮，count 的值就会加 1。我们可以使用 Jest 和 Enzyme 来测试这个组件的输出结果是否符合我们的预期。
快照测试
首先，在我们的测试文件中导入我们需要的库和组件：
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import renderer from 'react-test-renderer';
import CounterButton from './CounterButton';
Enzyme.configure({ adapter: new Adapter() });其中，shallow 方法是用来进行浅渲染的，renderer 是用来在 Jest 中渲染 React 组件的。
接下来，我们可以编写第一个测试案例了。在这个案例中，我们使用 Enzyme 的 shallow 方法来浅渲染组件并生成快照。然后，我们使用 Jest 的 toMatchSnapshot 方法来将当前快照与之前保存的快照进行比较。
test('CounterButton snapshot test', () => {
const tree = renderer.create(<CounterButton />).toJSON();
expect(tree).toMatchSnapshot();
});这个测试案例非常简单，首次运行时它会生成一个快照文件（.snapshot），以后每次运行测试时它会将当前快照与之前保存的快照进行比较，如果比较结果不一致，测试就会失败。如果我们需要更新快照，可以在命令行中按下 u，然后 Jest 将会自动更新快照文件。
现在，我们再添加一个测试案例，用来检测计数器是否能够正确地增加：
test('CounterButton handleClick test', () => {
const wrapper = shallow(<CounterButton />);
expect(wrapper.state('count')).toEqual(0);
wrapper.find('button').simulate('click');
expect(wrapper.state('count')).toEqual(1);
wrapper.find('button').simulate('click');
expect(wrapper.state('count')).toEqual(2);
});在这个测试案例中，我们首先使用 shallow 方法来浅渲染组件，并检查初始状态的值是否为 0。然后，我们模拟点击按钮两次，并检查状态值是否正确地更新了。
结论
在本文中，我们介绍了如何结合 Jest 和 Enzyme 来进行快照测试，并给出了一些最佳实践，包括：
- 利用 Enzyme 的浅渲染和 Jest 的
toMatchSnapshot方法进行快照测试； - 在测试中检验状态的更新，以确保组件行为的正确性。
通过快照测试技术，我们可以确保 React 组件的输出结果符合我们的期望，并提高代码质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c153614b275ea6fe33975