如何重置状态 beforeEach/afterEach 笑话测试？

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 Testing Library，你可以使用afterEach(cleanup)。

除此之外，我会更改您的组件架构。将其拆分为display and container components。这样，您可以通过控制其在测试中的状态来显式地测试显示（展示）组件。您可以使用功能和/或 E2E 测试来测试容器组件。这是一个很棒的guide for testing React。