vue3+vite+cypry:无效的JS语法.安装@vitejs/plugin-vue来处理.vue文件

Question

我想使用；柏木成分测试"；带有vite+vue 3

我应用了与柏树文档相同的配置(见上面的第一个链接(。我还试图从cyprus的github例子中复制这个例子。

但我有一个错误：

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

我的项目在运行vite服务器时有效，但在使用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"],
};

• /cypry/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

我在安装Laravel Breeze包时遇到了这个错误。然而，我可以通过修改vite.config.js文件来修复它。错误图像

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

我把上面的代码改成了这个：

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

在我看来，你似乎只需要修改这个特定的部分：

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

更改此文件后，请再次运行npm run dev以解决问题。

Answer 2

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

然后配置柏树使用

// In your cypress/plugins/index.js file
const { VuePlugin } = require('@vitejs/plugin-vue')
module.exports = (on) => {
on('file:preprocessor', VuePlugin.process())
}