react-testing-library 中的父节点

Question

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

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

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

await screen.findByText(spanText)

这将返回一个 HTMLElement，但它似乎受到限制，因为我没有任何围绕该元素的上下文。例如，像 parentNode 和 previousSibling 这样的 HTML 方法返回 null 或 undefined。理想情况下，我想获取 parent 的文本内容<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 规则，或者因为它并不总是可靠的选择器。我找到了两种替代方法来解决您所描述的情况。

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

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

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

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

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

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

Answer 3

但我用了很多HTML方法，还没有出现问题。HTML 方法有什么问题？

你可以试试这个代码。

const spanElement = screen.getElementByText('span text');
const parentDiv = spanElement.parentElement as HTMLElement;
within(parentDiv).getElementByText('...');