React 测试库：如何在不删除自动清理的情况下显式重用渲染的组件

Question

RTLib has auto-cleanup 我想保留它。
虽然在某些情况下，我想以这种方式重用我的组件的渲染结果（简化测试）:

describe('some set of related functionality', () => {
    const onSelect = jest.fn();
    const Wrapper = render(
      <MyComponent onSelect={onSelect)} />
    );

    afterEach(() => {
      onSelect.mockReset();
    });

    it('tests something', async () => {
      userEvent.click(await Wrapper.findByText('some-text'));
      expect(onSelect).toBeCalledWith('something');
    });

    it('also tests something on the same component very related to closest describe block', async () => {
      userEvent.click(await Wrapper.findByText('some-other-text'));
      expect(onSelect).toBeCalledWith('some-other-thing');
    });
});

所以这里的想法是在一些测试之间重用包装器并查询该包装器而不是在全局 afterEach.

中清理的全局屏幕

我喜欢默认行为，但我认为在某些测试之间重用包装器可能会有用，例如加快某些测试或缩短测试时间。

目前的替代方法是在单个 it 语句中编写许多断言（实际上是许多测试）。例如。也可以这样

it('tests some set of related functionality', () => {
    const onSelect = jest.fn();
    render(<MyComponent onSelect={onSelect)} />);

    // tests something
    userEvent.click(await Wrapper.findByText('some-text'));
    expect(onSelect).toBeCalledWith('something');

    // have to do it manually now
    onSelect.mockReset();

    // also tests something on the same component
    userEvent.click(await Wrapper.findByText('some-other-text'));
    expect(onSelect).toBeCalledWith('some-other-thing');
});

这里的动机是：

测试速度
能够编写一系列测试，其中每个步骤本身都是一个测试用例，无需重复渲染代码和之前的步骤（即用户交互）来达到特定的组件状态。

有什么办法可以实现吗？

Answer 1

这个问题有点主观，但作为您正在使用的库的创建者，您可能会对我的意见感兴趣（尤其是因为您通过电子邮件向我发送了 link）

您提到的备选方案是推荐的方法。在 Write fewer, longer tests.

中阅读更多内容

此外，我注意到您正在调用 render Wrapper 的 return 值，这是酶的旧问题，我建议也避免使用它。在 Common mistakes with React Testing Library.

中阅读更多相关信息

希望对您有所帮助。

React 测试库：如何在不删除自动清理的情况下显式重用渲染的组件

React testing library: how to explicitly reuse rendered component without removing auto-cleanup

react-testing-library