Question

我正在使用React Testing库中的getByTestId函数：

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

是否可以/建议搜索HTML元素？像这样：

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

Answer 1

在这种情况下，我不确定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。

现在，为什么不建议这样做。 react-testing-library的一大卖点是您可以像用户一样测试组件。这意味着不依赖实施细节。例如，您无权直接访问组件的状态。

以这种方式编写测试会比较困难，但是可以让您编写更可靠的测试。

就您而言，我认为底层HTML是实现细节。如果更改HTML结构以使h1现在是h2或div，会发生什么？测试将失败。相反，如果您通过文本查看这些元素，则标记将变得无关紧要。

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

通过React Testing Library获得HTML元素？

1 个答案: