I want to use the "cypress component testing" with vite + vue 3
I apply the same configuration as cypress' documentation (see 1st link above). I also try to reproduce the example from cypress' github example.
But I have the error :
[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
My project works when I run vite server, but no when I use Cypress...
Do you have an idea about the problem?
My configuration :
- package.json
{
"dependencies": {
"@vue/vue3-jest": "^27.0.0-alpha.3",
"vue": "^3.2.16",
"vue-router": "^4.0.12"
},
"devDependencies": {
"@cypress/vite-dev-server": "^2.2.0",
"@cypress/vue": "^3.0.5",
"@vitejs/plugin-vue": "^1.9.4",
"@vue/babel-preset-app": "^4.5.15",
"@vue/cli-plugin-router": "~4.5.0",
"babel-jest": "^27.3.1",
"cypress": "^9.0.0",
"jest": "^27.3.1",
"vite": "^2.6.4",
}
}- vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});- jest.config.js
module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "@vue/vue3-jest",
},
testEnvironment: "jsdom",
};- babel.config.js
module.exports = {
presets: ["@vue/app"],
};- ./cypress/plugins/index.js
const path = require("path");
const { startDevServer } = require("@cypress/vite-dev-server");
module.exports = (on, config) => {
on("dev-server:start", (options) => {
return startDevServer({
options,
viteConfig: {
configFile: path.resolve(__dirname, "..", "..", "vite.config.js"),
},
});
});
};- my component TO TEST NavigationBtn.vue
<template>
<nav>
<NavigationBtn label="Select" :to="RoutePath.SELECT"
><Select
/></NavigationBtn>
<NavigationBtn label="Shuffle" :to="RoutePath.SHUFFLE"
><ShuffleSvg
/></NavigationBtn>
<NavigationBtn label="Queue" :to="RoutePath.QUEUE"
><QueueSvg
/></NavigationBtn>
</nav>
</template>
<script setup>
import Select from "../assets/svg/select.svg";
import ShuffleSvg from "../assets/svg/shuffle.svg";
import QueueSvg from "../assets/svg/queue.svg";
import RoutePath from "../utils/RoutePath";
import NavigationBtn from "./NavigationBtn.vue";
</script>- the failing test NavigationBtn.test.js
import { mount } from "@cypress/vue";
import NavigationBtn from "./NavigationBtn.vue";
it("load SELECT view", async () => {
mount(NavigationBtn, { propsData: { label: "Shuffle", to: "/shuffle" } })
.get("a")
.should("have.text", "Shuffle");
});