Jest 与 Enzyme 全方位使用 React 单元测试-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 开发中，单元测试是一项非常重要的工作。单元测试可以帮助我们发现代码中的问题，提高代码的可维护性和可靠性。在 React 开发中，单元测试同样非常重要。本文将介绍 Jest 和 Enzyme 这两个 React 测试工具，并且详细讲解如何使用它们进行单元测试。

Jest

Jest 是 Facebook 开源的一款 JavaScript 测试框架，它的特点是易于配置、易于使用和速度快。使用 Jest 可以对 JavaScript 代码进行单元测试、集成测试和快照测试。Jest 内置了断言库、Mock 和自动化测试等功能，可以帮助我们快速构建测试用例。

安装 Jest

使用 npm 安装 Jest：

npm install --save-dev jest

使用 Jest 进行单元测试

在 React 开发中，我们通常对组件进行单元测试。下面是一个简单的 React 组件：

// javascriptcn.com 代码示例
import React from 'react';

function Button(props) {
  const { onClick, children } = props;
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

我们可以使用 Jest 对这个组件进行单元测试。在同级目录下创建一个名为 Button.test.js 的文件，内容如下：

// javascriptcn.com 代码示例
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders a button with the correct text', () => {
  const onClick = jest.fn();
  const { getByText } = render(
    <Button onClick={onClick}>Click me</Button>
  );
  const button = getByText(/click me/i);
  expect(button).toBeInTheDocument();
});

test('calls the onClick function when the button is clicked', () => {
  const onClick = jest.fn();
  const { getByText } = render(
    <Button onClick={onClick}>Click me</Button>
  );
  const button = getByText(/click me/i);
  fireEvent.click(button);
  expect(onClick).toHaveBeenCalled();
});

这个测试文件中包含了两个测试用例。第一个测试用例测试组件是否渲染正确，第二个测试用例测试点击按钮是否能够触发事件。在测试用例中，我们使用了 @testing-library/react 和 Jest 提供的 jest.fn() 函数。@testing-library/react 是一个用于测试 React 组件的工具库，它提供了一些方法来模拟用户与组件的交互。jest.fn() 是 Jest 提供的一个 Mock 函数，可以模拟一个函数的行为。在测试用例中，我们使用 jest.fn() 来模拟按钮的点击事件，以及模拟 onClick 回调函数的行为。

Jest 的 Mock

Jest 的 Mock 功能可以帮助我们模拟一些外部依赖，比如 API 请求、数据库操作等。Mock 可以让我们更加方便地进行单元测试，而不需要依赖于外部环境。

下面是一个简单的 Mock 示例：

// javascriptcn.com 代码示例
import axios from 'axios';

jest.mock('axios');

test('fetches data from an API', async () => {
  const data = { name: 'John' };
  axios.get.mockResolvedValueOnce({ data });
  const response = await axios.get('/api/user');
  expect(response.data).toEqual(data);
});

在这个测试用例中，我们使用了 jest.mock() 函数来模拟 axios 模块。然后使用 axios.get.mockResolvedValueOnce() 函数来模拟 API 请求，并且验证返回值是否正确。

Enzyme

Enzyme 是 Airbnb 开源的一款 React 测试工具，它提供了一系列 API 来帮助我们对 React 组件进行测试。Enzyme 支持 Shallow Rendering、Mounting 和 Full DOM Rendering 三种渲染方式，可以方便地测试组件的各个方面。

安装 Enzyme

使用 npm 安装 Enzyme：

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

使用 Enzyme 进行单元测试

在测试文件中引入 Enzyme：

import { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

然后就可以使用 Enzyme 提供的 API 来测试组件了。下面是一个简单的测试用例：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

test('renders a button with the correct text', () => {
  const onClick = jest.fn();
  const wrapper = shallow(
    <Button onClick={onClick}>Click me</Button>
  );
  expect(wrapper.text()).toEqual('Click me');
});

在这个测试用例中，我们使用了 shallow() 函数来进行浅渲染，然后使用 wrapper.text() 函数来验证组件是否渲染正确。

Enzyme 的 Mounting

Enzyme 的 Mounting 功能可以模拟组件的完整渲染，包括组件的子组件和事件处理等。使用 Mounting 可以更加贴近真实环境，但是也会增加测试的复杂度和时间。

下面是一个简单的 Mounting 示例：

// javascriptcn.com 代码示例
import React from 'react';
import { mount } from 'enzyme';
import Button from './Button';

test('calls the onClick function when the button is clicked', () => {
  const onClick = jest.fn();
  const wrapper = mount(
    <Button onClick={onClick}>Click me</Button>
  );
  const button = wrapper.find('button');
  button.simulate('click');
  expect(onClick).toHaveBeenCalled();
});

在这个测试用例中，我们使用了 mount() 函数来进行完整渲染，然后使用 wrapper.find() 函数来查找按钮元素，最后使用 button.simulate() 函数来模拟按钮的点击事件。

总结

本文介绍了 Jest 和 Enzyme 这两个 React 测试工具，并详细讲解了如何使用它们进行单元测试。Jest 内置了断言库、Mock 和自动化测试等功能，可以帮助我们快速构建测试用例；Enzyme 提供了一系列 API 来帮助我们对 React 组件进行测试，包括 Shallow Rendering、Mounting 和 Full DOM Rendering 等方式。通过学习本文，相信读者已经掌握了 Jest 和 Enzyme 的使用方法，并且能够在 React 开发中使用它们进行单元测试。

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