Problem with components

[nikolaigut]

Hi all,

I am trying to test my nuxt app with @nuxt/test-utils, but I am stuck with this error (all components and layouts are listed as errors).

FAIL  tests/start.test.js (51.639 s)
  browser
    ✕ setup nuxt (49957 ms)
    ✕ renders the index page (794 ms)

  ● browser › setup nuxt


    ERROR in ./layouts/error.vue
    Module build failed (from ./node_modules/vuetify-loader/lib/loader.js):
    NonErrorEmittedError: (Emitted value instead of an instance of Error) SyntaxError: Invalid or unexpected token

      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:313:13
      at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11
      at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:172:11
      at loadLoader (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/loadLoader.js:32:11)
      at iteratePitchingLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
      at runLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
      at NormalModule.doBuild (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:295:3)
      at NormalModule.build (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:446:15)
      at Compilation.buildModule (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:739:10)
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:981:14
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:409:6
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:155:13
      at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:138:29
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:346:9
       @ ./.nuxt/t12hfdrq/index.js 27:0-48 550:0-32
       @ ./.nuxt/t12hfdrq/client.js
       @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/t12hfdrq/client.js
      ERROR in ./layouts/default.vue
      Module build failed (from ./node_modules/vuetify-loader/lib/loader.js):
      NonErrorEmittedError: (Emitted value instead of an instance of Error) SyntaxError: Invalid or unexpected token
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:313:13
      at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11
      at node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:172:11
      at loadLoader (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/loadLoader.js:32:11)
      at iteratePitchingLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
      at runLoaders (node_modules/@nuxt/webpack/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
      at NormalModule.doBuild (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:295:3)
      at NormalModule.build (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModule.js:446:15)
      at Compilation.buildModule (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:739:10)
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/Compilation.js:981:14
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:409:6
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:155:13
      at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:138:29
      at node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:346:9
       @ ./.nuxt/t12hfdrq/App.js 28:0-50 30:32-41
       @ ./.nuxt/t12hfdrq/index.js
       @ ./.nuxt/t12hfdrq/client.js
       @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/t12hfdrq/client.js

My jest.config.js:

/*
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */

module.exports = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageProvider: 'v8',
  preset: '@nuxt/test-utils',
  transformIgnorePatterns: [
    'node_modules/(?!(nuxt-i18n|@nuxtjs/vuetify|@nuxtjs/i18n|nuxt-highcharts)/)',
  ],
  setupFilesAfterEnv: ['./tests/setup.js'],
  moduleNameMapper: {
    '^@/(.)$': '<rootDir>/$1',
    '^~/(.)$': '<rootDir>/$1',
    '^./(.)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
}

My setup.js:

import path from 'path'
import glob from 'glob'
import Vue from 'vue'

glob.sync(path.join(__dirname, './components/**/*.vue')).forEach((file) => {
  const name = file.match(/(\w*)\.vue$/)[1]
  Vue.component(name, require(file).default)
})

global.Vue = Vue

I am using nuxt components with components: true in my nuxt.config.js.

Here my package.json:

{
  "name": "ui",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix",
    "test": "nuxt build && jest"
  },
  "dependencies": {
    "@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/dayjs": "^1.4.1",
    "@nuxtjs/i18n": "^7.2.2",
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.23.1",
    "nuxt": "^2.15.8",
    "nuxt-highcharts": "^2.0.4",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vued3tree": "^5.1.0",
    "vuetify": "^2.6.6",
    "vuetify-confirm": "^2.0.6",
    "vuetify-toast-snackbar-ng": "^0.7.5",
    "vuex": "^3.6.2",
    "webpack": "^5.73.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.18.2",
    "@nuxt/test-utils": "^0.2.2",
    "@nuxtjs/eslint-config": "^10.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "@nuxtjs/vuetify": "^1.12.3",
    "eslint": "^8.18.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^3.2.0",
    "eslint-plugin-vue": "^9.1.1",
    "glob": "^8.0.3",
    "jest": "^28.1.1",
    "playwright": "^1.22.2",
    "prettier": "^2.7.1"
  }
}

Any ideas?

Thank you very much for your help.