App.vue doesnt mount when running tests

[joel-wenzel]

Environment

[8:43:08 AM] Working directory: C:/code/nuxt-test
[8:43:08 AM] Nuxt project info:

---

• Operating System: Windows_NT
• Node Version: v20.11.0
• Nuxt Version: 3.9.3
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules
• Runtime Modules: @nuxt/test-utils/[email protected]
• Build Modules: -

---

Reproduction

https://github.com/joel-wenzel/nuxt-test
Steps to reproduce:

1. git clone https://github.com/joel-wenzel/nuxt-test
2. cd nuxt-test
3. npm ci
4. npm run test
5. There are two console logs in app.vue that dont seem to be logged

Describe the bug

It seems like App.vue doesnt mount when using @nuxt/test-utils. This was something nuxt-vitest did do, at least version 0.11.0.
In my case I am also using vuetify and rely on some of the vuetify elements being mounted in the app which unfortunately is not happening.

Additional context

No response

Logs

No response

[danielroe]

Yes, this is the case. Given that you might not always want app.vue mounted, can you think of a good API, or share some pseudo-code of how you would want to test something that relies on having vuetify elements mounted somewhere else?

[joel-wenzel]

In my particular case my simplified app.vue looks something like:

<v-app>
   <NuxtLayout v-if="show"></NuxtLayout>
</v-app>

v-app is vuetify's app wrapper element (it will be used when they mount dialogs and hover menu's etc).

A lot of my components will end up generating popup menu's that I unfortunately cant test unless app.vue gets mounted.
Completely understand that for unit tests it may be beneficial or even desirable to omit the mounting of the main app but sadly in my case I kind of need it.

[danielroe]

What about providing a path in the runtime test options to an app.vue that will be used explicitly during tests?

[MaxWeisen]

I think my issue is similar.

I am testing a component that opens a v-dialog when a button is clicked.

When testing this component with @vue/test-utils I can see that the v-dialog is attached to the document.body.innerHTML.

When testing with @nuxt/test-utils the v-dialog isn't rendering anywhere.

What about providing a path in the runtime test options to an app.vue that will be used explicitly during tests?

I've tried looking for some more detail regarding this suggestion. @danielroe Do you have an example or a link to documentation that dives into this with a little more detail?

[joel-wenzel]

@danielroe

What about providing a path in the runtime test options to an app.vue that will be used explicitly during tests?

Is this something that is possible currently? Or are you suggesting a new feature? Either way I believe that would work.

[cquinn540]

I am working on adding component/integration testing to a project that heavily uses pinia and this would be useful for that as well as opposed to manually stubbing it out in every test.