正如标题所说,我使用RTL + Jest(带有创建-React-应用程序设置)。
我的问题是,我是否应该在每个测试中使用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();
});
});
我是否应该通过做一些其他的事情来以不同的方式处理我的测试套件?这只是个人喜好的问题吗?
我读过肯特C Dodds的博客this post,他主要说这会降低代码的可读性,但没有谈论性能或是否对测试有任何影响。
2条答案
按热度按时间9q78igpj1#
这主要是个人喜好的问题,但也与您的组件如何工作有关。您可能需要在不同的上下文中呈现您的组件(props,mocked redux store,mocked provider...)。在beforeEach中呈现组件可能更快,但会使更改测试条件更加困难。
根据我的经验,作为一个经验法则,表示性组件在测试本身中呈现,因为我想测试不同的 prop 集来覆盖所有情况。由于它们是哑组件(只涉及 prop ,很少的模拟,简单的组件逻辑),这些测试通常很快。这是“真实的的单元测试”:测试纯功能I/O(我只在当前位置写入功能组件)。
对于智能/较大的组件,我通常会一起测试一组组件(这更像是一个集成测试),我必须设置模拟(redux,http服务...),测试往往类似于你在Cypress中看到的场景,有用户交互。对于那些测试,我在beforeEach中渲染一次,并编写更少但更长的测试。我最终的测试执行时间要长得多,但具有高置信度(接近E2 E将给予的置信度)。
这或多或少是https://kentcdodds.com/blog/write-tests所说的(据我的理解),到目前为止,这似乎是一个坚实的方法。
显然这是一些一般的想法/个人见解,我认为在这件事上没有一刀切的做法。唯一的目标是获得信心。
顺便说一句,当选择多次重新呈现组件时,不要忘记使用rerender函数来防止有趣的事情发生。
0pizxfdo2#
虽然这在理论上(对我来说)是有意义的,至少在最近版本的Jest和RTL中是这样,但默认情况下,在
beforeAll
中渲染是不起作用的。您可以在afterEach
中绕过Jest自动清理,但性能优势可能不会太大。更好的方法可能是编写更长/更丰富的测试,而不是陷入将RTL视为纯单元测试工具的旧习惯。
https://github.com/testing-library/react-testing-library/issues/541