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 来模拟用户操作并断言组件功能。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------ ---- ------------ ------ ------ ---- ------------ -------------- ----- ---- ------ -- --------- -- -- - ----- ------- - --------------- ---- -------------------------------------- --------------------------------------- -------------------------------------- ---
上述测试代码测试了一个名为 Sample 的 React 组件中包含一个 Button 组件。我们首先使用 shallow() 函数来渲染 Sample 组件。然后使用 find() 方法查找 Button 组件，并使用 simulate() 方法来模拟用户单击操作。最后，我们使用 expect() 函数和 toBe() 方法来断言 wrapper.state().count 是否能够递增。
如何测试 React 组件联动
React 组件之间的联动，特别是 props 和 state 之间的联动，往往是错误的根源。在测试这些联动之前，您需要预先清楚这些联动是如何工作的。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ------ ---- ------------ ------ ------- ---- ------------- ------------ ------- ---- ---- -- -------- -- -- - ----- ------- - ------ ------- ----- ------- - ------------- ----------------- ---- --------------------------------------------------- ---
上述代码测试了一个名为 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