如何使用 vue/cli 进行 cypress 单元测试答案

【问题标题】：how to do cypress unit tests with vue/cli如何使用 vue/cli 进行 cypress 单元测试
【发布时间】：2018-09-04 13:58:26
【问题描述】：

我正在使用为 cypress e2e 测试配置的 vue/cli 3。 e2e 测试场景运行良好，但我也希望使用 cypress 进行单元测试。我安装了 cypress-vue-unit-test，但是在加载单个组件（使用 mountVue）时，cypress 无法解释 Vue 语法（等）。

我想我必须添加配置，以便在 cypress 捆绑文件时在预处理器阶段使用正确的 webpack 加载器。由于我的项目中没有 webpack 配置文件，我一直无法弄清楚如何实现这一点，而且我不确定如何修改预配置的设置。谁能指导我？

【问题讨论】：

自述文件声明它使用 webpack 配置 github.com/bahmutov/cypress-vue-unit-test#bundling，因此您可以使用 vue inspect 生成当前配置

标签： unit-testing vue.js cypress

【解决方案1】：

感谢 phoet，您为我指明了正确的方向。解决的办法是把配置放到tests/e2e/plugins/index.js中，内容如下（大概可以细化）：



    const webpack = require("@cypress/webpack-preprocessor");
    const VueLoader = require("vue-loader/lib/plugin");

    const webpack_vue_cypress_config = {
      webpackOptions: {
        module: {
          rules: [
            {
              test: /\.vue$/,
              loader: "vue-loader"
            },
            {
              test: /\.css$/,
              use: ["vue-style-loader", "css-loader"]
            }
          ]
        },
        resolve: {
          extensions: [".js", ".vue", ".json"],
          alias: {
            vue$: "vue/dist/vue.esm.js",
            "@": "../../"
          }
        },
        plugins: [new VueLoader()]
      },
      watchOptions: {}
    };

    module.exports = (on, config) => {
      on("file:preprocessor", webpack(webpack_vue_cypress_config));
      return Object.assign({}, config, {
        fixturesFolder: "tests/e2e/fixtures",
        integrationFolder: "tests/e2e/specs",
        screenshotsFolder: "tests/e2e/screenshots",
        videosFolder: "tests/e2e/videos",
        supportFile: "tests/e2e/support/index.js"
      });
    };

【讨论】：

我建议通过这种方式 (cli.vuejs.org/guide/…) 加载真正的 webpack 配置并删除 .entry 属性和其他你不需要的东西。这样你就可以得到相同的配置，例如sass 作为你真正的应用程序。

【解决方案2】：

感谢莱纳斯；这样干净多了

const webpack = require("@cypress/webpack-preprocessor");
const options = {
  webpackOptions: require("@vue/cli-service/webpack.config.js"),
  watchOptions: {}
};

module.exports = (on, config) => {
  on("file:preprocessor", webpack(options));
  return Object.assign({}, config, {
    fixturesFolder: "tests/e2e/fixtures",
    integrationFolder: "tests/e2e/specs",
    screenshotsFolder: "tests/e2e/screenshots",
    videosFolder: "tests/e2e/videos",
    supportFile: "tests/e2e/support/index.js"
  });
};

【讨论】：