0

我尝试为我的 React 项目设置Mock Service Worker。我的项目不使用CRA。

我想拦截 GraphQL 请求并模拟它的响应，以使用赛普拉斯创建 end 2 end 测试。

如何将mockServiceWorker.js文件复制到我的构建文件夹（使用 Webpack），如其他资产图像和字体等？

我使用了命令npx msw init build --save。然后mockServiceWorker.js就创建好了。

但是一旦我运行npm start并且我的客户端和服务器被编译，文件就会mockServiceWorker.js消失？

我还需要msw在我们的验收环境中运行 Cypress end 2 end 测试也在管道中。

4

1 回答 1

0

您不一定需要复制工作脚本。在大多数情况下，您使用 MSW 作为开发工具。如果您让 webpack 为您的开发包提供服务，您可能会使用webpack-dev-server来提供该包。Webpack Dev Server 支持指向项目中的本地目录的static.directory选项（以前contentBase在 webpack 4 中），该目录应该充当开发服务器的公共目录。这就是您需要将工作人员初始化为.

$ npx msw init ./public --save

如果您确实使用 Webpack Dev Server，请确保将其指向正确的公共目录。其中一种方法是在您的webpack.config.js：

// webpack.config.js
const path = require('path')

module.exports = {
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'public')
    }
  }
}

请注意，如果您已经在提供静态资源，则无需添加任何额外的 webpack 配置。只需将工作程序初始化npx msw init到包含您的静态资产的同一目录中。

如果您通过其他方式为您的 webpack 构建提供服务，您可以利用copy-webpack-plugin将工作脚本从一个位置显式复制到另一个位置。但是，我很确定上面的开发服务器建议就是您所寻求的。

于 2021-11-23T22:53:08.467 回答