如何使用反应测试库获取带有一些测试 ID 的父 div 的子 div？

Question

我想用一些 test-id 获取父元素中的 div 元素

我想做什么？

我有一个 test-id 为“parent-2”的父 div，其中有一个 div 元素，其中包含文本 Remove。

我想检索这个 Remove div 元素。还有多个 Remove div 元素。像下面这样的东西

<div data-test-id="parent-1">
    <div>Remove</div>
</div>
<div data-test-id="parent-2">
    <div>Remove</div>
</div>
<div data-test-id="parent-3">
    <div>Remove</div>
</div>

所以在上面的 html 代码中，我想点击 Remove div from div with parent test-id = "parent-2"

我试过像下面这样

utils.fireEvent.click(getByText('Remove'));

这会引发错误，发现多个 Remove 实例。

我也试过这个 utils.fireEvent.click(getByTestId('parent-2').children[0];

这有效。但这会访问父级的第一个子级。但是想要更具体的查询。

那么我该如何解决这个问题，以便我可以点击删除 div 属于 test-id "parent-2" 的 div

谢谢。

Answer 1

我认为这里更有机的方法是使用within，

import {within} from '@testing-library/dom';

const secondParent = getByTestId('parent-2');
utils.fireEvent.click(within(secondParent).getByText('Remove'));

这是 的文档描述within，

inside（getQueriesForElement 的别名）采用 DOM 元素并将其绑定到原始查询函数，允许在不指定容器的情况下使用它们。这是基于此 API 构建的库的推荐方法，并在 React 测试库和 Vue 测试库的底层使用。

参考：

https://testing-library.com/docs/dom-testing-library/api-within/

Answer 2

react-testing-library 查询返回 DOM 节点，因此您可以在顶部使用 DOM API。你需要这样的东西：

utils.fireEvent.click(getByTestId('parent-1').querySelector('div'));

querySelector 采用 CSS 选择器，因此您可以为您的内部 div 提供一个类并更具体：

utils.fireEvent.click(getByTestId('parent-1').querySelector('.myClass'));

看：

• https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector，
• https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorall