renderSuspended renders layout AND component

[StevenPewsey]

I have a NavigationBar component that is rendered within a layout (layouts/default.vue)

I am wanting to test the NavigationBar in isolation of the rest of the page, but it contains the NuxtLink component so I need to test it within the context of the nuxt environment.

await renderSuspended(NavigationBar)

This is rendering the page as the following:

<div
  id="__nuxt"
  data-v-app=""
>
  // my default layout with the `/` route rendered
</div>
<div>
  <div id="test-wrapper">
    // the NavigationBar component that I wanted to test
  </div>
</div>

Is this expected behaviour? In my case it is effectively rendering the NavigationBar twice as it's appearing with the __nuxt div in the layout, and in the test-wrapper div. This makes it hard to test using @testing-library as I can't use getByText but instead need to use getAllbyText as everything is rendered twice.

vitest version 0.32.2
nuxt-vitest 0.10.5

[gretchelin]

I can confirm this is still happening with vitest 0.33.0 and nuxt-vitest 0.11.0.

Reproduction is here:
https://stackblitz.com/edit/nuxt-starter-oma5uq?file=app.vue

[jessiesiat]

got the same issue, any updates or plan to workaround this?

[oskarols]

The somewhat crude workaround we did was to add a test-specific route that doesn't render anything, and then we use that route when using renderSuspended for component testing.

Would be nice to have this officially be supported by nuxt-vitest, e.g. by having to opt-in to actually rendering the route tree and having it be a noop by default.

[StevenPewsey]

I have found that this workaround appears to work https://github.com/danielroe/nuxt-vitest/issues/295#issuecomment-1714288882 if you make it so that the 'replacement' is a component that renders an empty div

[danielroe]

This should now be implemented - we no longer render app.vue by default since #260.