我正在使用 getByTestId React 测试库中的函数:
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 .
关于react-testing-library - 通过 React 测试库获取 HTML 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54234515/