Testing of Vue Components with Nuxt Auto-Import

[remiconnesson]

I'm looking for a way to unit-test components defined in nuxt3's components folder, which would benefit from auto-import of stuff like ref and computed

I've managed to pipe in with nuxt : vitest, vue-test-utils and nuxt-test-utils-edge with this vitest.config.js

import vue from '@vitejs/plugin-vue'

export default {
	plugins: [vue()],
	test: {
    globals: true,
    environment: 'jsdom',
    deps: {
      inline: [/@nuxt\/test-utils-edge/],
    },
  },
}

I thought the setup function nuxt-test-utils-edge would help but unfortunately it's not enough to make the auto-import sweetness going in the the vitest test runner.

I'm pretty new to front end engineering but I'd love to contribute on making this happen if there's not a trivial way to do so

[sheremet-va]

You can try this https://github.com/antfu/unplugin-auto-import

[remiconnesson]

Thank you very much !

[remiconnesson]

Well that was exactly what I needed

[remiconnesson]

So I managed to make it work with

• unplugin-auto-import to auto import vue stuff like ref and computed
• unplugin-vue-components to auto import vue components

Below is the vitest.config.js file that gave me good results with vitest

import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    vue(),
    AutoImport({
        imports: [
          'vue'
        ],  
    }), 
    Components({
      dirs: ['./components']
    }), 
  ],  
  test: {
    globals: true,
    environment: 'jsdom',
    deps: {
      inline: [/@nuxt\/test-utils-edge/],
    },  
  },  
}

You can find an example of how everything is wired together here : https://github.com/remiconnesson/vitest-nuxt

[jimbo0378]

I tried this solution, it works for Vue auto imports, but when using Nuxt auto imports (like useFetch or composables) it doesn't. Any ideas how to get those to work properly?

[remiconnesson]

I tried this solution, it works for Vue auto imports, but when using Nuxt auto imports (like useFetch or composables) it doesn't. Any ideas how to get those to work properly?

Yes you would need to add lines in the configuration file, probably add a path to the the composables folder in the autoimports array (or something in that direction)

For useFetch you probably need to import something in the configuration file for these, maybe try to check nuxt source code to figure out where they are coming from?

[remiconnesson]

What helped me figure it out for the auto import of vue and components was to dig into https://github.com/antfu/unplugin-auto-import

You might be interested in the section #compare-to-unimport of the Readme.md, they talk about nuxt made their autoimport feature

[adamskeeled]

@jimbo0378 did you manage to get this working for Nuxt auto imports?