Type error in configuration after installation quasar ext add @quasar/testing-unit-vitest

[doox911-opensource]

Created vitest.config.ts:

import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import vue from '@vitejs/plugin-vue'
import tsconfigPaths from 'vite-tsconfig-paths'
import { defineConfig } from 'vitest/config'

// https://vitejs.dev/config/
export default defineConfig({
  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',
    }),
    tsconfigPaths(),
  ],
})

No overload matches this call.
  The last overload gave the following error.
    Type 'Plugin' is not assignable to type 'PluginOption'.
      Type 'Plugin' is not assignable to type 'Plugin_2'.
        Types of property 'apply' are incompatible.
          Type '"serve" | "build" | ((config: UserConfig, env: ConfigEnv) => boolean) | undefined' is not assignable to type '"serve" | "build" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean) | undefined'.
            Type '(config: UserConfig, env: ConfigEnv) => boolean' is not assignable to type '"serve" | "build" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean) | undefined'.
              Type '(config: UserConfig, env: ConfigEnv) => boolean' is not assignable to type '(this: void, config: UserConfig, env: ConfigEnv) => boolean'.
                Types of parameters 'config' and 'config' are incompatible.
                  Type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vitest/node_modules/vite/dist/node/index").UserConfig' is not assignable to type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vite/dist/node/index").UserConfig'.
                    Types of property 'plugins' are incompatible.
                      Type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption[] | undefined' is not assignable to type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vite/dist/node/index").PluginOption[] | undefined'.
                        Type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption[]' is not assignable to type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vite/dist/node/index").PluginOption[]'.
                          Type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption' is not assignable to type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vite/dist/node/index").PluginOption'.
                            Type 'Plugin_2' is not assignable to type 'PluginOption'.
                              Type 'Plugin_2' is not assignable to type 'Plugin'.
                                Types of property 'apply' are incompatible.
                                  Type '"serve" | "build" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean) | undefined' is not assignable to type '"serve" | "build" | ((config: UserConfig, env: ConfigEnv) => boolean) | undefined'.
                                    Type '(this: void, config: UserConfig, env: ConfigEnv) => boolean' is not assignable to type '"serve" | "build" | ((config: UserConfig, env: ConfigEnv) => boolean) | undefined'.
                                      Type '(this: void, config: UserConfig, env: ConfigEnv) => boolean' is not assignable to type '(config: UserConfig, env: ConfigEnv) => boolean'.
                                        Types of parameters 'config' and 'config' are incompatible.
                                          Type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vite/dist/node/index").UserConfig' is not assignable to type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vitest/node_modules/vite/dist/node/index").UserConfig'.
                                            Types of property 'plugins' are incompatible.
                                              Type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vite/dist/node/index").PluginOption[] | undefined' is not assignable to type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption[] | undefined'.
                                                Type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vite/dist/node/index").PluginOption[]' is not assignable to type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption[]'.
                                                  Type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vite/dist/node/index").PluginOption' is not assignable to type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption'.
                                                    Type 'PluginOption[]' is not assignable to type 'PluginOption'.
                                                      Type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vite/dist/node/index").PluginOption' is not assignable to type 'import("c:/Users/doox911/WebstormProjects/kpd-quasar/node_modules/vitest/node_modules/vite/dist/node/index").PluginOption'.
                                                        Type 'Plugin' is not assignable to type 'PluginOption'.ts(2769)
config.d.ts(80, 18): The last overload is declared here.
(alias) vue(rawOptions?: Options | undefined): Plugin
import vue

Is it just me who has such a problem or has someone else encountered it?

Next, I run yarn run test:unit:ui:

yarn run v1.22.19
$ vitest --ui
MISSING DEP  Can not find dependency '@vitest/ui'? 

