reactjs - JEST + React 测试库 : should I render my component with a beforeAll before tests?

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 博客 this post他主要指出它使代码可读性降低，但没有谈论性能或它是否对测试有任何影响。

Answer 1

这主要是个人喜好的问题，但也与您的组件如何工作有关。您可能需要在不同的上下文中呈现您的组件( Prop 、模拟的 redux 存储、模拟的提供者...)。 beforeEach 中的渲染组件可能会更快，但会使更改测试条件变得更加困难。
根据我的经验，根据经验，展示组件在测试本身中呈现，因为我想测试不同的 Prop 集以涵盖所有情况。由于它们是愚蠢的组件(仅涉及 Prop ，很少模拟，简单的组件逻辑)，因此这些测试通常很快。这是“真正的单元测试”:测试纯函数 I/O(我只在当前位置编写函数组件)。
对于智能/更大的组件，通常我一起测试一组组件(这更像是一个集成测试)，我必须设置模拟(redux、http 服务...)，并且测试往往类似于您在Cypress，具有用户交互功能。对于那些测试，我在 beforeEach 中渲染一次，并编写更少但更长的测试。我最终得到了更长的测试执行时间，但有很高的信心(接近 E2E 所能提供的)。
这或多或少是 https://kentcdodds.com/blog/write-tests 所说的(据我所知)，到目前为止，它似乎是一种可靠的方法。
显然，这是一些一般性想法/个人见解，我认为这件事没有一刀切。唯一的目标是获得信心。
顺便说一下，在多次选择续期组件时，不要忘记使用rerender的功能来防止有趣的事情发生。