react-testing-library - React 测试库 : how to explicitly reuse rendered component without removing auto-cleanup

Question

1. RTLib has auto-cleanup我想保留它。
2. 但在某些情况下，我想以这种方式重用组件的渲染结果(简化测试):

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');
});

这里的动机是:

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

有什么办法可以实现吗？

Answer 1

这个问题有点主观，但作为您正在使用的库的创建者，您可能会对我的意见感兴趣(尤其是因为您通过电子邮件向我发送了指向此内容的链接)😉

您提到的备选方案是推荐的方法。在 Write fewer, longer tests 中阅读更多内容.

此外，我注意到您正在调用 render Wrapper 的返回值，这是 enzyme 的旧问题，我建议也避免这样做。在 Common mistakes with React Testing Library 中阅读更多相关信息.

希望对您有所帮助。