как сделать модульные тесты кипариса с помощью VUE / Cli - PullRequest
Новая
       9

как сделать модульные тесты кипариса с помощью VUE / Cli

0 голосов
/ 04 сентября 2018

Я использую vue / cli 3, настроенный для тестов Cypress e2e. Тестовый сценарий e2e работает нормально, но я также хотел бы использовать кипарис для юнит-тестов. Я установил cypress-vue-unit-test, но при загрузке одного компонента (используя mountVue) Cypress не может интерпретировать синтаксис Vue (и т. Д.).

Полагаю, мне нужно добавить конфигурацию, чтобы на этапе препроцессора использовались правильные загрузчики веб-пакетов, когда Cypress связывает файлы. Мне не удалось выяснить, как это сделать, поскольку в моем проекте нет файла конфигурации веб-пакета, и я не уверен, как изменить предварительно настроенную настройку. Кто-нибудь может направить меня?

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Спасибо, Линус; это намного чище 

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"
  });
};
0 голосов
/ 04 сентября 2018

Спасибо, фот, ты указал мне правильное направление. Решение состояло в том, чтобы поместить конфигурацию в 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"
      });
    };
...