React 单元测试框架 Jest 与 Enzyme 使用完全指南详解-JavaScript中文网-JavaScript教程资源分享门户

在 React 开发中，单元测试是非常重要的一环。而在 React 单元测试中，使用 Jest 与 Enzyme 框架结合使用可以提升测试效率和代码质量。

Jest

Jest 简介

Jest 是一个开源的 JavaScript 测试框架，由 Facebook 开发和维护。它具有简单易用、速度快、自动化繁琐的特点。

使用 Jest 进行测试

使用 Jest 进行测试十分简单。只需在终端输入以下命令即可运行测试：

npx jest

如果要测试指定文件，可以在命令后面指定文件路径。比如：

npx jest ./src/components/Button.test.js

Jest 测试用例

下面是一个 Jest 测试用例的示例：

// javascriptcn.com 代码示例
// 测试文件 Button.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('Button Component', () => {
  test('render button text', () => {
    const wrapper = shallow(<Button text='click me' />);
    expect(wrapper.text()).toContain('click me');
  });
});

在代码中，我们使用了 Jest 提供的 describe 和 test 函数来描述和执行测试用例。shallow 函数来自 Enzyme，用来创建一个浅渲染组件的实例。最后使用 expect 断言语句来判断结果是否正确。

Enzyme

Enzyme 简介

React 官方不提供 DOM 测试工具，Enzyme 是一个 React 测试工具库，通过 Enzyme 我们可以方便地操作并验证组件的状态和输出。

使用 Enzyme 进行测试

Enzyme 提供了三个方法来创建组件的实例，分别是 shallow、mount 和 render。其中，shallow 创建的是浅渲染组件的实例，渲染的组件只渲染了当前组件，不会渲染子组件，速度比较快。mount 创建的是完整渲染组件的实例，渲染的组件包含了所有子组件，速度比较慢。render 创建的是静态渲染组件的实例，可以用来检查组件的输出。

Enzyme 测试用例

下面是一个使用 Enzyme 进行测试的示例：

// javascriptcn.com 代码示例
// 测试文件 Button.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('Button Component', () => {
  test('render button text', () => {
    const wrapper = shallow(<Button text='click me' />);
    expect(wrapper.text()).toContain('click me');
  });
});

在代码中，我们使用了 Enzyme 提供的 shallow 函数来创建组件的实例，并使用 expect 断言语句来判断结果是否正确。

Jest + Enzyme

Jest + Enzyme 配置

要使用 Jest 和 Enzyme 进行测试，需要先配置 Jest。在项目根目录下创建配置文件 jest.config.js，并添加以下内容：

module.exports = {
  testPathIgnorePatterns: ['/node_modules/', '/build/'],
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  moduleNameMapper: {
    '\\.(css|scss)$': 'identity-obj-proxy',
  },
};

其中，testPathIgnorePatterns 是指定 Jest 忽略哪些目录下的测试文件；setupFilesAfterEnv 是指定 Enzyme 的配置文件；moduleNameMapper 是指定模块的映射，用来处理模块的导入。

在项目根目录下创建配置文件 src/setupTests.js，并添加以下内容：

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

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

其中，我们使用了 enzyme-adapter-react-17 来适配 React 17。

Jest + Enzyme 测试用例

下面是一个使用 Jest + Enzyme 进行测试的示例：

// javascriptcn.com 代码示例
// 测试文件 Button.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('Button Component', () => {
  test('render button text', () => {
    const wrapper = shallow(<Button text='click me' />);
    expect(wrapper.text()).toContain('click me');
  });
});

在代码中，我们使用了 Jest 和 Enzyme 配合使用，使用了 Jest 提供的 describe 和 test 函数，和 Enzyme 提供的 shallow 函数来创建组件的实例，最后使用 expect 断言语句来判断结果是否正确。

总结

使用 Jest 和 Enzyme 进行 React 单元测试可以提升代码质量和测试效率。本文中，我们详细介绍了 Jest 和 Enzyme 的使用方法，并给出了示例代码，希望对读者有所启发。

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