React快照测试-react-test-渲染器与react- testing -library

基础概念

React 快照测试是一种用于确保 UI 组件渲染输出一致性的测试方法。它通过将组件的渲染输出保存为一个“快照”，然后在后续测试中对比新旧快照，来检测组件是否发生了不期望的变化。

react-test-renderer 是 React 官方提供的一个库，用于渲染 React 组件并生成快照。而 @testing-library/react 是一个更现代、更用户友好的测试库，它提供了更接近用户实际使用方式的测试方法。

相关优势

1. 一致性检查：快照测试可以确保组件的渲染输出在不同版本之间保持一致，有助于捕获不期望的 UI 变化。
2. 快速反馈：通过对比快照，测试可以迅速失败并指出变化，从而加快问题定位速度。
3. 简化测试编写：相比于手动编写复杂的 DOM 断言，快照测试可以简化测试代码的编写。

类型

• 快照测试：基于组件渲染输出的快照进行对比测试。
• DOM 测试：直接对组件的 DOM 结构进行断言。
• 行为测试：模拟用户交互并验证组件的响应行为。

应用场景

• 当组件的渲染输出较为复杂，且不易手动编写断言时。
• 在持续集成流程中，用于确保每次代码提交不会引入不期望的 UI 变化。
• 在重构或更新依赖库时，用于检测潜在的破坏性更改。

常见问题及解决方案

问题：快照测试失败，但实际 UI 没有变化。

• 原因：可能是由于依赖库的更新导致组件渲染输出发生了微小变化。
• 解决方案：审查快照测试的失败信息，确定变化是否可接受。如果可接受，可以更新快照；如果不可接受，需要检查组件代码以找出潜在问题。

问题：快照测试难以维护。

• 原因：随着项目的发展，组件的渲染输出可能会变得复杂且难以预测。
• 解决方案：考虑使用更细粒度的测试方法，如 @testing-library/react 提供的 screen.getBy* 系列方法，直接对组件的特定部分进行断言。

示例代码

以下是一个使用 react-test-renderer 进行快照测试的简单示例：

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

test('renders correctly', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

对于更复杂的场景，建议使用 @testing-library/react 进行测试，以下是一个示例：

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  render(<MyComponent />);
  const linkElement = screen.getByText(/hello/i);
  expect(linkElement).toBeInTheDocument();
});

更多关于 react-test-renderer 和 @testing-library/react 的信息和示例代码，可以参考它们的官方文档或相关教程。

参考链接

• react-test-renderer 官方文档
• @testing-library/react 官方文档