反应测试库中的父节点

Question

我测试的组件呈现如下内容：

 <div>Text<span>span text</span></div>

事实证明，测试我拥有的唯一可靠文本是“跨度文本”，但我想获取 <div> 的“文本”部分。使用 Jest 和 react-testing-library 我可以

await screen.findByText(spanText)

这将返回一个 HTMLElement 但它似乎受到限制，因为我没有元素周围的任何上下文。例如 parentNode 和 previousSibling 等 HTML 方法返回 null 或 undefined。理想情况下，我想获取父级的文本内容 <div> 。知道如何使用 Jest 或 react-testing-library 做到这一点吗？

原文由 Kevin Burton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个很好的解决方案是 closest 功能。在 closest 函数的描述中写道： Returns the first (starting at element) including ancestor that matches selectors, and null otherwise.

解决方案如下所示：

 screen.getByText("span text").closest("div")

原文由 Vitor Vicente 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不可否认，测试库并没有清楚地传达如何做到这一点。它包括一个 eslint 规则 no-direct-node-access，上面写着“避免直接访问节点。更喜欢使用测试库中的方法”。这给人的印象是 TL 为这种情况公开了一种方法，但目前并没有。

可能是您不想使用 .closest() ，因为您的项目强制执行该 eslint 规则，或者因为它并不总是可靠的选择器。我找到了两种替代方法来解决您描述的情况。

1. within() ：如果您的元素位于测试库 方法 可选择的另一个元素内（如 footer 或具有唯一文本的元素），您可以像这样使用 within() ：

 within(screen.getByRole('footer')).getByText('Text');

1. find() 在具有自定义功能的元素内：

 screen.getAllByText('Text').find(div => div.innerHTML.includes('span text'));

看起来不是最漂亮的，但是你可以传递任何你想要的JS函数所以它非常灵活和可控。

附言。如果您根据您的 TypeScript 配置使用我的第二个选项，您可能需要在使用测试库的 expect(...).toBeDefined() 对元素断言之前进行未定义的检查。

原文由 Jakob Jan Kamminga 发布，翻译遵循 CC BY-SA 4.0 许可协议