问题标签 [msw]

到目前为止，我得到的组件如下所示：

我对 TDD 的尝试看起来像这样

但它只是挂起......所以可以使用一些指导来了解我在这里做错了什么‍♂️</p>

是否可以将 MSW 与 Jest 一起使用来模拟离线网络条件？或者，非基于 MSW 的解决方案就足够了。我也不想模拟navigator.onLine，因为我想在网络请求因离线而失败时测试错误路径。

我目前有这个反应组件，它显示从 api 检索的服务列表（为简单起见删除了一些代码）：

我编写了以下测试代码，我想模拟 fetch 函数，以便我可以测试渲染的数量是否正确，这里我使用 Mock Service Worker：

当我运行测试它失败并显示长度为 0（如果我编辑const [services, setServices] = useState([]);为数组中已有项目，则长度不同于 0）。似乎 fetch 甚至没有被执行。现在我尝试了许多选项来模拟 fetch 函数，但它们似乎都不起作用。我在这里做错了什么以及测试使用 fetch 的反应钩子的方法应该是什么？

我使用 create-react-app 创建了一个简单的应用程序。我现在正在尝试使用 @testing-library 和 Mock Service Worker 编写一些自动化测试用例。由于我不知道的原因，当我使用 Window.fetch（或仅获取）发布请求时，不会返回响应的正文。

我正在使用以下依赖项：

我有以下测试：

的输出console.log(response)是

谁能解释为什么不归还尸体以及如何使该测试起作用？

在我的应用程序中，用户输入他们的出生日期，发送一个请求，如果它与数据库中的 DOB 匹配，他们将被发送到下一页。如果不匹配，则会向他们显示他们在链接不再有效之前剩余的尝试次数。他们有 3 次尝试。

我的问题是，我将如何使用模拟服务工作者来模拟这个功能？我需要记录这个请求被尝试和失败的次数。

这是处理程序的代码片段，您可以看到我现在已经在“验证尝试”之后硬编码了“1”。

我在其中确认错误日期 3 次的开玩笑测试：

我正在处理的 UI 根据收到的响应以不同的方式呈现。我想在收到 a4xx和5xx响应时测试 UI。

我的 api 处理程序看起来像：

这将始终返回一个2xx响应，使其无法在收到4xx或5xx响应时测试 UI，除非我手动更改处理程序，这很累人。

如何测试测试4xx和5xx响应？

当我使用带有 MSW 的 React 测试库运行测试代码时，出现错误

一个文件中有 6 个测试函数Component.test.tsx，所有函数都有类似的代码，例如

以上。

更大的问题是有时测试通过了，即使大多数时候它都失败了。

我尝试将每个测试功能划分为不同的测试文件，例如component1.test.tsx, component2.test.tsx, ... component6.test.tsx。

结果真的很奇怪，因为 Jest 传递了整个文件。

我真的很想知道为什么会发生错误。

我在我的项目中使用 msw 来模拟获取 API 请求，我检查了网络选项卡，并且 mockServiceWorker.js 资源保持在“待处理”状态，此外，响应检索 index.html 而不是我在处理程序中模拟的 JSON 响应文件。也许我遇到了一个愚蠢的错误，但我没有在网上找到可以帮助我的资源，在此先感谢！

环境

请求处理程序

我"dev": "webpack serve --mode development",在 CLI 中运行，这些是我的配置

实际要求

我测试了一个反应组件，它应该显示微调器、错误或获取的配方列表。我设法测试了这个组件的加载以及它成功获取数据的时间。我有测试错误的问题。我用 msw 创建了测试服务器，它具有返回错误的路由处理程序。我使用 axios 向服务器发出请求。我认为问题出在这里：axios 发出 3 个请求，直到最后一个响应 useQuery 返回 isLoading=true，isError=false。只有在那之后它才返回 isLoading=false, isError=true。因此，在我对错误 screen.debug() 的测试中显示微调器，并且 errorMessage 返回错误，因为它没有找到带有文本“错误”的渲染元素，该组件应该在发生错误时显示。我能做些什么呢？我没有主意了。

编辑：

• 我发现 useQuery 中有一个设置，“重试”默认为 3 个请求。我仍然不知道如何在我的测试中处理组件重试请求。

我是反应测试和打字稿的新手。

来自 RecipeList.test.tsx：

组件代码：

来自 RecipeList.tsx：

我在这个git repo中有一个从头开始创建的 react 项目，没有使用 create-react-app，所以我使用msw doc建议的 jest.config.js 和 jest.setup.js 文件来模拟网络请求进行测试。执行测试时出现以下错误。

（节点：12207） ExperimentalWarning：fs.promises API 是实验性的 console.error 错误：错误：连接 ECONNREFUSED 127.0.0.1:5000

当我使用包含 setupTests.js 的 create-react-app 创建新项目时，相同的测试代码可以正常工作，但我想在从头手动创建的 react 项目中模拟 api 请求。

有什么建议吗？