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

这主要取决于个人喜好，也取决于组件的工作方式。您可能需要在不同的上下文中渲染组件（props，模拟的redux存储，模拟的提供程序...）。 beforeEach中的渲染组件可能更快，但更难更改测试条件。

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

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

这大概是https://kentcdodds.com/blog/write-tests所说的（据我了解），到目前为止，这似乎是一个可靠的方法。

这很奇怪，这是一些普遍的想法/个人见解，我认为没有一件事情能适合所有情况。唯一的目标是获得信心。

对了，选择到组件多次重新解析的时候，不要忘了使用rerender功能，防止有趣的事情发生。

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

1 个答案: