feat: support injects, global properties (and routing!)

packages/nuxt-vitest/src/config.ts

@@ -87,7 +87,7 @@ export async function getVitestConfigFromNuxt(
         transform(code, id) {
           if (id.match(/nuxt3?\/.*\/entry\./)) {
             return code.replace(
-              /(?<!app = )entry\(\)\.catch/,
+              /(?<!vueAppPromise = )entry\(\)\.catch/,
               'Promise.resolve().catch'
             )
           }

packages/vitest-environment-nuxt/package.json

@@ -53,6 +53,7 @@
   },
   "peerDependencies": {
     "vitest": "^0.24.5 || ^0.26.0 || ^0.27.0 || ^0.28.0 || ^0.29.0 || ^0.30.0",
+    "vue-router": "^4.0.0",
     "vue": "^3.2.45"
   }
 }

packages/vitest-environment-nuxt/src/index.ts

@@ -42,6 +42,7 @@ export default <Environment>{
       class IntersectionObserver {
         observe() {}
         unobserve() {}
+        disconnect() {}
       }
 
     const h3App = createApp()

packages/vitest-environment-nuxt/src/runtime/mount.ts

@@ -1,14 +1,22 @@
 import { mount, VueWrapper } from '@vue/test-utils'
 import { h, DefineComponent, Suspense, nextTick } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 
 import { RouterLink } from './components/RouterLink'
 
 // @ts-expect-error virtual file
 import NuxtRoot from '#build/root-component.mjs'
+import { useRouter } from '#imports'
+
+interface MountSuspendedOptions {
+  route?: RouteLocationRaw
+}
 
 export async function mountSuspended<
   T extends DefineComponent<any, any, any, any>
->(component: T) {
+>(component: T, options?: MountSuspendedOptions) {
+  // @ts-expect-error untyped global __unctx__
+  const vueApp = globalThis.__unctx__.get('nuxt-app').tryUse().vueApp
   return new Promise<VueWrapper<InstanceType<T>>>(resolve => {
     const vm = mount(
       {
@@ -17,11 +25,24 @@ export async function mountSuspended<
           h(
             Suspense,
             { onResolve: () => nextTick().then(() => resolve(vm as any)) },
-            { default: () => h(component) }
+            {
+              default: () =>
+                h({
+                  async setup() {
+                    const router = useRouter()
+                    await router.replace(options?.route || '/')
+                    return () => h(component)
+                  },
+                }),
+            }
           ),
       },
       {
         global: {
+          config: {
+            globalProperties: vueApp.config.globalProperties,
+          },
+          provide: vueApp._context.provides,
           components: {
             RouterLink,
           },

playground/app.vue

@@ -1,8 +1,10 @@
 <template>
   <LazySomeComponent />
   <GlobalComponent />
-  <!-- TODO: <NuxtPage /> -->
-  <NuxtLink to="/test">Test link</NuxtLink>
+  <NuxtPage />
+  <NuxtLink to="/test">
+    Test link
+  </NuxtLink>
 </template>
 
 <script setup>

playground/pages/[...slug].vue

@@ -1,3 +1,9 @@
 <template>
   <div>{{ $route.fullPath }}</div>
 </template>
+
+<script setup>
+definePageMeta({
+  slug: 'foo',
+})
+</script>

playground/tests/nuxt/index.spec.ts

@@ -24,13 +24,19 @@ describe('client-side nuxt features', () => {
     expect(app.$router).toBeDefined()
   })
 
-  it.todo('defaults to index page', async () => {
+  it('defaults to index page', async () => {
     expect(useRoute().matched[0].meta).toMatchInlineSnapshot(`
-    {}
-  `)
-    expect(useRoute().fullPath).toMatchInlineSnapshot('"/blank"')
+      {
+        "slug": "foo",
+      }
+    `)
     // TODO: should it be possible to push to other routes?
   })
+
+  it('allows pushing to other pages', async () => {
+    await useRouter().push('/something')
+    expect(useRoute().fullPath).toMatchInlineSnapshot('"/something"')
+  })
 })
 
 describe('test utils', () => {
@@ -39,8 +45,8 @@ describe('test utils', () => {
     expect(component.html()).toMatchInlineSnapshot(`
       "<div>This is an auto-imported component</div>
       <div> I am a global component </div>
-      <!-- TODO: <NuxtPage /> -->
-      <a href=\\"/test\\">Test link</a>"
+      <div>Index page</div>
+      <a href=\\"/test\\"> Test link </a>"
     `)
   })
 
@@ -54,7 +60,13 @@ describe('test utils', () => {
     )
   })
 
-  // TODO: make working with router - currently router components are not
-  // registered and route symbol is not injected
-  it.todo('handles nuxt routing')
+  it('handles nuxt routing', async () => {
+    const component = await mountSuspended(App, { route: '/test' })
+    expect(component.html()).toMatchInlineSnapshot(`
+      "<div>This is an auto-imported component</div>
+      <div> I am a global component </div>
+      <div>/</div>
+      <a href=\\"/test\\"> Test link </a>"
+    `)
+  })
 })

playground/tests/nuxt/mock-component-1.spec.ts

@@ -16,7 +16,7 @@ it('should mock', async () => {
   expect(component.html()).toMatchInlineSnapshot(`
     "<div>Mocked</div>
     <div> I am a global component </div>
-    <!-- TODO: <NuxtPage /> -->
-    <a href=\\"/test\\">Test link</a>"
+    <div>Index page</div>
+    <a href=\\"/test\\"> Test link </a>"
   `)
 })

playground/tests/nuxt/mock-component-2.spec.ts

@@ -9,7 +9,7 @@ it('should mock', async () => {
   expect(component.html()).toMatchInlineSnapshot(`
     "<div> Mocked 1 * 2 = 2</div>
     <div> I am a global component </div>
-    <!-- TODO: <NuxtPage /> -->
-    <a href=\\"/test\\">Test link</a>"
+    <div>Index page</div>
+    <a href=\\"/test\\"> Test link </a>"
   `)
 })