wheatjs / vite-plugin-vue-type-imports

Import types in Vue SFC for defineProps
223 stars 16 forks source link

Vitest Support #53

Closed denissteinhorst closed 1 year ago

denissteinhorst commented 1 year ago

I was hoping that it is possible to include that plugin to Vitest as well, since it's giving me the same error when i try to run tests:

Error: [@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.

1  |  import type { IFooBar } from '~~/models/fooBar.model'
2  |  
3  |  const props = withDefaults(defineProps<IFooBar>(), {
   |                                        ^^^^^^^^

I've already included the plugin successfully into the nuxt.config.js, everything works as expected but Vitest refuses to resolve my models...

vitest.config.js:

import VueTypeImports from 'vite-plugin-vue-type-imports'

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue(), VueTypeImports()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
})

I'm looking forward to any Ideas how to make it work, thanks in advance!

denissteinhorst commented 1 year ago

nvm. resolved in: #36 thanks to r9mp

Solution (Nuxt3/Vitest):

component.vue:

import type { IFooBar } from '~~/models/fooBar.model'

const props = withDefaults(defineProps<IFooBar>(), {
...
})

vitest.config.js

import vue from '@vitejs/plugin-vue'
import path from 'path'
import VueTypeImports from 'vite-plugin-vue-type-imports'

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue(), VueTypeImports()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
  resolve: {
    alias: {
      '~~': path.resolve(__dirname, '.'),
    },
  },
})