我正在使用配置为cypress e2e测试的vue / cli 3。 e2e测试场景工作正常,但我也希望使用cypress进行单元测试。我安装了cypress-vue-unit-test但是当加载单个组件时(使用mountVue),cypress无法解释Vue语法(等)。
我认为我必须添加配置,以便在cypress捆绑文件时在预处理器阶段使用正确的Web包加载器。我一直无法弄清楚如何实现这一点,因为我的项目中没有web pack配置文件,我不知道如何修改预配置的设置。谁能指导我?
谢谢Linus;那更清洁
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"
});
};
谢谢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"
});
};