setstate - 如何在 react 测试库中设置状态

Question

概述:

我在使用 Enzyme 测试之前重构了脚本测试，但是现在，我想使用 @testing-library/react

问题:

我在@testing-library/react

中找不到 setState 的解决方案

Answer 1

使用 setState无论使用测试库，都是危险的方法。

这取决于实现细节(例如，状态内的属性名称)，因此维护测试变得更加困难 - 需要更改更多测试，当应用程序正常时很容易破坏测试等。

一旦将类组件转换为带有钩子(Hook)的功能组件，就不能调用它。所以你更多地依赖于实现细节。

最后，直接状态操作可能会以您在现实世界中永远无法获得的状态结束。这意味着您的组件将被破坏，因为它不可能达到某种状态，但您的直接初始化测试会很好。

那你最好怎么办？提供 Prop 、更改 Prop 、调用 Prop ( wrapper.find('button').filter(button => button.text() === 'Cancel').props().onClick() 用于 enzyme ， fireEvent.click(getByText(/Cancel/i)) 用于 RTL)并验证渲染的内容。

这样，您的测试将更短、更实际，并且在更新被测组件后需要更少的更改。