模拟服务工作者无法拦截网络请求

Posted 2023-02-21

【中文标题】模拟服务工作者无法拦截网络请求

【英文标题】：Mock service worker is unable to intercept network request

【发布时间】：2021-08-18 08:20:12

【问题描述】：

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

(node:12207) ExperimentalWarning: fs.promises API 是实验性的 控制台错误 错误：错误：连接 ECONNREFUSED 127.0.0.1:5000

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

有什么建议吗？

【参考方案1】：

在msw 的教程中，模拟服务器是在setupTests.js 中配置的。 因为 CRA (create-react-app) 已经为您配置了 jest，当您使用 react-scripts test 运行测试时，CRA 将加载 setupTests.js。

如果你想从头开始创建一个新项目（假设你已经安装了 react、react-dom、...）。

你必须自己配置jest（参考这个docs），需要的步骤：

将package.json 中的test 脚本更改为jest 安装依赖项（babel、preset for jest 等） 用 jest.config.js 配置 jest（就像你做的那样，我也添加了 jsdom 作为测试环境） 设置 jest.setup.js 以加载模拟服务器

我创建了一个 PR 为您完成了上述步骤，以便测试运行

npm run test App.test.js

输出：

【讨论】：

谢谢，这在示例项目中帮助了我。让我在另一个实时项目中复制相同的更改。