问题标签 [react-testing]

我是使用 React 测试库编写测试用例的新手。

这是我的组件

所以我正在使用 React 测试库编写我的测试用例文件

我不确定出了什么问题，我的想法是检查组件是否加载而不会崩溃，如果汽车数组长度大于 0，请检查页面上呈现的内容。

但是我遇到了一些错误，任何有关示例或建议的帮助都会节省我的时间

我有一个 React 组件，它在内部创建一个scriptDOM 元素。onload这个脚本的处理和onerror事件有很多逻辑。onload和处理程序是组件内部的onerror，我不能通过道具传递它们。

我想为此代码编写一些 Jest 测试，但不确定如何模拟浏览器下载功能。我想模拟脚本下载错误、解析错误和下载/解析成功（没有任何网络调用）。有没有办法做到这一点 ？

我有以下使用自定义钩子的组件，但无法找到模拟自定义钩子的方法。有什么建议么 ？

这个自定义钩子在 React 函数组件中的用法如下；

我正在学习 React 测试库（其他语言的多年 TDD 经验）

React 测试库上的这个文档说，当getByText失败时，它“但是它会打印被测 DOM 的状态”：

https://testing-library.com/docs/dom-testing-library/api-debugging/

但是，在当前的 RTL 上，这不会发生在我身上。

相反，我得到了这个：

我的包依赖项是

我还有两个问题：

1. 我可以直接在我的测试代码中放入调试器吗？https://testing-library.com/docs/dom-testing-library/api-debugging/没有提及访问原生 JS 调试器

2. 我可以截取 DOM 的屏幕截图吗（我猜不是，因为这实际上不是无头的？）然后看一下？

我已经被这个问题困扰了将近 2 周。我正在尝试使用 react-query 创建一个 POC，以从外部源获取信息。此特定组件应调用 Service 方法并在结果表中列出结果。我在嘲笑这个方法来返回一些东西，但是测试失败了，因为它似乎是在调用端点来获取钱包之前执行的（此时，钱包是空的，所以什么都不会显示）。

这是我的测试：

这是我的组件：

在控制台输出中，钱包显示为空，然后再次显示预期的信息，但视图中没有呈现任何内容。

控制台输出：

allWallets 为空
allWallets 为空
[onSuccess]：响应为 [{"id":1,"name":"wallet 1"},{"id":2,"name":"wallet 2"}]
[onSuccess] : 响应是 [{"id":1,"name":"wallet 1"},{"id":2,"name":"wallet 2"}]

我在这里做错了吗？我找到了带有测试的引用，但他们似乎将 useQuery 提取到自定义的钩子中，然后他们对其进行了模拟，但我想按照显示的方式使用它。如果没有办法让它通过，我将使用自定义钩子方法（它就是这样）。

我正在设置 cypress 以在我的工作场所测试我的前端应用程序（使用公司网络），但意识到从前端代码发送到本地和外部 api 端点的 post 请求在 cypress 浏览器上被中止。发布请求在常规浏览器中工作。

猜测：我尝试在我的个人设备上设置测试，它工作正常，因此我们认为 webproxy 可能是原因。

重现步骤：

第 1 步：在 app.js 中插入虚拟发布请求，以模拟加载网站时的发布请求。

第 2 步：访问 cypress 测试中的 url

赛普拉斯截图：

中止的帖子请求

赛普拉斯开发工具