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。