Enzyme 中使用 Jest 的 snapshot 测试 React 组件的正确方式

Enzyme 中使用 Jest 的 Snapshot 测试 React 组件的正确方式

在 React 开发中，我们经常需要测试组件的正确性。其中一种测试方式是快照测试（Snapshot Testing），在 Jest 中有着很好的支持。而 Enzyme 是一个流行的 React 测试工具，可以方便地进行组件测试。本文将介绍如何在 Enzyme 中使用 Jest 的快照测试来测试 React 组件的正确性。

1. 安装 Jest 和 Enzyme

首先需要安装 Jest 和 Enzyme。可以使用 npm 或 yarn 进行安装：

npm install --save-dev jest enzyme enzyme-adapter-react-16

或者

yarn add --dev jest enzyme enzyme-adapter-react-16

其中 enzyme-adapter-react-16 是 Enzyme 适配器的 React 16 版本。

1. 配置 Enzyme

在使用 Enzyme 之前，需要配置 Enzyme 适配器。在项目的根目录下创建一个 setupTests.js 文件，然后将以下代码添加到文件中：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

这样就配置好了 Enzyme，可以开始写测试了。

1. 编写测试用例

以一个简单的 Button 组件为例，来编写测试用例：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('<Button />', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Button />);
    expect(wrapper).toMatchSnapshot();
  });
});

这里使用了 Jest 的 describe 和 it 函数，分别表示测试组件的描述和测试用例的描述。shallow 函数是 Enzyme 中的一个函数，它可以将组件渲染为一个浅层次的组件树，方便进行测试。

在测试用例中，使用 expect 函数和 toMatchSnapshot 函数进行快照测试。toMatchSnapshot 函数将会创建一个快照文件，如果测试用例的输出与快照文件不一致，测试将会失败。

1. 运行测试

在 package.json 文件中添加测试命令：

"scripts": {
  "test": "jest"
}

然后运行 npm run test 或 yarn test 命令，将会运行测试用例。如果测试通过，将会在项目根目录下生成一个 snapshots 文件夹，其中包含了所有的快照文件。

1. 更新快照

如果组件的输出发生了变化，需要更新快照文件。可以使用 --updateSnapshot 参数来更新快照文件：

npm run test -- -u

或者

yarn test -- -u

1. 总结

本文介绍了在 Enzyme 中使用 Jest 的快照测试来测试 React 组件的正确性。使用快照测试可以方便地测试组件的输出是否正确，并且可以快速地发现组件的变化。希望本文对于 React 开发者能够有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c238fd2f5e1655d48a43e