Nuxt auto import component does not work in Component Testing

[rockindahizzy]

Current behavior

When testing a component with children components that are loaded via Nuxt's auto import mechanism, the children are not rendered in the AUT.

Desired behavior

The children components are rendered without user intervention

[baus]

Hey team! Please add your planning poker estimate with Zenhub @amehta265 @astone123 @lmiller1990 @marktnoonan @mike-plummer @rockindahizzy @warrensplayer @ZachJW34

[lmiller1990]

• userland work around Support Nuxt3 Auto-Imports vuejs/vue-jest#430 (comment)
• issue in nuxt w/ some info Expose vite/webpack client config nuxt/nuxt#14534

I do not think we should spend a ton of time here, Nuxt is not very popular, but worth seeing if we can offer a work around at least. I think we should time box it to 1.5 days max.

[speg]

Nuxt is not very popular

It was the subject of what seemed like half the talks at VueConf Toronto! I just got home and was excited to try everything out.. Cypress, TypeScript, Vue3, Nuxt3, Veutify3, it's going to be amazing!

Now I've run into a wall of issues trying to run tests. Seems like Nuxt3 isn't set up out of the box to run any. Gotta wrap my head around Vitest and Cypress to try and point them in the correct direction. First no vite config found (hidden behind wall of Nuxt magic) and now Cypress can't handle the auto imports...

Sorry, this should probably be direct towards Nuxt - but if you can get automatic imports in Cypress - that would be amazing! 🙏🏼

[lmiller1990]

I'm having a similar issue in Vue Jest: vuejs/vue-jest#430

Now Nuxt is (finally) a stable 3.0.0 release, we can look at supportig it... we started discussing with Nuxt team a while ago but the API was unstable, but maybe it's more stable now: nuxt/nuxt#14534

Related:

• Support for unit testing in nuxt environment nuxt/nuxt#14972
• https://github.com/nuxt/nuxt.js/issues/13077

In the best interest of the Nuxt community, I think we need some kind of general solution for the "make my testing framework know about Nuxt auto imports" problem. Then we can use it in Cypress, Playwright can use it, as well as Vue Jest, Vitest, etc.

If you can share some of the tests you'd like to/are trying to write, we could use those as a kind of acceptance criteria to drive the development of this feature?

[floroz]

is there any example/experimentation repo where Cypress Component Testing works even without Auto Import?

For now, I could only make it work by adding a vite.config.js configure with the vue plugin, but that file needs to be destroyed before running the Nuxt dev server, and considering I was just testing some base case of a barebone project, I would expect other issues to potentially pop-up.

[lmiller1990]

I don't know of an example yet -- due to various recent events, our team has pretty limited bandwidth and isn't able to commit to a timeline for Nuxt support. There's some ongoing discussion here: nuxt/nuxt#14534

but that file needs to be destroyed before running the Nuxt dev server

What do you mean by "destroyed before running"? Why is that?

What happens if you explicit import? At that point, you are working with a standard Vue component (or maybe not?) What other Nuxt magic should we account for other than auto-imports?

[floroz]

What do you mean by "destroyed before running"? Why is that?

What happens if you explicit import? At that point, you are working with a standard Vue component (or maybe not?) What other Nuxt magic should we account for other than auto-imports?

Ignore my comments, those were previous attempts before the Nuxt team highlighted how to access the vite config from @nuxt/kit.

I opened a request for integration here: #25719

[lmiller1990]

^ Thanks @floroz.

There's info scattered everywhere - I am going to track it all in nuxt/nuxt#24141.