Vitest cannot resolve imports using aliases

[julianctni]

What happened?

Hello,

yesterday I set up a completly new and empty quasar project with app-vite 2.0. After that I added testing (vitest) via quasar ext add @quasar/testing-unit-vitest as mentioned in the documentation. However, as soon as I import something from my source folder, I get this error message running the tests.

It seems like a problem with the folder aliases that cannot be resolved using vitest.

I hope there is an easy/quick solution. :)

Best regards and thanks for you work!
Julian

What did you expect to happen?

The imports should be resolved.

Reproduction URL

https://stackblitz.com/edit/stackblitz-starters-khocqz

How to reproduce?

1. Go to the reproduction link
2. Run yarn test:unit

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Project Creation (create-quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[Smrtnyk]

did you setup the same aliases in the vitest as well?

[julianctni]

did you setup the same aliases in the vitest as well?

@Smrtnyk I tried for some, it worked for them, however I thought the vitest config will get that information from the generated tsconfig.json file. There are a lot of pre-defined and it feels wrong just to copy/paste these generated artifacts somewhere else.

[rstoenescu]

Why copying and not just extending the same file (.quasar/tsconfig.json)?

[julianctni]

Why copying and not just extending the same file (.quasar/tsconfig.json)?

@rstoenescu I am confused. How can I extend the vitest.config.mts from .quasar/tsconfig.json? The aliases in the tsconfig file are under compilerOptions.paths whereas in the vitest.config they would appear under test.resolve.alias.

[yusufkandemir]

Related issues:

• vite-tsconfig-paths cannot import a basic TSconfig extends in sub-folder aleclarson/vite-tsconfig-paths#150
• feat: rebase extended paths when baseUrl is undefined dominikg/tsconfck#206

Workaround:

// create a file called /app-vite-testing-shim.d.ts
declare module '@quasar/app-vite/lib/testing.js' {
  import { type UserConfig } from 'vite'

  export function getTestingConfig(ctxParams?: Record<string, unknown>): Promise<UserConfig>
}

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import { getTestingConfig } from '@quasar/app-vite/lib/testing.js'

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  resolve: {
    alias: (await getTestingConfig()).resolve.alias,
  },
  test: {
    environment: 'happy-dom',
    setupFiles: 'test/vitest/setup-file.ts',
    include: [
      // Matches vitest tests in any subfolder of 'src' or into 'test/vitest/__tests__'
      // Matches all files with extension 'js', 'jsx', 'ts' and 'tsx'
      'src/**/*.vitest.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
      'test/vitest/__tests__/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
    ],
  },
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    quasar({
      sassVariables: 'src/quasar-variables.scss',
    }),
  ],
}))

[yusufkandemir]

I investigated this yesterday. Now, the problem should be gone with vite-tsconfig-paths v5.1.4.

But, we will also consider improving the getTestingConfig-based solution to improve other potential aspects.

[yusufkandemir]

Also, next time, please use https://github.com/quasarframework/quasar-testing/issues for testing-related issues, thanks.

[julianctni]

I investigated this yesterday. Now, the problem should be gone with vite-tsconfig-paths v5.1.4.

I updates vite-tsconfig-paths to v5.1.4 (see repro link), the import errors are now gone, however it now claims, that defineConfig is not a function.

However the getTestingConfig solution works!

[yusufkandemir]

That means we should improve the getTestingConfig solution and use it. Thanks for testing and confirming!