如何使用反应测试库获取 parent div 的 child div 和一些测试 ID？

Question

我想在 parent 元素中获取 div 元素和一些 test-id

我想做什么？

我有一个 parent div 和 test-id "parent-2" 并且其中有一个 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 代码中，我想点击 Remove div from div with parent test-id = "parent-2"

我试过像下面那样做

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

此抛出错误，发现多个 Remove 实例。

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

这行得通。但这会访问 parent 的第一个 child。但是想要更具体地查询。

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

谢谢。

Answer 1

react-testing-library 查询 return DOM 个节点，所以你可以在上面使用 DOM 个 API。你需要这样的东西：

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

querySelector 采用 CSS 选择器，因此您可以给内部 div 一个 class 并且更具体：

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

参见：

如何使用反应测试库获取 parent div 的 child div 和一些测试 ID？

How to get the child div of parent div with some test id using react testing library?

react-testing-library