如何使用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 (mockServiceWorker.js)脚本放在您的公共目录中。根据屏幕截图，您的公共目录最有可能是./build。

执行以下命令将辅助脚本放置在您的公共目录：中

$ npx msw init ./build

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

Answer 2

您需要使用public文件夹运行该命令，而不是使用生成。公用文件夹是将内容复制到生成文件夹的文件夹。如果将该文件放置在生成文件夹中，它将不会转到您的源代码管理(如果您没有正确地执行生成文件)。

与create app兼容的指令：

在运行命令之后

$ npx msw init ./public

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

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