在使用Jest和react-testing-library进行测试时如何设置组件的本地状态？

Question

使用AirBnB的酶，我们可以设置组件的状态：

const loginComponent = shallow(<Login />);
loginComponent.setState({ error: true });

我想使用react-testing-library做同样的事情。

谢谢！

Answer 1

您不能使用react-testing-library做到这一点。这是因为RTL希望您像用户那样测试组件。

这是什么意思？在现实生活中，您的组件将在发生某些情况后更改状态。可能是用户输入了错误的数据，或者API返回了错误代码。

与其直接更改状态，不如尝试重现更改状态的操作集。

这种方法比Enzyme提供的方法难于实现，但是您的测试将更可靠。那是因为您将测试整个流程，而不是仅仅关注发生特定状态时呈现的内容。

最重要的是，您可以重构代码并更改状态的工作方式。只要用户与应用程序交互的方式相同，RTL测试就不会在意。酶测试会失败，因为它不再知道如何与组件内部进行交互。