我在 React 测试库中使用 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。
现在，为什么不建议这样做。 react-testing-library 的一大卖点是您可以像用户一样测试您的组件。这意味着不依赖于实现细节。例如，您无法直接访问组件的状态。
以这种方式编写测试有点困难，但可以让您编写更健壮的测试。
在您的情况下，我认为底层 HTML 是一个实现细节。如果您更改 HTML 结构以使 h1 现在是 h2 或 div 会发生什么？测试将中断。相反，如果您通过文本查看这些元素，则标签变得无关紧要。
在某些情况下，普通的查询助手是不够的。对于这些事件，您可以使用data-testid 和getByTestId。
【讨论】：
h2，但这通常是例外而不是规则
getByDataAttribute("data-custom-value") 方法。这些不是实现细节，它们可以在任何元素上，可以在不破坏测试的情况下更改。为什么要限制测试特定的数据属性？
根据您要查询的元素类型，您可能还会发现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()
})
【讨论】：
*ByRole 查询（尽可能）是一种更惯用的解决方案。
getByRole('button') 将匹配 <button> 和 <a role="button">，并且上面的示例将匹配 <h6> 和 <a role="heading" aria-level="6"> - 这很好，因为关心这些角色的工具将（如果正确构建......）处理他们一样。