vue 3 + vite + cypress：无效的 JS 语法。 安装@vitejs/plugin-vue 来处理.vue 文件

Question

我想在vite + vue 3中使用“cypress 组件测试”

我应用与赛普拉斯文档相同的配置（参见上面的第一个链接）。 我还尝试从 cypress 的 github 示例中重现示例。

但我有错误：

[plugin:vite:import-analysis] 无法解析导入分析源，因为内容包含无效的 JS 语法。 安装@vitejs/plugin-vue 来处理.vue 文件。

我的项目在我运行 vite server 时有效，但在我使用 Cypress 时却没有...

你知道这个问题吗？

我的配置：

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

• 我要测试的组件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>

• 失败的测试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

尝试运行npm i @vitejs/plugin-vue来处理 .vue 文件。

然后配置cypress来使用它

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

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