React 测试库与 JsDom答案

【问题标题】：React Testing Library vs JsDomReact 测试库与 JsDom
【发布时间】：2021-10-04 22:01:03
【问题描述】：

我目前正在编写一个检查简单输入组件的测试：

it("Renders TextInput Component with correct display value", ()=>{
  const textInput = screen.getByRole("textbox");
})

如果我想检查文本输入的值，我应该检查属性还是使用 RTL 的屏幕方法（有没有首选的方法？）

  expect(screen.getByDisplayValue(defaultProps.value));
  expect(textInput).toHaveAttribute('name', defaultProps.name);

我想开始使用更多的 RTL，但我发现我传递的一些属性更难检查，如下所示。

expect(textInput).toHaveAttribute('placeholder', defaultProps.label);
expect(textInput).toHaveAttribute('type',  defaultProps.type);

【问题讨论】：

【解决方案1】：

是的，screen 肯定是首选方式。阅读this 文章了解更多信息和更多提示。

关于如何检查输入字段的值的问题，您可以这样做：

it("Renders TextInput Component with correct display value", ()=>{
  expect(screen.getByDisplayValue('my text')).toBeInTheDocument().
})

这将尝试查找值为“我的文本”的输入，就像真实用户一样。如果确实找到了，则视为通过。

【讨论】：