使用 Enzyme 和 Jest 进行 React 组件测试，为您节省时间和精力-JavaScript中文网-JavaScript教程资源分享门户

React 是一种流行的 JavaScript 库，用于构建可重用的 UI 组件。单元测试是开发可靠、可维护的 React 应用程序不可或缺的部分。在本文中，我们将介绍如何使用 Enzyme 和 Jest 来测试 React 组件。这将节省您时间和精力，并帮助您建立可靠的应用。

什么是 Enzyme 和 Jest？

Enzyme 是 Airbnb 开源的一个 React 测试库，它提供了一系列简单而强大的 API，用于查找、交互和断言渲染输出。 Jest 是 Facebook 开源的一个 JavaScript 测试框架，它具有零配置、高效和强大的断言库。 Jest 和 Enzyme 都是 React 生态系统中最流行的测试工具，可帮助您简化和加速 React 应用程序的测试。

如何安装 Enzyme 和 Jest？

首先，您需要使用 npm 或者 yarn 安装这两个测试工具：

npm install --save-dev enzyme jest

或者使用 yarn:

yarn add --dev enzyme jest

接下来，您需要配置 Jest 来处理 React 组件。在项目的根目录下创建一个 jest.config.js 文件，然后添加如下代码：

module.exports = {
  preset: 'jest-preset-preact',
  setupFilesAfterEnv: ['./jest.setup.js'],
  testMatch: ['<rootDir>/src/**/*.test.js?(x)'],
  verbose: true,
};

在 tempMatch 配置项中，<rootDir>/src/**/*.test.js?(x) 表示匹配所有以 .test. 结尾的测试文件，在项目的 src 目录下以及子目录下搜索。接下来，还需要创建名为 jest.setup.js 的文件，这个文件配置了 Enzyme 的适配器。在文件中添加以下代码：

import { EnzymeAdapter } from 'enzyme';
Enzyme.configure({ adapter: new EnzymeAdapter() });

现在，我们已经安装了 Enzyme 和 Jest，并进行了必要的配置。

如何创建 React 组件测试

在已经配置好的 Jest 中创建一个新的测试文件 Sample.test.js，我们将针对一个名为 Sample 的简单 React 组件进行测试。

import React from 'react';
import { shallow } from 'enzyme';
import Sample from '../Sample';

it('renders without crashing', () => {
  const wrapper = shallow(<Sample />);
  expect(wrapper.length).toBe(1);
});

上面的测试代码非常简单，它验证我们的 Sample 组件能够正常渲染。在测试文件中，我们导入 React、shallow 和 Sample 组件。使用 shallow() 函数将组件渲染为浅层次，这就保证了我们测试的是唯一的 Sample 组件。

接下来，我们使用 expect() 函数和 toBe() 方法来断言 Sample 组件是否能够正常呈现在浏览器中。如果组件渲染成功，那么其 length 属性将返回 1。

如何测试 React 组件行为

React 组件不仅要进行渲染测试，还需要对组件行为进行测试。我们可以使用 Enzyme 来模拟用户操作并断言组件功能。

// javascriptcn.com code example
import React from 'react';
import { shallow } from 'enzyme';
import Sample from '../Sample';
import Button from '../Button';

it('increments count when button is clicked', () => {
  const wrapper = shallow(<Sample />);
  expect(wrapper.state().count).toBe(0);

  wrapper.find(Button).simulate('click');
  expect(wrapper.state().count).toBe(1);
});

上述测试代码测试了一个名为 Sample 的 React 组件中包含一个 Button 组件。我们首先使用 shallow() 函数来渲染 Sample 组件。然后使用 find() 方法查找 Button 组件，并使用 simulate() 方法来模拟用户单击操作。最后，我们使用 expect() 函数和 toBe() 方法来断言 wrapper.state().count 是否能够递增。

如何测试 React 组件联动

React 组件之间的联动，特别是 props 和 state 之间的联动，往往是错误的根源。在测试这些联动之前，您需要预先清楚这些联动是如何工作的。

// javascriptcn.com code example
import React from 'react';
import { mount } from 'enzyme';
import Sample from '../Sample';
import Message from '../Message';

it('displays message when prop is passed', () => {
  const message = 'Hello World';
  const wrapper = mount(<Sample message={message} />);
  expect(wrapper.find(Message).text()).toBe(message);
});

上述代码测试了一个名为 Sample 的组件，其中包含一个名为 Message 的组件。我们使用 mount() 函数渲染 Sample 组件，并将一个包含字符串的 message prop 传递给它。然后使用 find() 方法查找 Message 组件，并使用 text() 方法来获取 Message 组件的文本内容。最后，我们使用 expect() 函数和 toBe() 方法来断言其文本内容和 message prop 是否相等。

结论

本文介绍了如何使用 Enzyme 和 Jest 来测试 React 组件。我们讨论了 Enzyme 和 Jest 的作用、如何安装它们、如何测试 React 组件以及如何测试组件行为和联动。使用这些测试工具，您可以创建可靠、高效、可维护的 React 应用程序，并降低维护成本。因此，我们强烈建议您在编写 React 应用程序时使用这些测试工具。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67373b50317fbffedf090bd3