问题标签 [msw]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
286 浏览

reactjs - 使用 Mock Service Worker 时如何对 graphql 查询变量进行断言?

当我们使用模拟服务工作者 (MSW) 模拟 graphql 查询时,我们想要断言传递给查询的变量具有特定值。这超出了打字稿类型的类型验证。我们正在用 MSW 开玩笑。您是否监视 MSW 以做出这些断言?还是有另一种方法可以期望req.variables具有一定的价值。

0 投票
1 回答
881 浏览

javascript - React Jest 测试因 MSW 失败

我已经创建了一个基本的 React 应用程序并按照设置单元测试(节点环境)和浏览器的说明配置了 MSW

App 组件使用自定义钩子useFormSubmission并呈现带有用户名文本字段和提交按钮的简单表单。表单的提交处理程序使用自定义挂钩返回的回调。

目前所有的单元测试都失败了。我可以看到 MSW 收到请求,但没有看到任何回复。控制台会记录减速器状态Status: pending,但不会超出此范围(似乎响应被吞没/丢失?)奇怪的是,应用程序在与开发服务器一起运行时工作npm start

我花了 3 天时间四处挖掘并试图找出配置中是否有问题或自定义钩子或组件的编写方式。

0 投票
0 回答
171 浏览

reactjs - 不支持 Jest jsdom 协议“http:”

我正在尝试运行一些集成测试以使用 jest 做出反应。运行测试时,我收到以下错误UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_PROTOCOL]: Protocol "http:" not supported. Expected "https:" 。最初我虽然与 msw 模拟我的 api 调用有关,但即使在禁用 msw 服务器后,我仍然会收到此错误。

我在我的应用程序中使用 axios 来发出 http 请求,并且所有 URL 都设置为使用 HTTPS。我还在设置文件中告诉 jest 并jest.config在模拟源时使用 https,但它仍然无法正常工作。有什么想法我还能尝试吗?

0 投票
1 回答
330 浏览

javascript - 如何将 Service Worker 库 (MSW) 与 Parcel 捆绑器一起使用

我有一个使用 Parcel 捆绑的小型 TypeScript React 项目。我想添加 MSW 来模拟服务器请求,但我无法让它工作。

我有一个非常简约的包裹设置:

至于MSW,一切都是根据他们的文档完成的。下面是 service-worker 的启动方式:

与 Webpack 捆绑时,完全相同的实现也能完美运行。但在 Parcel 中,它会导致控制台出现以下错误:

The script has an unsupported MIME type ('text/html').

[MSW] Failed to register a Service Worker: Failed to register a ServiceWorker for scope ('http://localhost:1234/') with script ('http://localhost:1234/mockServiceWorker.js'): The script has an unsupported MIME type ('text/html').

有没有办法让它工作?

0 投票
1 回答
248 浏览

reactjs - 测试 React 应用程序 - Firebase 模拟器 / 模拟服务工作者

我最近开始使用 Mock Service Worker 作为一种方法来拦截我的测试套件的 HTTP 请求。我想在使用 Firebase 的项目中做类似的事情,并且想知道是否可以使用模拟器而不是 Mock Service Worker?

截至目前,我认为使用 Firebase 编写集成测试的唯一方法是在 mocks 文件夹中模拟库并返回您期望的值。有没有人以与模拟服务工作者相同的方式使用模拟器的经验?

0 投票
1 回答
493 浏览

mocking - 启用缓存时模拟服务人员和 Apollo 客户端的最佳实践

我有一个使用 Apollo 客户端的应用程序,当我添加 MSW 时,我发现缓存正在返回带有空响应的陈旧请求。MSW 团队表示,最佳实践是在运行测试以清除每个请求的缓存时,但我也想在模拟模式下运行我的应用程序以进行手动测试。

在启用模拟的情况下运行应用程序时执行以下操作似乎可行,但必须将这样的模拟逻辑放入应用程序似乎违反直觉。还有人遇到这种情况吗?

0 投票
0 回答
427 浏览

reactjs - 使用 react-testing-library 时 setupServer 不工作

我想在第一次渲染组件时使用 react-testing-library 进行单元测试,从 API 获取一些信息。

所以我正在使用 setupServer 来模拟 API 并使用 REST 发送虚拟数据,但是组件中只有加载程序,并且 setupServer 无法正常工作

我该如何解决这个问题?

detail.tsx

detail.test.js

fetcher

0 投票
0 回答
112 浏览

typescript - 如何将缓冲区请求正文与 Mock Service Worker 匹配

我目前正在使用Nock并想用Mock Service Worker替换它。
使用 Nock,我可以将字符串化的请求正文与提供的缓冲区匹配:

我还没有弄清楚如何使用 mws 获得相同的结果,因为请求正文和缓冲区不相等。有人能帮我吗?
谢谢。

0 投票
1 回答
1734 浏览

reactjs - 如何使用带有 msw 和 react-testing-library 的 react-query 测试组件?

我有一个页面,其中加载了一个下拉组件。这个组件调用一个自定义钩子,它使用反应查询来获取数据以显示在下拉列表中。在初始加载时,此组件处于加载状态并呈现加载图标。当 react-query 成功完成调用时,组件将数据列表呈现到下拉列表中。

如何正确测试?即使在实现 msw 来模拟响应数据之后,我的测试也只会呈现 Skeleton 组件。所以我认为它基本上只等待“isLoading”状态。

请注意,我还实现了 msw 模拟服务器和处理程序来模拟它应该返回的数据。顺便说一句,在使用反应查询之前它就像一个魅力,所以我想我正在监督一些事情。

谢谢!

0 投票
1 回答
848 浏览

jestjs - 使用 react-testing-library 测试错误状态时,如何抑制预期的 Axios 错误消息?

我正在调整我的一些 React 代码以使用@testing-library/react,react-querymsw模拟我使用的网络调用axios

到目前为止(经过一些脑筋急转弯)我已经使用这段代码了!(耶!)

有问题的测试(简化):

同样,这个测试有效!万岁!但问题是我正在axios考虑(通过msw)它正在接收此查询的 400 响应,并且当我使用 Jest 运行此测试时,我在控制台中收到了一大块错误消息:

我认为,在某种程度上,这是意料之中的,但在我的测试中这真的是不必要的垃圾邮件,因为我期待并且实际上希望该请求失败。有没有一种最佳实践方法可以通过 Jest、RTL、msw 或 Axios 的配置来删除这个不必要的日志?