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

I encountered this error while installing the Laravel Breeze package. However, I was able to fix it by modifying the vite.config.js file. error image

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

I changed above code to this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

In my opinion, it seems like you only need to modify this particular section:

vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),

After making changes to this file, run npm run dev again to fix the problem.

Answer 2

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())
}