使用 React 测试库获取 HTML 元素？

Question

我正在使用 React 测试库中的 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.

Answer 2

根据您查询的元素类型，您可能还会发现 byRole API 有用：

https://testing-library.com/docs/queries/byrole/

例如，level 对我测试默认 <h1> 元素是否被正确覆盖特别有用：

it('correctly renders override header level', () => {
  const { getByRole } = render(<Heading overrideHeadingLevel="h6" />)

  expect(getByRole('heading', { level: 6 })).toBeInTheDocument()
})

使用 React 测试库获取 HTML 元素？

Get by HTML element with React Testing Library?

react-testing-library