58

我正在使用getByTestIdReact 测试库中的函数:

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

是否可以/建议搜索 HTML 元素?所以是这样的:

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

2 回答 2

117

我不确定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现在是 anh2或 a会发生div什么?测试将中断。相反,如果您通过文本查看这些元素,则标签变得无关紧要。

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

于 2019-01-18T09:01:47.273 回答
8

根据您要查询的元素类型,您可能还会发现byRoleAPI 很有用:

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

例如,这level对我测试默认<h1>elem 是否被正确覆盖特别有用:

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

  expect(getByRole('heading', { level: 6 })).toBeInTheDocument()
})
于 2021-08-19T16:05:06.983 回答