如何使用测试库在 React 中为单个渲染测试不同类型的测试？答案

【问题标题】：How to test different types of test for a single render in React with testing-library?如何使用测试库在 React 中为单个渲染测试不同类型的测试？
【发布时间】：2022-01-03 07:50:00
【问题描述】：

我是 React 的 TDD 新手。我决定使用 react-testing-library 来启动 TDD 进行开发。假设，我应该检查组件中的道具和简单文本：

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

test('render without crash', () => {
  render(<Card />);
  expect(screen.getByText('Card Component')).toBeInTheDocument();
});

test('title', () => {
  render(<Card title="test" />);
  expect(screen.getByText('test')).toBeInTheDocument();
});

我使用render 两次检查我的组件的不同类型的渲染。但我担心性能......在任何测试中单独使用render 是最佳做法吗？或者我应该创建类似这个公共变量的东西：

const Component = render(<Card title={...} prop2={} prop3={} ... />);

然后使用Component 代替render 再次使用？

【问题讨论】：

标签： javascript reactjs tdd react-testing-library

【解决方案1】：

我不认为这是一个不好的做法。我通常使用其中一种方法：

在 beforeEach 中渲染一次我的组件，并在多个 test() 中使用它，如果我总是需要为每个测试（道具、上下文、redux 存储...）进行相同的设置，
在每个test() 中渲染我的组件，这样我就可以调整道具和上下文并测试多个配置。

请参阅https://stackoverflow.com/a/61838982/2295549 以获得更完整的解释，以及一些优点/缺点。

但是多次使用render并不是一个坏习惯，事实上it is a pattern used in official docs。

【讨论】：

谢谢，但我认为渲染复杂组件会得到更多内存 + cpu...因为我们的组件不仅限于简单的 UI，而且细节会很复杂
它可能会导致更多的 RAM/CPU 使用，但在测试策略方面我不会太担心资源（至少不会太早）。我会专注于实际测试、用例覆盖、让我有信心的事情，并构建一个可以处理它的 CI 服务器。