我的组件都需要用状态提供器 Package 才能正常工作,所以当我呈现每个组件进行测试时,我会将它们 Package 在状态提供器中。
<StateProvider>
<ThemeProvider theme={theme}>
<Component_Being_Tested />
</ThemeProvider>
</StateProvider>
我遇到的问题是,当一个组件在测试过程中改变状态时,它不会在下一次测试运行之前将状态重置回初始状态,这会导致许多测试失败。
例如,我有一个密码输入组件,它包含一个“显示/隐藏密码”按钮。当点击它时,它切换一个布尔状态值showPassword
。初始状态设置为false
,这导致输入类型为“密码”。在第一次点击时,它将状态更改为true
,该组件将输入类型更改为“文本”。
当我在这个组件上运行一个涉及到单击按钮的测试时,第一个测试运行得很好,但是在第一个测试运行之后,showPassword
的状态仍然是true
,而不是重置回其初始值false
。
因此,如果我运行另一个涉及单击按钮的测试,测试将失败,因为单击按钮将把showPassword
状态切换回其初始false
,而测试预期它将更改为true
。
我试过创建一个重置状态的函数,并在beforeEach()中运行它,如下所示:
beforeEach(() => useContext(Store).dispatch(resetState()));
但是,由于useContext是一个React Hook并且只能在函数组件内调用,因此它失败。
我还可以如何在每次测试之前/之后重置状态?
1条答案
按热度按时间luaexgnf1#
如果您要使用React Testing Library,则可以使用
afterEach(cleanup)
。除此之外,我会改变你的组件架构。把它分成显示和容器组件。这样你就可以通过在测试中控制它的状态来显式地测试显示组件。你也可以使用功能和/或E2 E测试来测试容器组件。这里有一个很棒的guide for testing React。