如何使用reactjs项目初始化模拟服务工作者（msw）

Question

我尝试使用 msw 进行本地开发并使用官方指南进行测试

但面临以下问题：

[MSW] Failed to register a Service Worker for scope ('http://localhost:8080/') with script ('http://localhost:8080/mockServiceWorker.js'): Service Worker script does not exist at the given path.

Did you forget to run "npx msw init <PUBLIC_DIR>"?

Learn more about creating the Service Worker script: https://mswjs.io/docs/cli/init


  [1]: https://mswjs.io/docs/getting-started/integrate/browser

我的文件夹结构：

Answer 1

正如错误消息所示，您尚未将 Service Worker ( mockServiceWorker.js) 脚本放入公共目录中。根据您的屏幕截图，您的公共目录很可能是./build。

执行此命令将工作脚本放置在您的公共目录中：

$ npx msw init ./build

您应该能够通过以下 URL 访问正在运行的应用程序中的工作脚本：http://localhost:8080/mockServiceWorker.js。mockServiceWorker.js这应该返回要在您的应用程序中注册的文件的内容。

Answer 2

您需要使用您的文件夹运行命令public，而不是构建。您的公用文件夹是将内容复制到构建文件夹的文件夹。如果您将该文件放在构建文件夹中，它将不会进入您的源代码管理（如果您正确地没有提交构建文件）。

与 create-react-app 兼容的说明：

运行命令后

$ npx msw init ./public

你需要运行yarn build然后你可以使用故事书。另外，不要忘记运行具有公共文件夹访问权限的 Storybook：

"storybook": "start-storybook -s ./public"