unwrap render wrapper div element and appendTo app root element

Author: yamachi4416

examples/app-vitest-browser/test/nuxt/components/render.spec.ts

@@ -1,8 +1,8 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { render } from '@nuxt/test-utils/vitest-browser-nuxt'
 import { MyCounter } from '#components'
 
-describe('Render Component (MyCounter)', () => {
+describe('Render Component', () => {
   it('renders', async () => {
     const { getByText } = await render(MyCounter)
     expect(getByText('Count: 0')).toBeInTheDocument()
@@ -28,4 +28,46 @@ describe('Render Component (MyCounter)', () => {
     expect(config).toBeInTheDocument()
     expect(config).toHaveTextContent(/"buildAssetsDir"\s*:\s*"\/_nuxt\/"/)
   })
+
+  it('locator', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    expect(screen.locator.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
+  })
+
+  it('baseElement', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    await expect.element(screen.baseElement).toHaveAttribute('id', 'nuxt-test')
+    expect(screen.baseElement.children[0]?.outerHTML).toBe('<h1>Hello Nuxt!</h1>')
+  })
+
+  it('container', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    await expect.element(screen.container).toHaveAttribute('id', 'nuxt-test')
+    expect(screen.container.children[0]?.outerHTML).toBe('<h1>Hello Nuxt!</h1>')
+  })
+
+  it('umount', async () => {
+    const onBeforeUnmountFn = vi.fn()
+    const screen = await render(defineComponent({
+      setup() {
+        onBeforeUnmount(onBeforeUnmountFn)
+      },
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    await screen.unmount()
+
+    await expect.element(screen.container).toHaveAttribute('id', 'nuxt-test')
+    expect(screen.container.children.length).toBe(0)
+    expect(onBeforeUnmountFn).toHaveBeenCalledOnce()
+  })
 })

examples/app-vitest-browser/test/nuxt/components/render.vue.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { render } from 'vitest-browser-vue'
 import { MyCounter } from '#components'
 
-describe('Render(vue) Component (MyCounter)', () => {
+describe('Render(vue) Component', () => {
   it('renders', () => {
     const { getByText } = render(MyCounter)
     expect(getByText('Count: 0')).toBeInTheDocument()
@@ -28,4 +28,12 @@ describe('Render(vue) Component (MyCounter)', () => {
     expect(config).toBeInTheDocument()
     expect(config).toHaveTextContent(/"buildAssetsDir"\s*:\s*"\/_nuxt\/"/)
   })
+
+  it('locator', async () => {
+    const screen = await render(defineComponent({
+      render: () => h('h1', {}, 'Hello Nuxt!'),
+    }))
+
+    expect(screen.locator.getByRole('heading')).toHaveTextContent('Hello Nuxt!')
+  })
 })

src/runtime-utils/utils/suspended.ts

@@ -19,6 +19,8 @@ type WrapperFnComponent<Fn> = Fn extends (c: infer C, o: infer _) => infer _ ? C
 type WrapperFnOption<Fn> = Fn extends (c: WrapperFnComponent<Fn>, o: infer O) => infer _ ? O : never
 type WrapperFnResult<Fn> = Fn extends (c: WrapperFnComponent<Fn>, o: WrapperFnOption<Fn>) => infer R ? R : never
 
+type VueApp = App<Element> & Record<string, unknown>
+
 export type WrapperSuspendedOptions<Fn> = WrapperFnOption<Fn> & {
   route?: RouteLocationRaw | false
   scoped?: boolean
@@ -45,18 +47,24 @@ function runEffectScope<T>(fn: () => T) {
   return scope.run(fn)
 }
 
-export function wrapperSuspended<C, Fn extends WrapperFn<C>>(
+export function wrapperSuspended<
+  C,
+  Fn extends WrapperFn<C>,
+  Opts extends WrapperSuspendedOptions<Fn>,
+>(
   component: C,
-  options: WrapperSuspendedOptions<Fn>,
+  options: Opts,
   {
     wrapperFn,
     wrappedRender = fn => fn,
+    overrideOptionsFn = () => {},
     suspendedHelperName,
     clonedComponentName,
     stubRouterLink = true,
   }: {
     wrapperFn: NonNullable<Fn>
     wrappedRender?: (render: () => VNode) => () => VNode
+    overrideOptionsFn?: (options: Opts, vueApp: VueApp) => void
     suspendedHelperName: string
     clonedComponentName: string
     stubRouterLink?: boolean
@@ -65,12 +73,15 @@ export function wrapperSuspended<C, Fn extends WrapperFn<C>>(
   wrapper: WrapperSuspendedResult<Fn>
   setProps: (props: object) => void
 }> {
-  const { props = {}, attrs = {} } = options as ComponentMountingOptions<C>
-  const { route = '/', scoped = false, ...wrapperFnOptions } = options as ComponentMountingOptions<C>
-
   const vueApp: App<Element> & Record<string, unknown> = tryUseNuxtApp()?.vueApp
     // @ts-expect-error untyped global __unctx__
     || globalThis.__unctx__.get('nuxt-app').tryUse().vueApp
+
+  overrideOptionsFn(options, vueApp)
+
+  const { props = {}, attrs = {} } = options as ComponentMountingOptions<C>
+  const { route = '/', scoped = false, ...wrapperFnOptions } = options as ComponentMountingOptions<C>
+
   const {
     render: componentRender,
     setup: componentSetup,

src/vitest-browser-nuxt/pure.ts

@@ -47,9 +47,22 @@ export async function render<T>(
 
   cleanupAll()
 
+  const umountedFns: (() => void)[] = []
+  const wrapperId = window.crypto.randomUUID()
+
   const { wrapper: _wrapper, setProps } = await wrapperSuspended(component, options, {
     wrapperFn,
-    wrappedRender: render => () => h('div', {}, render()),
+    wrappedRender: render => () => h({
+      inheritAttrs: false,
+      unmounted: () => umountedFns.forEach(fn => fn()),
+      render: () => h('div', { id: wrapperId }, render()),
+    }),
+    overrideOptionsFn(options, vueApp) {
+      const rootId = vueApp._container?.id
+      if (rootId) {
+        options.container ??= document.getElementById(rootId) ?? undefined
+      }
+    },
     suspendedHelperName,
     clonedComponentName,
     stubRouterLink: false,
@@ -62,5 +75,12 @@ export async function render<T>(
     await nextTick()
   }
 
+  // Unwrap render wrapper div element
+  const wrapperEl = document.getElementById(wrapperId)!
+  const unwrappedNodes = [...wrapperEl.childNodes]
+  wrapperEl.replaceWith(...unwrappedNodes)
+
+  umountedFns.push(() => unwrappedNodes.forEach(c => c.remove()))
+
   return wrapper
 }