Jest 测试时如何测试 UI 组件？

背景

在前端开发中，UI 组件是必不可少的一部分。而测试是保证代码质量和性能的重要手段之一。在 Jest 轻量级测试框架的支持下，测试 UI 组件也变得非常简单。

本文将会介绍如何使用 Jest 对 UI 组件进行测试，包括常见的测试方式和注意事项，旨在帮助读者更好地理解 Jest 的应用和 UI 组件测试。

Jest 测试 UI 组件的常见方式

快照测试

快照测试是一种以更改前后生成的快照来比较 UI 组件的测试方式。它会使用当前 UI 组件的渲染结果生成一个快照并进行比较，如果两个快照不匹配，则测试将会失败。这种测试方式可以检测到 UI 组件是否正确渲染、是否正确显示，以及 UI 组件是否随着更改而变化。但是，它无法测试实际的交互行为。

快照测试示例代码：

import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';

test('Button', () => {
  const component = renderer.create(
    <Button onClick={() => console.log('clicked')} label="Click me" />
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

上述代码在 Jest 中引入了 react-test-renderer 。这是 React 官方提供的一个轻量级测试工具，用于捕获渲染输出。

交互测试

交互测试是通过模拟用户交互来测试 UI 组件的行为。它会使用各种方法模拟点击、键入、滚动等行为，来测试 UI 组件的实际交互行为。这种测试方式可以检测 UI 组件的交互能力，以及交互行为对 UI 组件的影响。

交互测试示例代码：

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

test('Button', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick} label="Click me" />);
  fireEvent.click(getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

上述代码在 Jest 中引入了 @testing-library/react 。这是一个专门为 React 项目设计的测试工具库，提供了多种方便的测试方法，如 render 和 fireEvent 等。在测试 Button 组件时，使用 fireEvent.click 方法进行模拟点击操作，然后使用 expect 断言来验证 handleClick 已被调用一次。

注意事项

1. 测试 UI 组件应当避免对其引入外部样式。使用内置样式或者内嵌样式来控制组件样式以保证测试的可靠性。
2. 尽可能地重用测试代码。如果您有多个组件使用了同一种测试方法，应该避免复制黏贴相同的测试用例，而应该将它们封装为一个公共函数，以便重用。
3. 在进行交互测试时，应尽可能使用组件输出的 props 进行测试，而非直接访问组件的内部状态。

总结

通过本文的介绍，读者可以了解到 Jest 如何测试 UI 组件，了解了常见的测试方式和注意事项。在进行 UI 组件测试时，应结合实际项目场景和具体需求，选择合适的测试方式，以保证测试结果的可靠性和有效性。

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