使用 Jest 和 Enzyme 测试 React 应用程序-JavaScript中文网-JavaScript教程资源分享门户

前言

React 是一种流行的 JavaScript 库，它提供了高效的方式来构建 Web 应用程序。但是在构建复杂的应用程序时，为确保代码的质量和健壮性，必须进行测试。

在本文中，我们将介绍如何使用 Jest 和 Enzyme 进行测试，这是两个流行的测试工具，广泛应用于 React 项目中。

Jest 和 Enzyme 简介

Jest 是一个由 Facebook 提供的 JavaScript 测试框架。它提供了一整套功能，包括单元测试、集成测试和 UI 测试等，而且非常易于使用。

Enzyme 是一个 React 测试工具，它提供了一套用于编写、运行和分析测试的 API。通过 Enzyme，我们可以方便地测试 React 组件，快速查找和渲染组件的元素，并测试其状态和交互等。

设置测试环境

在开始测试前，我们需要先配置 Jest 和 Enzyme。下面是设置步骤：

在项目根目录下，安装 Jest 和 Enzyme：

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

创建 Jest 配置文件：
```
npx jest --init
```
根据提示依次回答以下问题：

a. Would you like to use Jest when running "npm test"? Yes

b. Choose the Test environment type: node

c. Do you want Jest to add coverage reports? No

d. Which provider should be used to instrument code for coverage? V8

e. Automatically clear mock calls and instances between every test? Yes

在 package.json 中添加以下内容：

{
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

在 src 目录下创建 setupTests.js 文件，添加以下内容：

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

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

这个文件将配置 Enzyme。

在 src/__mocks__ 目录下创建 styleMock.js 文件，添加以下内容：
```
module.exports = {};
```
这个文件将 mock CSS。

现在测试环境已经设置好了，可以开始测试 React 组件。

编写测试用例

假设我们要测试一个 Button 组件，包括它的点击事件、样式和状态。编写测试用例的基本步骤如下：

创建 Button.test.js 文件，并引入测试工具：

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import Button from './Button';

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

编写测试用例：

// javascriptcn.com 代码示例
describe('Button Component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<Button />);
  });

  it('Should render button without error', () => {
    const button = wrapper.find('.button');
    expect(button.length).toBe(1);
  });

  it('Should emit click event on click()', () => {
    const onClickMock = jest.fn();
    wrapper.setProps({ onClick: onClickMock });
    const button = wrapper.find('.button');
    button.simulate('click');
    expect(onClickMock).toHaveBeenCalled();
  });

  it('Should have a label text', () => {
    const label = 'Click Me';
    wrapper.setProps({ label });
    const button = wrapper.find('.button');
    expect(button.text()).toBe(label);
  });

  it('Should have a success style', () => {
    wrapper.setProps({ variant: 'success' });
    const button = wrapper.find('.button');
    expect(button.hasClass('success')).toBe(true);
  });

  it('Should have a disabled state', () => {
    wrapper.setProps({ disabled: true });
    const button = wrapper.find('.button');
    expect(button.prop('disabled')).toBe(true);
  });
});

这个测试用例有 5 个测试点，分别对应了组件的 5 个方面：渲染、点击事件、标签、样式和状态。

运行测试

测试用例已经编写完毕，我们可以使用以下命令来运行测试：

npm test

此命令将运行项目的测试用例，并显示测试结果。如果没有未通过的测试，输出将是绿色的：

// javascriptcn.com 代码示例
 PASS  src/components/Button/Button.test.js
  Button Component
    ✓ Should render button without error (6 ms)
    ✓ Should emit click event on click() (2 ms)
    ✓ Should have a label text (3 ms)
    ✓ Should have a success style (3 ms)
    ✓ Should have a disabled state (2 ms)

Test Suites: 1 passed, 1 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        2.02 s
Ran all test suites matching /src\/components\/Button\/Button.test.js/i.

如果有测试失败，输出将是红色的，并显示具体的错误信息。此时你需要查看错误信息并修改对应的代码。

总结

在本文中，我们介绍了如何使用 Jest 和 Enzyme 进行测试 React 应用程序。通过了解这两个测试工具的基本原理，我们能够快速构建和运行测试用例，并发现代码中的问题。

为了更好地测试代码，需要不断学习和了解测试工具的相关特性和技术。同时，也要遵守测试用例的最佳实践，确保测试的覆盖度和正确性。

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