如果您正在开发 React 应用程序，测试是非常必要和重要的一步。Jest 和 Enzyme 是两个流行的 JavaScript 测试框架和库，可以帮助您方便地测试 React 应用程序。本文将详细讲解 Jest 和 Enzyme 的基本知识，并提供示例代码和指导，帮助您轻松测试 React 应用程序。
Jest 的基本知识
Jest 是 Facebook 开源的 JavaScript 测试框架，它是快速、简单和零配置的。它支持基于测试运行的异步代码、测试断言、测试覆盖率和快照等功能。Jest 支持多种测试类型，包括单元测试、集成测试和端到端测试等。在这里，我们将关注 Jest 的单元测试。
安装 Jest
您可以通过 npm 安装 Jest：
npm install --save-dev jest
编写测试用例
Jest 测试用例默认在 <rootDir>/__tests__ 目录下。您可以按照以下方式编写测试用例：
test('adds 1 + 2 to equal 3', () => {
expect(1 + 2).toBe(3);
});在上面的代码中，我们定义了一个测试用例，它会检查 1 加 2 是否等于 3。我们可以使用 toBe() 函数进行检查。
运行测试
JavaScrpt 开发者都知道，运行测试也需要一定的时间和资源，所以开发过程中测试运行要尽可能快速和高效。Jest 可以减少测试运行所需要的时间和资源，例如只运行修改的测试用例、并行测试等。
您可以在 package.json 文件中添加以下代码:
{
"scripts": {
"test": "jest"
}
}并通过以下命令运行测试：
npm test
Jest 会自动查找所有的测试文件，并执行测试。
Enzyme 的基本知识
Enzyme 是 Airbnb 开源的一个 JavaScript 测试库，它可以帮助您方便地测试 React 组件。它支持多种测试类型，包括浅渲染、全渲染和静态渲染等，可以让您测试 React 组件的输出、行为和状态等。
安装 Enzyme
您可以通过 npm 安装 Enzyme 和它的适配器：
npm install --save-dev enzyme enzyme-adapter-react-16
浅渲染
您可以使用 Enzyme 的 shallow() 函数进行浅渲染，它只渲染组件的一层，不会渲染组件的子组件。在以下示例中，我们将测试组件是否正确渲染了标题元素。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ------------- --- ------- -- -- - ----- ------- - -------------------- ---- ----- ----- - --------- ----------- ---------------------------------------------- ---
在上面的代码中，我们使用了 shallow() 函数，从而只渲染了组件 MyComponent 中的一层。我们使用了 contains() 函数检查组件是否包含了 <h1>Hello Jest!</h1> 元素。
全渲染
您可以使用 Enzyme 的 mount() 函数进行全渲染，它会完全渲染组件及其子组件，可以让您测试 React 组件的行为和状态等。在以下示例中，我们将测试渲染组件能否正常触发点击事件并更新状态。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ----------- ---- ---------------- --------------- ----- ------- -- -- - ----- ------- - ------------------ ---- ------------------------------------------ ----------------------------------------- ------------------------------------------ ----------------------------------------- ------------------------------------------ ---
在上面的代码中，我们使用了 mount() 函数渲染了组件 MyComponent 及其子组件。我们使用了 simulate() 函数触发了点击事件，并检查了组件的状态是否正确地更新了两次。
静态渲染
您可以使用 Enzyme 的 render() 函数进行静态渲染，它可以将组件渲染为纯 HTML，可以让您测试组件的输出等。
import React from 'react';
import { render } from 'enzyme';
import MyComponent from './MyComponent';
test('renders correctly', () => {
const wrapper = render(<MyComponent />);
expect(wrapper).toMatchSnapshot();
});在上面的代码中，我们使用了 render() 函数将组件渲染为纯 HTML。我们使用了 toMatchSnapshot() 函数检查组件是否正确输出。
集成 Jest 和 Enzyme
您可以集成 Jest 和 Enzyme，以便应用程序在测试时运行 Enzyme。在以下示例中，我们将测试渲染是否正确并进行快照测试。
安装 Enzyme Jest 适配器
您需要在 Jest 中安装 Enzyme 的适配器：
npm install --save-dev enzyme-adapter-react-16
并配置 Jest：
// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });配置 Jest
在 package.json 文件中添加以下配置：
{
"jest": {
"setupFilesAfterEnv": ["./src/setupTests.js"]
}
}测试应用程序
在示例应用程序的 src 目录下创建一个 App.test.js 文件：
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
test('renders correctly', () => {
const wrapper = shallow(<App />);
expect(wrapper).toMatchSnapshot();
});在上面的代码中，我们使用了 shallow() 函数将 App 组件浅渲染，并使用 toMatchSnapshot() 函数进行快照测试。
运行测试
您可以使用以下命令运行测试：
npm test
所有测试都将自动运行。
结论
在本文中，我们讨论了 Jest 和 Enzyme 的基本知识，并提供了示例代码和指导，帮助您轻松测试 React 应用程序。我们强烈建议您使用测试来提高应用程序的质量和可维护性。Jest 和 Enzyme 不仅简单易用，而且可以提供各种测试类型和功能，使测试变得更加简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6739a70f317fbffedf17e252