Objective:
I want to test an API via useFetch from Vuetify components.
Error occurrence:
To achieve this goal, I’ve used '@nuxt/test-utils/runtime'
.
However, I encountered errors in the logs.
To identify the cause, I’ve minimized the provided repository.
As a result, it seems that an error occurs when “index.vue” is imported and used.
Previously, I was using import { defineConfig } from "vite";
in vitest.config.ts and there were no errors in the logs at that time.
Both <templage> <script> are present in index.vue.
Could you please advise me on this.
Targeted Github:https://github.com/motoo1789/nuxt-test-utils_report
Reproduction
- Import the Github into your local environment
- Run
npm install
in the environment imported to local - Run
npx vitest index
Logs
FAIL tests/pages/index.test.ts [ tests/pages/index.test.ts ]
SyntaxError: At least one <template> or <script> is required in a single file component.
❯ Object.parse$2 [as parse] node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1921:7
❯ createDescriptor node_modules/@vitejs/plugin-vue/dist/index.mjs:74:43
❯ transformMain node_modules/@vitejs/plugin-vue/dist/index.mjs:2367:34
❯ TransformContext.transform node_modules/@vitejs/plugin-vue/dist/index.mjs:2910:16
❯ Object.transform node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:51172:62
❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:53923:29
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { id: 'C:/Users/motoo/report/nuxt-test-utils_report/pages/index.vue', plugin: 'vite:vue', pluginCode: 'const _sfc_main = {}nimport { createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"nnfunction _sfc_render(_ctx, _cache) {n nn return (_openBlock(), _createElementBlock("div", null, [n _createVNode(_component_v_card)n ]))n}nnnimport _export_sfc from 'u0000plugin-vue:export-helper'nexport default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"C:/Users/motoo/report/nuxt-test-utils_report/pages/index.vue"]])nn/* Vuetify */nimport { VCard as _component_v_card } from "vuetify/lib/components/VCard/index.mjs"nn' }
We have tried to deal with this issue here as a close problem.
The solution to this problem is to remove Vue() from the plugins in ‘vitest.config.ts’.
However, I get an error saying to load Vue()
first because I am using vitest()
.
// vitest.config.ts
import Vue from "@vitejs/plugin-vue";
import vuetify from 'vite-plugin-vuetify'
import path from 'path'
import { defineVitestConfig } from '@nuxt/test-utils/config'
export default defineVitestConfig({
plugins: [
// Vue(), error
vuetify(),
],
// and more ...