How to use with Vitest

[r9mp]

Hi everyone!

I have been using your plugin on a Nuxt 3 app to share interfaces through components for few months now... Thanks for the great work :)

I'm currently trying to add some tests to the app with vitest, but I get the classical error: "type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.". As if vite-plugin-vue-type-imports was not applied.

Here is my component:

<script setup lang="ts">
import { CommonFormBase } from '~/components/common/form/types';

const props = defineProps<CommonFormBase>();
const { title, description, displayCreateAnother } = toRefs(props);

const createAnother = ref<boolean>(false);

const emit = defineEmits<{
  (e: 'cancel'): void;
  (e: 'save', createAnother: boolean): void;
}>();
</script>

And I added VueTypeImports as this in my vitest.config.ts file (as the doc shows it for a classical Vite / Vue app):

import { defineConfig } from 'vitest/config';
import Vue from '@vitejs/plugin-vue';
import VueTypeImports from 'vite-plugin-vue-type-imports';

export default defineConfig({
  plugins: [Vue(), VueTypeImports()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
  root: '.',
});

The full stack of the error is the following:

FAIL  test/common/form/base.spec.ts [ test/common/form/base.spec.ts ]
Error: [@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.

C:/Users/romai/Documents/Projects/LamaCodeur/lama-voc-app/components/common/form/Base.vue
43 |  import { CommonFormBase } from '~/components/common/form/types';
44 |
45 |  const props = defineProps<CommonFormBase>();
   |                            ^^^^^^^^^^^^^^
46 |  const { title, description, displayCreateAnother } = toRefs(props);
47 |
 ❯ error node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3589:15
 ❯ processDefineProps node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3631:17
 ❯ Object.compileScript node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:4123:43
 ❯ resolveScript node_modules/@vitejs/plugin-vue/dist/index.cjs:277:31
 ❯ genScriptCode node_modules/@vitejs/plugin-vue/dist/index.cjs:2357:18
 ❯ transformMain node_modules/@vitejs/plugin-vue/dist/index.cjs:2178:54
 ❯ TransformContext.transform node_modules/@vitejs/plugin-vue/dist/index.cjs:2653:16
 ❯ Object.transform ../../../../../../../../C:/Users/romai/Documents/Projects/LamaCodeur/lama-voc-app/node_modules/vitest/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35579:53     
 ❯ loadAndTransform ../../../../../../../../C:/Users/romai/Documents/Projects/LamaCodeur/lama-voc-app/node_modules/vitest/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:39888:29

Did I imported it in a wrong way?

[Zolyn]

Can you provide a reproduction repo/link?

[r9mp]

Hi,

I solved my problem trying to reproduce.

The problem was in the imports: import { CommonFormBase } from '~/components/common/form/types'; should be import { CommonFormBase } from './types'; The ~ alias was not recognized. If you want to recognize it, you have to update vitest config, adding:

import path from "path";

export default defineConfig({
  resolve: {
      alias: {
        "~": path.resolve(__dirname, "."),
      },
    },
});

I still have one trouble, which is when calling the setup function of the @nuxt/test-utils-edge dependency. The error message is: "Sourcemap is likely to be incorrect: a plugin (vite-plugin-vue-type-imports) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help".

You can find a repo to reproduce it here: https://github.com/r9mp/vitest-nuxt

The problem only occurs on the file test/nuxt.spec.ts and when the setup function is called.

As it is another problem, I can recreate an issue if you prefer ; or if you think that it's more a problem from @nuxt/test-utils-edge, I can also create an issue there.

R

[Zolyn]

I still have one trouble, which is when calling the setup function of the @nuxt/test-utils-edge dependency. The error message is: "Sourcemap is likely to be incorrect: a plugin (vite-plugin-vue-type-imports) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help".

Yes, it's related to the plugin. It doesn't generate sourcemaps ATM. You can create a separate issue.