问题标签 [react-testing-library]

我正在使用 TypeScript 构建一个 React 应用程序。我使用 React 测试库进行组件测试。

假设您有这样的简单形式：

在此视频中，Kent（库的创建者）展示了如何测试表单输入输入。测试看起来像这样：

问题是他用纯 JavaScript 做到了。使用 TypeScript 执行此操作时，他设置的行.value会引发以下错误

如何使用 React 测试库使用 TypeScript 测试此功能？您将如何设置输入的值？

我是 react-testing-library / jest 的新手，并尝试编写测试以查看路由导航（使用 react-router-dom）是否正确执行。到目前为止，我一直在关注README和本教程，了解如何使用。

我的一个组件在本地函数中使用了 scrollIntoView，这会导致测试失败。

这是我的聊天机器人组件中的功能：

这是失败的测试示例：

我尝试使用模拟函数，但错误仍然存​​在。

这是分配 this.messageEnd 的位置：

我从这个堆栈溢出问题中引用了代码：如何在反应中滚动到底部？

解决方案

似乎 Material UI 的工作方式是在单击复选框时呈现不同的 SVG，并且不会更改实际输入元素上的属性或任何内容。那么我如何实际测试该元素是否符合react-testing-library哲学？

这是一个粗略的例子

复选框组件使用

测试

由 Material UI 生成的 HTML

我目前正在使用 react-testing-library 并且似乎无法弄清楚如何测试组件的 setState 。

在以下示例中，我尝试根据 API 中的数据测试加载的项目数是否正确。稍后将扩展它以测试诸如项目之间的交互之类的事情。

零件：

测试：

我知道这与开玩笑的模拟函数有关，但不明白如何使它们与设置状态或模拟 API 一起工作。

示例实现（工作！）

通过更多的实践和学习使组件可测试，我能够做到这一点。这是一个完整的示例供参考：https ://gist.github.com/alfonsomunozpomer/de992a9710724eb248be3842029801c8

添加这个问题是因为我在网上不容易找到答案。

我正在尝试使用react-testing-library来测试组件是否正确呈现。但是，我遇到了许多似乎没有多大帮助的错误。

这是我的测试文件（report.test.ts在代码中的组件旁边）：

当我尝试运行测试时，出现错误SyntaxError: Unexpected token, expected "</>"。VS Code 中有一条红色波浪线，悬停时显示Argument of type 'Report' is not assignable to parameter of type 'ReactElement<any>'。

即使我将 Report 标签更改为 simple <div />，我也会得到Cannot find name 'div'.

我的测试有什么问题？

我目前正在为我正在处理的项目运行一些测试，并且无法将fireEvent.select()其用作专注于输入字段的方式。

到目前为止我的测试：

我正在测试的组件有一个下拉菜单，仅在输入关注时才会显示，但似乎既不关注fireEvent.change()也不fireEvent.select()关注该字段。我知道这fireEvent.change()会改变输入值。

到目前为止，我已经尝试过：

• fireEvent.click()
• fireEvent.focus()
• fireEvent.select()
• input.focus()

但这些选项都没有奏效。

我需要能够在此下拉菜单中选择一个选项才能正确测试组件。

TL;博士

有没有办法专注于 RTL 的输入字段？

我对 JavaScript 测试完全陌生，并且正在使用新的代码库。我想编写一个测试来检查元素上的 className。我正在使用 Jest 和React 测试库。下面我有一个测试，它将根据variant道具呈现一个按钮。它还包含一个类名，我想对其进行测试。

我试图用谷歌搜索像 Enzyme 一样的属性hasClass，但我找不到任何东西。如何使用当前的库（React 测试库和 Jest）解决这个问题？

我正在尝试使用react-testing-library来测试react-final-form。它适用于click-events，例如更改复选框，但我无法使用change-events。

下面是一个使用 jest 作为测试运行器的示例：

TestForm.js：

测试.js：

我运行这个使用npx jest test.js并且第一个测试通过但不是第二个。

似乎不起作用的关键部分是

有什么建议么？

我正在尝试测试组件是否由于输入元素的更改而更新。我使用fireEvent.change()-function，然后检查我发现使用getByPlaceholderText它的节点的值是否已按应有的方式更新。但是我看不到反应组件本身的变化。

这可能是因为在重新渲染之前不会发生更改；我将如何测试这个？react-testing-libraryrerender似乎“从头开始”启动组件（即没有新的输入值），并且waitForElement永远找不到它正在等待的内容。

这是组件 TestForm.js：

这是测试，运行使用npx jest test.js：

我正在使用 react-testing-library 并且我有一个自定义渲染：

我可以render在我的测试中成功地将它用于 a ，但不能用于 a rerender：

我收到一个错误TypeError: Cannot read property 'black' of undefined。rerender有没有办法让重新渲染使用自定义渲染，所以我不必将每个重新渲染都包装在ThemeProvider?