Unit test error using 'Vitest, @nuxt/test-utils' (SyntaxError: At least one <template> or <script> is required for each file component. )

[motoo1789]

Environment

• Operating System: Windows_NT
• Node Version: v18.17.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@9.6.7
• Builder: -
• User Config: devtools, plugins, build, typescript, modules, testUtils
• Runtime Modules: @nuxt/test-utils/module@3.12.0, ()
• Build Modules: -

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "@prisma/client": "^5.12.1",
    "nuxt": "^3.11.2",
    "prisma": "^5.12.1",
    "ts-node": "^10.9.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@nuxt/test-utils": "^3.12.0",
    "@nuxtjs/vuetify": "^1.12.3",
    "@types/node": "^20.12.7",
    "@vue/test-utils": "^2.4.5",
    "happy-dom": "^13.10.1",
    "playwright-core": "^1.43.0",
    "vite-plugin-vuetify": "^2.0.3",
    "vitest": "^1.4.0",
    "vuetify": "^3.5.14"
  },
  "prisma": {
    "seed": "ts-node prisma/seed.ts",
    "reset": "ts-node prisma/reset.ts"
  }
}

Reproduction

1. Import the following Github into your local environment
2. Run npm install in the environment imported to local
3. Run npx vitest index

Github：https://github.com/motoo1789/nuxt-test-utils_report

Describe the bug

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.

Additional context

As a solution for related errors, you can remove Vue() from the plugin in the vite.config.m{ts|js} file.
If you remove Vue() from plugins in the vitest.config.m{ts|js} file it complains Vuetify needs to be loaded before the Vue plugin.

No response

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"\n\nfunction _sfc_render(_ctx, _cache) {\n                                                       \n\n  return (_openBlock(), _createElementBlock("div", null, [\n    _createVNode(_component_v_card)\n  ]))\n}\n\n\nimport _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"]])\n\n/* Vuetify */\nimport { VCard as _component_v_card } from "vuetify/lib/components/VCard/index.mjs"\n\n' }

[dosubot]

The error message you're encountering, "SyntaxError: At least one or <script> is required in a single file component," suggests a misinterpretation of the file content by the testing framework or the Vue file parser. This is likely due to the unconventional use of import.meta.vitest within a <script> tag in a Vue component. To address this issue, you should separate the testing code from the component definition by creating a separate test file for your tests. This aligns with best practices where test code is distinct from application code and may resolve the parsing issue.

Ensure your testing setup, including configurations for Vitest and @nuxt/test-utils, properly supports Vue single file components (SFCs) and TypeScript. This involves correctly setting up the Nuxt configuration file (nuxt.config.ts) and a Vitest configuration file (vitest.config.ts) to handle the specifics of your project setup, including the testing environment and the handling of Vue components.

Review your configuration files for any discrepancies or misconfigurations. If the problem persists, it could be due to compatibility issues between Vitest, @nuxt/test-utils, and Vue 3.4.21. Compatibility concerns have been noted in the changelogs for these tools, which could be contributing to the error you're seeing.

This approach should help you resolve the error and ensure your testing environment is correctly configured for your Nuxt and Vue application.

Details

Sources

• examples/app-vitest-full/pages/index.vue
• examples/content/vitest.config.ts
• examples/app-vitest-full/vitest.config.ts
• examples/app-vitest-full/nuxt.config.ts
• CHANGELOG.md
• examples/app-vitest-full/tests/unit/index.spec.ts
• package.json

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[Hoko2021]

Currently facing this issue at the moment, if you remove Vue() from plugins in the vitest.config.m{ts|js} file it complains Vuetify needs to be loaded before the Vue plugin.

[motoo1789]

@Hoko2021

if you remove Vue() from plugins in the vitest.config.m{ts|js} file it complains Vuetify needs to be loaded before the Vue plugin.

I am facing the same problem. I am relieved to see someone else facing the same problem.
Add this action and error to 'Additional context'.

[danielroe]

You should not add the Vue plugin to your vitest config - @nuxt/test-utils/runtime takes care of loading the Vue (and Vuetify) plugins, as long as they are loaded properly in your Nuxt project...

[motoo1789]

@danielroe
Thank you, I deleted all the plugins and it works fine.