React 测试库与 JsDom

Question

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

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);

Answer 1

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

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

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

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

React Testing Library vs JsDom