使用Reaction测试库获取HTML元素？ [英] Get by HTML element with React Testing Library?

问题描述

我在Reaction测试库中使用getByTestId函数：

const button = wrapper.getByTestId("button");
expect(heading.textContent).toBe("something");

是否可以/建议改为搜索HTML元素？所以大概是这样的：

const button = wrapper.getByHTML("button");
const heading = wrapper.getByHTML("h1");

推荐答案

我不确定wrapper在这种情况下是什么。但回答你的两个问题：是的，可以通过HTML元素获取，而不是，这是不可取的。

您可以这样做：

// Possible but not advisable
const { container } = render(<MyComponent />)
// `container` is just a DOM node
const button = container.querySelector('button')

因为您得到了一个DOM节点，所以您可以使用所有普通的DOM API，如querySelector。

现在，为什么这不可取。反应测试库的一大卖点是，您可以像用户一样测试组件。这意味着不依赖于实现细节。例如，您无法直接访问组件的状态。

以这种方式编写测试有点困难，但允许您编写更健壮的测试。

在您的例子中，我认为底层的HTML是一个实现细节。如果您更改了您的HTML结构，使h1现在是h2或div，会发生什么？测试将会失败。如果改为按文本查看这些元素，则标记将变得无关紧要。

在某些情况下，普通的查询帮助器是不够的。对于这些事件，您可以使用data-testid和getByTestId。

这篇关于使用Reaction测试库获取HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！