如何使用react测试库获得具有某些测试id的父div的子div？

Question

我希望在父元素中获得带有一些test-id的div元素。

我想做什么？

我有一个带有test-id“父-2”的父div，其中有一个div元素，其中包含文本删除。

我想撤回这个删除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代码中，我希望单击从div删除div和父test-id = " parent -2“。

我试过像下面这样做

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

这会抛出错误，找到多个删除实例。

我也试过这个utils.fireEvent.click(getByTestId('parent-2').children；

这个很管用。但这将访问父级的第一个子级。但是，希望对查询更加具体。

因此，如何解决这个问题，使我可以单击“删除div属于test-id”父-2的div。

谢谢。

Answer 1

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

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

Answer 2

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

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

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

这是within的文档描述，

(getQueriesForElement的别名)接受DOM元素并将其绑定到原始查询函数，允许在不指定容器的情况下使用它们。它是构建在此API之上的库的推荐方法，并在React测试库和Vue测试库中使用。

参考资料：

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