JEST + React 测试库：我应该在测试前使用 beforeAll 渲染我的组件吗？

Question

正如标题所说，我正在使用 RTL + Jest（使用 Create-react-app 设置）。

我的问题是我是否应该在每个测试中使用 beforeAll 预渲染该块内的组件，因此每个测试不必从头开始重新渲染组件，因为我的测试套件总是从相同的基本组件开始。这样做是否有性能改进？

例如，这样做是否有改进

describe("MyComponent", () => {
    beforeAll(() => {
        render(<MyComponent {...props} />);
    });

    it("tests something", () => {
        expect(something).toDoSomething();
    });

    it("tests something else", () => {
        expect(somethingElse).toDoSomethingElse();
    });
});

关于这个（除了不那么冗长和重写组件渲染）？

describe("MyComponent", () => {

    it("tests something", () => {
        render(<MyComponent {...props} />);
        expect(something).toDoSomething();
    });

    it("tests something else", () => {
        render(<MyComponent {...props} />);
        expect(somethingElse).toDoSomethingElse();
    });
});

我应该通过做其他事情来以不同的方式接近我的测试套件吗？这只是个人喜好的问题吗？

我从 Kent C Dodds 的博客中读到了这篇文章，他主要指出它使代码的可读性降低，但没有谈论性能或它是否对测试有任何影响。

Answer 1

这主要是个人喜好的问题，但也与您的组件如何工作有关。您可能需要在不同的上下文中呈现您的组件（道具、模拟的 redux 存储、模拟的提供者...）。beforeEach 中的渲染组件可能会更快，但会使更改测试条件变得更加困难。

根据我的经验，作为经验法则，展示组件在测试本身中呈现，因为我想测试不同的道具集以涵盖所有情况。由于它们是愚蠢的组件（仅涉及道具，很少模拟，简单的组件逻辑），因此这些测试通常很快。这是“真正的单元测试”：测试纯函数 I/O（我只在当前位置编写函数组件）。

对于智能/更大的组件，通常我一起测试一组组件（这更像是一个集成测试），我必须设置模拟（redux、http 服务...），并且测试往往类似于您在Cypress，具有用户交互功能。对于那些测试，我在 beforeEach 中渲染一次，并编写更少但更长的测试。我最终得到了更长的测试执行时间，但有很高的信心（接近 E2E 所能提供的）。

这或多或少是https://kentcdodds.com/blog/write-tests所说的（据我所知），到目前为止，这似乎是一种可靠的方法。

显然，这是一些一般性想法/个人见解，我认为这件事没有一刀切。唯一的目标是获得信心。

顺便说一下，在多次选择续恢复组件时，不要忘记使用rerender函数来防止有趣的事情发生。