Error in Nuxt 3: Decorators are not valid here

[Oli8]

Describe the bug

I'm experiencing issues with decorators when running tests using Vitest in a Nuxt 3 project.
The decorators work fine in the rest of the application, but when I run the tests, I encounter errors indicating that decorators are not valid.

When running npm test, I receive the following errors:

FAIL  tests/player.test.ts [ tests/player.test.ts ]
Error: Transform failed with errors:
[...]/db/models/Player.ts:12:2: ERROR: Decorators are not valid here

Reproduction

https://github.com/Oli8/repr-vitest-nuxt-decorator-error

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
    Memory: 5.62 GB / 15.36 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
  npmPackages:
    vitest: ^1.6.0 => 1.6.0

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

Looks like the error is expected since you import db directly instead of using setup/$fetch from Nuxt: https://nuxt.com/docs/getting-started/testing#setup-1

Your configuration is set up by Nuxt config, Vitest just runs the code as it was told. From a quick glance, you are relying on experimental decorators. Vitest uses esbuild to process TS files, you can configure it manually via esbuild option:

import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  esbuild: {
    tsconfigRaw: {
      compilerOptions: {
        experimentalDecorators: true,
      },
    },
  },
  test: { globals: true },
})