vue 3 + vite + cypress : invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files

Question

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

Answer 1

Try to run npm i @vitejs/plugin-vue to handle.vue files.

And then configure cypress to use it

// In your cypress/plugins/index.js file
const { VuePlugin } = require('@vitejs/plugin-vue')

module.exports = (on) => {
  on('file:preprocessor', VuePlugin.process())
}