testingnuxt.jsnuxt3.jsvitest

How to use paths in vitest with Nuxt3?


I have nuxt3_rc_3 project and using vitest to test the utilities I wrote for project

utils/index.ts imports few constants from ~~/config/constants

While writing test in test/utils/index.test.ts I imported one function to write test when I run test I get this error

FAIL  test/utils/index.test.ts [ test/utils/index.test.ts ]
Error: [vite-node] Failed to load ~~/config/constants

I guess the problem is vitest not reading ./.nuxt/tsconfig.json for relative path lookup or may be something else wrong please help.

nuxt3's tsconfig for path

...
"paths": {
      "~~": [
        "."
      ],
      "~~/*": [
        "./*"
      ],
      "@@": [
        "."
      ],
      "@@/*": [
        "./*"
      ],
      "~": [
        "."
      ],
      "~/*": [
        "./*"
      ],
      "@": [
        "."
      ],
      "@/*": [
        "./*"
      ],
      "assets": [
        "assets"
      ],
      "public": [
        "public"
      ],
      "public/*": [
        "public/*"
      ],
      "#app": [
        "node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "node_modules/nuxt/dist/app/*"
      ],
      "vue-demi": [
        "node_modules/nuxt/dist/app/compat/vue-demi"
      ],
      "pinia": [
        "pinia/dist/pinia"
      ],
      "@intlify/shared": [
        "node_modules/@intlify/shared/dist/shared.esm-bundler"
      ],
      "@intlify/core-base": [
        "node_modules/@intlify/core-base/dist/core-base.esm-bundler"
      ],
      "@intlify/devtools-if": [
        "node_modules/@intlify/devtools-if/dist/devtools-if.esm-bundler"
      ],
      "vue-i18n": [
        "node_modules/vue-i18n/dist/vue-i18n.esm-bundler"
      ],
      "#head": [
        "node_modules/nuxt/dist/head/runtime"
      ],
      "#head/*": [
        "node_modules/nuxt/dist/head/runtime/*"
      ],
      "#components": [
        ".nuxt/components"
      ],
      "#imports": [
        ".nuxt/imports"
      ],
      "#build": [
        ".nuxt"
      ],
      "#build/*": [
        ".nuxt/*"
      ]
    }
...

Solution

  • Using nuxt's ts config's paths as alias in vitest config solves the issue

    // file alias.ts
    
    import { resolve } from 'path'
    
    const r = (p: string) => resolve(__dirname, p)
    
    export const alias: Record<string, string> = {
      '~~': r('.'),
      '~~/': r('./'),
      '@@': r('.'),
      '@@/': r('./'),
    
      ... other paths
    }
    
    // vitest.config.ts
    import { defineConfig } from 'vite'
    import { alias } from './alias'
    
    export default defineConfig({
      root: '.',
      esbuild: {
        tsconfigRaw: '{}',
      },
      resolve: {
        alias,
      },
    })
    
    

    Edit:

    there is new way to do it via unplugin-auto-import plugin in vitest config to support auto import.