react-testing-library中的父节点

Question

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

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

事实证明，对于测试，我唯一可靠的文本是“span text”，但我想要获取<div>的“Text”部分。使用Jest和react-Jest library我可以

await screen.findByText(spanText)

这将返回一个HTMLElement，但它似乎是有限的，因为我没有任何关于该元素的上下文。例如，像parentNode和previousSibling这样的超文本标记语言方法返回null或未定义。理想情况下，我希望获得父<div>的文本内容。你知道我如何使用Jest或react-testing-library做到这一点吗？

Answer 1

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

解决方案将如下所示：

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