问题标签 [msw]

我想测试 React App 功能

与喷气机测试

调用的 fetch 使用 Mock Service Worker Handler 进行模拟

使用服务器

服务器在文件 setUpTestJs 中设置

index.js 看起来像这样

package.json 看起来像这样

当我运行测试时，我得到以下结果

我必须做什么才能成功运行测试

我正在做集成测试，我发现了MSWjs，所以我想将它用于我的 react native 应用程序。但是我找不到如何在不模拟的情况下在开玩笑测试中使用 RNFetchBlob（因为我想提出我的请求并用 MSW 模拟答案）。

所以目前我得到了关于 RNFetchBlob 导入的“SyntaxError：无法在模块外使用导入语句”。

MSW 文档说我们可以将他们的解决方案与 ReactNative 一起使用，所以我想可以在开玩笑的测试中进行 fetch，但我在网上找到的所有信息都说我们必须模拟它。

感谢您的时间 ！

我使用next-redux-wrapper、MSW和将我的数据存储在存储中，以及模拟 API 调用和从模拟数据库中获取数据@mswjs/data。redux-toolkit

我有以下情况发生在我身上。

1. 我在页面上，在控制台和终端中，我可以看到数据是从模拟数据库中/content/editor获取并从getStaticProps. Editor.js因此，现在 ID 1 到 6 在商店内可访问。
2. 现在我点击加号图标来创建一个新项目。我填写对话框并按“保存”。一个 POST 请求开始，它处于挂起状态，然后它得到满足。新项目现在在模拟数据库和商店中，我现在可以看到 ID 1 到 7。
3. 由于我点击了“保存”并且 POST 请求成功，我被路由/content/editor/7到查看新创建的项目。
4. 现在我在 Page [id].js，它还从模拟数据库中获取数据，然后将其存储并水合到 redux 存储中。这个想法是，它获取先前存储的状态并将其与新数据（如果有的话）一起传播到存储中。
5. 现在 ID 7 不再存在。ID 1 到 6 也不再存在，相反，我可以在控制台和终端中看到 ID 8 到 13 已创建，而之前的 ID 已不存在。

显然，这不是很好。当我创建一个新项目然后切换路由时，我应该能够访问新创建的项目以及之前创建的项目。但相反，它们都被覆盖。

它要么与next-redux-wrapperor有关系MSW，但我不知道如何使它工作。我需要帮助。我现在将发布一些代码：

代码

获取静态道具

模拟数据库

工厂

我将把代码缩短为相关位。我将删除项目的属性，以及用于生成数据的辅助函数。

API 处理程序

我将把它缩短为仅 GET 和 POST 请求。

项目切片

我也将把它缩短为相关的片段。

这应该是所有相关代码。如果您有任何问题，请提出问题，我会尽力回答。

我试图弄清楚在使用 React 测试库测试下一个 js 应用程序时如何模拟对 auth0 身份验证后端的调用。我正在使用auth0/nextjs-auth0来处理身份验证。我的意图是使用MSW为所有 API 调用提供模拟。

我在 nextjs 文档next.js/examples/with-msw中按照这个示例为客户端和服务器 API 调用设置了模拟。auth0/nextjs-auth0包（/api/auth/login、/api/auth/callback和）生成/api/auth/logout的所有 API 调用/api/auth/me都会收到模拟响应。

/api/auth/me下面显示了一个模拟响应

当我在浏览器中运行应用程序时，示例设置工作正常。但是当我运行我的测试时，模拟并没有被拾起。

示例测试块如下所示

App我像这样在组件内渲染页面，<App Component={Home} />以便我可以访问包装页面的各种上下文。

我花了大约 2 天的时间尝试各种配置，但我仍然不知道我可能做错了什么。任何和每一个帮助表示赞赏。

我是redux-toolkit及其测试的新手。我正在尝试为createAsyncThunk调用 API 并通过 API 中的数据更新状态的 a 编写测试。我的异步 thunk 被我的组件中的一个按钮调用，而不是测试 thunk 本身，我正在我的组件中测试它的实现。我正在使用Mock Service Worker库来模拟我的 API 调用。以下是我测试失败的截图

这是我正在运行的测试

我createAsyncThunk的也很简单

我正在使用 MSW（模拟服务工作者）在我的反应测试中使用反应测试库模拟 HTTP 响应。但是，在某些反应组件中，我有一些加载状态，直到响应完成。

为了测试中间加载状态，有没有办法暂停正在进行的服务工作者 API 并进行一些测试（这样做我们可以确保测试的一致性），然后继续进行进一步的测试？

我有一个想要测试的反应组件，它发出 API 请求。MSW 可以很好地模拟 API 请求。

但是，我的组件也会进行一些没有副作用的调用，例如在提交表单之后。

如何断言 API 是否被触发以正确的 URL 和正确的数据。例如expect(apiRequest).iscalledwithpayload(date)

在编写反应测试时，我已经阅读了一些资源，并且Warning: You called act(async () => ...) without await.警告对我来说仍然是永无止境的故事。这次我在提交Formik表单后有条件地渲染了一些东西。

我确定了await，findByTestId所以应该有变化，对吧？测试通过了，那有什么问题呢？：/欢迎任何提示！

我的测试：

登录屏幕：

有人可以将 SinonJS 与 Mock Service Worker MSW 进行比较和对比吗？类似于https://mswjs.io/docs/comparison

我正在尝试为我的 React 组件运行单元测试，并且在 API 调用后运行覆盖率特别有问题。

所以下面是API调用的相关组件代码；

我的测试代码如下所示；

另外，我正在使用 msw 并定义如下处理程序；

是否有任何原因导致测试可能不会超出 API 调用范围？不确定它是否与 await 关键字有关，但我确实为测试标记了异步。