Mock service worker 无法拦截网络请求

问题描述

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

（节点：12207）实验警告：fs.promises API 是实验性的 控制台错误 错误：错误：连接 ECONNREFUSED 127.0.0.1:5000

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

有什么建议吗？

解决方法

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

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

您必须自行配置 jest（请参阅此 docs），所需步骤：

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

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

npm run test App.test.js

输出：