nuxt / test-utils

🧪 Test utilities for Nuxt
http://nuxt.com/docs/getting-started/testing
MIT License
312 stars 80 forks source link

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

Closed motoo1789 closed 4 months ago

motoo1789 commented 4 months ago

Environment

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[bot] commented 4 months ago

The error message you're encountering, "SyntaxError: At least one