使用 Jest 编写 React 组件测试-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 的生态系统中有很多测试库和工具。其中，Jest 是 Facebook 开发的一个强大、易用的测试框架，它在 React 等前端框架中被广泛使用。

在本文中，你将学习到：

Jest 的基本用法
如何使用 Jest 测试 React 组件
一些有用的 Jest 工具和技巧

Jest 基础

如果你还没有使用过 Jest，那么建议先阅读 Jest 的官方文档，了解 Jest 的基础用法和特点。

安装 Jest

首先，需要在项目中安装 Jest。可通过 npm 或 yarn 安装：

npm install --save-dev jest

yarn add --dev jest

简单的测试用例

下面是一个简单的示例，用于测试加法函数：

function add(a, b) {
  return a + b;
}

test('addition', () => {
  expect(add(1, 2)).toBe(3);
});

在这个示例中，我们使用 Jest 的 test 函数来定义一个测试用例。test 函数接受两个参数：

测试用例的名称，比如 'addition'。
一个测试函数，里面包含了要测试的逻辑以及断言。

在上述示例中，我们使用了一个称为 expect 的全局函数来进行断言。它接受一个值作为参数，并且有许多便捷的匹配器（matchers）可以使用。

匹配器

Jest 内置了许多匹配器，可以用来测试不同类型的值。下面是一些常见的匹配器：

toBe(value)：比较变量或表达式的值是否与期望值相等（使用 Object.is 进行比较）。
toEqual(value)：比较变量或表达式的值是否与期望值深度相等（比较对象的属性）。
toMatch(regexp)：比较字符串是否与正则表达式匹配。
toHaveLength(num)：比较数组或字符串的长度是否与期望值相等。
toHaveProperty(keyPath, value)：比较对象是否具有指定的属性，并且该属性的值是否与期望值相等。

还有更多匹配器可以使用，你可以在 Jest 官方文档中了解更多。

React 组件测试

简单的组件测试

React 组件是通常需要测试的重要部分。Jest 对 React 的支持极为完善，可以轻松地编写测试用例。

先来看一个简单的组件测试用例：

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

test('renders a button', () => {
  const { getByText } = render(<Button>Click me</Button>);
  const button = getByText(/Click me/i);
  expect(button).toBeInTheDocument();
});

这个测试用例检查 Button 组件是否渲染为一个按钮，并且按钮的内容是否为 "Click me"。在测试中，我们使用了 @testing-library/react 来渲染组件，并从渲染结果中获取所需的元素。

复杂组件测试

对于较复杂的组件，我们可以分解为多个测试用例。例如，一个包含表单的组件可以分为以下几个测试用例：

渲染表单并且可以填写字段。
输入不合法的数据时显示错误。
提交表单时发生正确的网络请求。

下面是一个复杂组件测试的样例代码：

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

test('renders a form and submits correctly', async () => {
  const onSubmit = jest.fn();

  const { getByLabelText, getByText } = render(<Form onSubmit={onSubmit} />);

  const nameInput = getByLabelText(/Name/i);
  fireEvent.change(nameInput, { target: { value: 'test' } });

  const emailInput = getByLabelText(/Email/i);
  fireEvent.change(emailInput, { target: { value: 'test@example.com' } });

  const submitButton = getByText(/Submit/i);
  fireEvent.click(submitButton);

  await act(async () => {
    expect(onSubmit).toHaveBeenCalledWith({
      name: 'test',
      email: 'test@example.com',
    });
  });
});

在这个测试用例中，我们测试了一个包含 name 和 email 表单字段的组件。我们模拟了用户在表单字段中输入内容并提交表单。在提交表单后，我们使用 await act() 来等待异步请求完成并验证提交后的数据是否符合预期。

使用 Jest 工具和技巧

mock

在测试组件时，有时需要模拟某些外部依赖。例如，你可能需要模拟一个 API 请求或一个 Props。这时，可以使用 Jest 的 jest.mock() 函数来模拟外部依赖。

例如，模拟一个父组件传递的属性：

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

test('renders a button with custom className', () => {
  const props = {
    className: 'custom-button',
    onClick: jest.fn(),
  };
  const { getByRole } = render(<Button {...props}>Click me</Button>);
  const button = getByRole('button');
  expect(button).toHaveClass('custom-button');
});

snapshot

使用 Jest 的快照功能，我们可以在不破坏代码的情况下轻松地检查组件渲染的结果。

先看一个快照测试的样例代码：

import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';

test('Button renders correctly', () => {
  const { container } = render(<Button>Click me</Button>);
  expect(container.firstChild).toMatchSnapshot();
});

在这个测试用例中，我们将组件渲染后的 DOM 与预先记录的快照进行比较。如果两者匹配，则测试通过。如果 DOM 结构发生了变化，则需要手动更新快照。

watch

Jest 的 --watch 选项可以在保存文件后自动运行测试用例，并且仅运行受影响的测试。这意味着，当你修改了一个组件时，只有与该组件相关的测试用例才会运行，而其他测试用例则会被忽略。

总结

在本文中，我们介绍了 Jest 的基本用法，并详细讲解了如何使用 Jest 编写 React 组件测试。同时，我们分享了一些有用的 Jest 工具和技巧。希望这篇文章能对你有所帮助，让你能更加有效地测试 React 组件。

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