我正在尝试测试一个调用 API 的组件，我遇到了 MSW，并认为这会很棒。

这是我设置来处理捕获的服务器。在后台我使用 fetch 在我的组件中进行 API 调用，它看起来像这样

我的组件具有这样的 onload 使用效果：

当我运行测试时

我从我的 apiFetchData 收到以下错误

（我正在使用 jest-mock-fetch），我得到的结果是这样的

我被卡住了，似乎 MSW 正在捕获来自组件的请求，但我得到的响应似乎 100% 无效，我不知道出了什么问题。任何帮助/提示将不胜感激。

编辑：我的 setupServer 代码中的错字

我想使用 mswjs 来模拟一些外部 API（不在 localhost 上），我在网上找不到任何关于这是否可能的信息。

我需要同时模拟本地主机资源和外部资源。

有人可以提供如何执行此操作的示例配置吗？

如果重要的话，我正在使用 Storybook 插件。

我尝试为我的 React 项目设置Mock Service Worker。我的项目不使用CRA。

我想拦截 GraphQL 请求并模拟它的响应，以使用赛普拉斯创建 end 2 end 测试。

如何将mockServiceWorker.js文件复制到我的构建文件夹（使用 Webpack），如其他资产图像和字体等？

我使用了命令npx msw init build --save。然后mockServiceWorker.js就创建好了。

但是一旦我运行npm start并且我的客户端和服务器被编译，文件就会mockServiceWorker.js消失？

我还需要msw在我们的验收环境中运行 Cypress end 2 end 测试也在管道中。

所以我正在为我的一个反应项目编写测试，我只是决定使用模拟服务工作者来模拟我的 api 调用，我试图模拟一个登录端点。所以我试图模拟一个登录错误，我返回一条错误消息当输入与特定电子邮件不匹配时。给定下面的代码；

我怎样才能做到这一点？有没有更好的方法来做到这一点？

我在 react 中编写了一个注册组件，它是一个简单的表单，提交时将发布到 API。对 API 的调用将返回一个带有特定数据的对象，然后将这些数据添加到 redux 存储中。

我为此写了一些测试。我正在使用 Mock Service Worker (MSW) 来模拟 API 调用。这是我第一次编写此类测试，所以我不确定我是否做错了什么，但我的理解是 MSW 会拦截对 API 的调用并返回我在 MSW 配置中指定的任何内容，之后它应该遵循常规流程。

这是我的减速器：

这是执行实际调用的我的用户类：

这是我的动作创建者：

这是onSubmit我的注册组件中的方法：

这是我的实际测试：

因此，我希望每当检测到 REGISTER_API_ENDPOINT url 时都会拦截我的调用，并将模拟调用的值添加到我的 redux 状态而不是register方法中实际 API 调用的值，但这似乎没有发生. 如果这不是在商店中测试价值的方法，我还能如何实现呢？

所以在我的测试结束时，在打印我期望看到的商店时：

但相反，我看到：

这是该测试的正确方法吗？

谢谢

编辑

根据评论进行一些重构。现在我的onSubmit方法看起来像：

请注意，现在我从User.register这里发送响应，而不是在User.register. 另请注意，此函数现在已完成，async并且await要register完成函数调用，此时它将填充存储。

该register方法现在如下所示：

现在它只负责执行 API 调用并返回响应。

减速器也被简化为没有任何副作用变化，所以它看起来像：

我的测试基本相同，唯一的区别是我正在检查store值的部分：

现在，这有时有效，有时无效。意思是，有时我得到正确的商店打印如下：

但有时我会得到null：

我想我在某处遗漏了一些异步代码，但我无法确定它在哪里。

解决了

啊啊啊啊

原来graphql片段不能很好地与msw一起使用。亲爱的上帝开枪打死我，那是 5 小时我不会回来的。

我有一个带有 msw 的模拟 graphql 服务器设置，下面的基本设置是我导入到我的测试文件中的：

我可以确认我的查询确实被拦截了，而且确实返回了

当我得到这个输出

未定义的输出是我试图 console.debug(data) 的地方，当在调试器中时，我还可以看到数据永远不会被解析！

这是测试

我确实使用await screen...而且我已经确认它与路由器无关，因为处理程序已为路由正确触发，并且 console.debug 是从我尝试安装的组件中触发的。

我该如何开始调试呢？！为什么数据不解析？

我有一个 RTK 查询突变端点拒绝应用程序，它使 getApplication 查询无效。这些都在同一个 API 中。

问题是我有两个使用 useRejectApplicationMutation 钩子的组件，但由于某种原因，它们中只有一个似乎在查询结果失效后正确地从缓存中删除了查询结果。我可以通过 Redux devtools 观察到这一点，在其中我可以看到在一个组件中完成拒绝突变后调度 removeQueryResult 操作，但在另一个组件中没有触发。这导致组件中的 getApplication 数据没有变化，从而中断了应用程序的流程。

因此在这种情况下，不会调用带有 data 的 useEffect ，因为似乎没有重新获取数据，尽管它应该在满足拒绝突变后失效。奇怪的是，在控制台中，它看起来确实应该正确地重新获取无效的应用程序和状态，因为 MSW 端点在删除请求之后被命中。

对我来说，问题似乎是由于某种原因没有正确清除缓存，所以尽管标签无效并且重新获取数据导致数据没有正确重置。关于可能导致这种不一致的任何想法？

这是一个关于 @mswjs/data.toHandlers 函数的默认行为的问题，该函数使用此示例与 @mswjs/data 为 RTK-Query 调用创建模拟。

https://codesandbox.io/s/github/reduxjs/redux-toolkit/tree/master/examples/query/react/mutations?from-embed

文件 src/mocks/db.ts 使用 @mswjs/data 创建一个模拟数据库，并使用定义默认的 http 模拟响应，...db.post.toHandlers('rest')但如果我删除额外的 PUT 和 POST 模拟，则无法工作。

我的理解是，@mswjs/data toHandlers() 函数根据 github 文档默认为定义的数据库（在本例中为 Posts）提供 PUT 和 POST 模拟 API 调用，所以我正在寻求建议以更好地理解为什么 toHandlers 不起作用本例中的 PUT 和 POST。即，如果我删除 PUT 和 POST 模拟 API 调用，它们会失败。

手动 PUT 和 POST API 模拟做了哪些默认 toHandlers 不做的事情？

我已经创建了一个内置 typescript 模板的 Create React App 应用程序，然后我使用 npm 安装了 MSW，并根据 MSW 安装指南创建了文件。它非常适合开玩笑，但是对于浏览器，当我使用启动脚本时，我收到了一堆警告：

和类似...

我找不到任何答案，所以我向您寻求帮助。

我正在尝试在 Jest 中测试一些 api 调用，但是测试失败，因为 api 调用依赖于首先完成的另一个调用，因此返回的值是空的，而不是应该在那里的值。我正在使用 react-query 进行 api 调用。还是有更好的或其他方法来测试异步调用？我也在使用 MSW 来拦截 api 调用。

异步调用

测试

我得到：

无法通过以下方式找到元素：[data-testid="main-header"]