√ Do you want to install @vitest/ui? ... yes
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning "@quasar/quasar-app-extension-testing-unit-vitest > vite-jsconfig-paths@2.0.1" has unmet peer dependency "vite@>2.0.0-0".
warning " > autoprefixer@10.4.16" has unmet peer dependency "postcss@^8.1.0".
[5/5] Building fresh packages...
success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
└─ @vitest/ui@0.34.6
info All dependencies
├─ @polka/url@1.0.0-next.23
├─ @vitest/ui@0.34.6
├─ fflate@0.8.1
├─ mrmime@1.0.1
├─ sirv@2.0.3
└─ totalist@3.0.1

Package @vitest/ui installed, re-run the command to start.
error Command failed with exit code 43.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

quasar info:

Operating System - Windows_NT(10.0.22000) - win32/x64
NodeJs - 18.14.0

Global packages
  NPM - 9.3.1
  yarn - 1.22.19
  @quasar/cli - 2.0.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.13.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.6.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.7 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.7 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.52.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-unit-vitest - 0.4.0 -- A Quasar App Extension for running tests with Vitest

I have an error error Command failed with exit code 43., but the interface starts.

[IlCallo]

Hey there, thanks for reporting the issue Could you provide a repro and share with us the result of running quasar info in your project?

[doox911-opensource]

Hey there, thanks for reporting the issue Could you provide a repro and share with us the result of running quasar info in your project?

Sure, I've updated the issue

[IlCallo]

Could you make sure all your deps are up-to-date to latest stable versions?

Btw, this is what is meant when we ask for a "repro": https://antfu.me/posts/why-reproductions-are-required#reproducible-projects-or-playgrounds

[doox911-opensource]

Could you make sure all your deps are up-to-date to latest stable versions?

Btw, this is what is meant when we ask for a "repro": https://antfu.me/posts/why-reproductions-are-required#reproducible-projects-or-playgrounds

https://stackblitz.com/edit/quasarframework-vhjaht?file=vitest.config.ts

[IlCallo]

Apparently there's a mismatch with Plugin types that Vitest expect in its configuration and plugin types that Vite provide This happens when there's a Vite version mismatch / Vite dep is duplicated somehow

Apparently latest Vite version changed the Plugin type signature and that's making Vitest angry since Quasar still only supports up to Vite 3, and will switch directly to Vite 5

Try using resolutions to force Vite 4 usage, as shown here

I'll try to come up with an automatic workaround for this as time permits, but being on the verge of both Vitest stable release and Vite 5 stable release (and with both still making breaking changes), it may be worth still waiting them to stabilize before actually solving this

[IlCallo]

I confirm the issue is with a mismatch between @quasar/app-vite and vitest version of vite Applying the pointed out workaround is the solution for the alpha version of this package (aka up to v0.4)

Next Vitest AE version (v1 beta) will jump straight to Vite 5 and rely on @quasar/app-vite v2, thus the problem will be solved

[lucianobarauna]

@IlCallo Thank you for the explanation. I had the same problem and I'll keep it that way until they fix it.

[IlCallo]

You can see an example setup of Vitest 0.34 working with Vite 4 and @quasar/app-vite v1 here: https://github.com/quasarframework/quasar-testing/tree/vitest-alpha/test-vite-app-v1

Important bit: https://github.com/quasarframework/quasar-testing/blob/cc3b4377385433448c03c06217d08c1085f04271/test-vite-app-v1/package.json#L64-L70

---

You can see an example setup of Vitest 1.1 working with Vite 5 and @quasar/app-vite v1 here: https://github.com/quasarframework/quasar-testing/tree/feature/vitest-v1/test-vite-app-v1-vite5

Important bit: https://github.com/quasarframework/quasar-testing/blob/13bc241433a06d6bcc943d3eca90c072f86b3865/test-vite-app-v1-vite5/package.json#L67-L74

---

You can see an example setup of Vitest 1.1 working with Vite 5 and @quasar/app-vite v2 here: https://github.com/quasarframework/quasar-testing/tree/feature/vitest-v1/test-vite-app-v2

Important bit: https://github.com/quasarframework/quasar-testing/blob/13bc241433a06d6bcc943d3eca90c072f86b3865/test-vite-app-v2/package.json#L48