React Native 测试库中的 Enzyme element.props()

Posted 2023-02-19

【中文标题】React Native 测试库中的 Enzyme element.props()

【英文标题】：Enzyme element.props() in react native testing library

【发布时间】：2021-11-01 20:20:13

【问题描述】：

我需要重构所有酶单元测试以响应原生测试库。

在 Enzyme 中，要获得子元素的道具，我可以使用类似的东西：

((rootElement.props() as Props).prop).toBe(value).

prop() 函数返回包装器当前节点的 props 哈希。注意：只能在单个节点的包装器上调用。

如何在 react 原生测试库中做同样的事情？

我应该只传递道具的完整路径吗？像这样：

expect(nextUpNoThanksButton[0].props.children.props.isSelected).toEqual(true);

或者还有其他方法吗？

【参考方案1】：

React 测试库的基本原则是不测试组件是否接收到 props 或对 props、状态等进行任何类型的断言。

因此，在这种情况下，我认为不可能在 RTL 中做你需要的事情。

这种意识形态在编写更好的单元测试方面大有帮助。

虽然酶提供了这些选项，并且在某些情况下，它们很有帮助，但可以说它提供了一种做出不正确断言并最终超出单元测试目的的方法。

验证 什么 在你传递了一些 props 之后会发生什么。也就是说，DOM 上发生了什么。因为最终，这才是最重要的，你是在从最终用户的角度断言现实世界中发生的事情。这就是 RTL 提倡的点。

你总是可以做这样的事情，

断言是否调用了函数。将函数回调作为 prop 传递，然后您可以验证它是否被调用。 断言发生了一些其他动作，这是传递特定道具的效果。 将在 DOM 上显示或不显示的内容断言为道具的效果。

我们经历了同样的过程，整个单元测试套件都是使用 Enzyme 构建的。我们最终决定转向 RTL，大致就是我们遵循的方法，

任何正在编写的新单元测试都应该使用 RTL。没有例外。 可以保留任何使用 Enzyme 的现有单元测试。他们仍然会奔跑并完成他们的工作。 每隔一段时间，作为一般代码更改的一部分，我们会尝试选择基于酶的单元测试并对其进行转换。根据复杂性，此练习可能需要时间。但是您可以从容易实现的目标开始，逐步发展到更复杂的目标，并有条不紊地将它们转换为使用 RTL。

希望这会有所帮助。