how to do cypress unit tests with vue/cli

Question

I am using vue/cli 3 configured for cypress e2e tests. The e2e test scenario works fine but I also wish to use cypress for unit tests. I installed cypress-vue-unit-test but when loading a single component (using mountVue) cypress fails to interpret the Vue syntax ( etc).

I presume I have to add configuration so that the correct web pack loaders are used at the preprocessor stage when cypress bundles the files. I have been unable to figure out how to accomplish this as there is no web pack config file in my project and I am not sure how to modify the preconfigured set-up. Can anyone guide me?

the readme states it uses a webpack config github.com/bahmutov/cypress-vue-unit-test#bundling so you could generate the current one using vue inspect — phoet
– phoet, Commented Sep 4, 2018 at 14:12

meljturner · Accepted Answer · 2018-09-04 15:19:04Z

2

Thanks phoet, you pointed me in the right direction. The solution was to place the configuration in tests/e2e/plugins/index.js with the following content (probably could be refined):



    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"
      });
    };

answered Sep 4, 2018 at 15:19

meljturner

1771 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Linus Borg Over a year ago

I would recommand to load the real webpack config via this way (cli.vuejs.org/guide/…) and delete the .entry property and other stuff you don't need. That way you get the same config for e.g. sass as your real app.

meljturner · Accepted Answer · 2018-09-04 15:48:47Z

2

Thanks Linus; that's much cleaner

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"
  });
};

answered Sep 4, 2018 at 15:48

meljturner

1771 silver badge9 bronze badges

Collectives™ on Stack Overflow

how to do cypress unit tests with vue/cli

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related