反应测试库中的父节点

Question

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

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

事实证明，为了测试我唯一可靠的文本是 'span text'，但我想获得 <div> 的 'Text' 部分。使用 Jest 和 react-testing-library 我可以

await screen.findByText(spanText)

这个 return 是一个 HTML 元素，但它似乎有局限性，因为我没有元素周围的任何上下文。例如 HTML 方法，如 parentNode 和 previousSibling return null 或 undefined。理想情况下，我想获取父 <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")

Answer 2

诚然，测试库没有明确说明如何执行此操作。它包括一个 eslint 规则 no-direct-node-access，上面写着“避免直接访问节点。更喜欢使用测试库中的方法”。这给人的印象是 TL 为这种情况公开了一种方法，但目前并没有。

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

within(): 如果您的元素位于是可通过测试库方法选择的另一个元素内（如 footer 或具有唯一文本的元素），您可以使用 within() 之类的:

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

find() 在具有自定义函数的元素内：

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

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

Ps。如果您根据您的 TypeScript 配置使用我的第二个选项，您可能需要在使用测试库的 expect(...).toBeDefined().

对元素断言之前进行未定义的检查

反应测试库中的父节点

Parent node in react-testing-library

html

jestjs

react-testing-library