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

Question

我在这个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 请求。

有什么建议吗？

Answer 1

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

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

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

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

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

npm run test App.test.js

输出：