如何在每个笑话测试之前/之后重置状态？

Question

我的组件都需要由状态提供程序包装才能正常工作，因此当我渲染每个组件以进行测试时，我将它们包装在状态提供程序中。像这样：

<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 并且只能在函数组件内调用。

我还能如何在每次测试之前/之后重置状态？

Answer 1

如果您要使用 React 测试库，您可以使用

afterEach(cleanup)

。

除此之外，我会改变你的组件架构。将其拆分为显示组件和容器组件。这样您就可以通过控制测试中的状态来显式测试显示（演示）组件。您可以使用功能和/或 E2E 测试来测试容器组件。这是一个很棒的 React 测试指南。