Thiết kế website giá rẻ

Question

I have a simple Nuxt 3 layout component that I want to test in Vitest:

<!-- File: layouts/mount-suspended.vue -->
<template>
  <div>
    <h1>{{ isHydrating }}</h1>
    <NuxtPage />
  </div>
</template>

<script setup>
const nuxtApp = useNuxtApp() // auto-imported
const isHydrating = ref(nuxtApp.isHydrating)
</script>

And my Vitest test is as follows:

// File: layouts/tests/mount-suspended.test.js

// @vitest-environment nuxt
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
import { useRoute, useRouter } from 'vue-router'
import mountSuspendedLayout from '@/layouts/mount-suspended'

const mockRoute = {
  fullPath: '/seeded-test-a/courses',
  path: '/seeded-test-a/courses',
  params: {
    slug: 'seeded-test-a',
  },
}

vi.mock('vue-router')

mockNuxtImport('useNuxtApp', async () => {
  const actualUseNuxtApp = await vi.importActual('#app')
  return () => {
     return {
      ...actualUseNuxtApp.useNuxtApp(),
      isHydrating: true,
      deferHydration: () => {
        return () => {
          retVal.isHydrating.value = false
        }
      },
      hooks: {
        hookOnce: vi.fn(() => () => {}),
      },
    }
  }
})

describe('mountSuspended experiment', () => {
  let wrapper

  beforeEach(async () => {
    vi.mocked(useRoute).mockReturnValue(mockRoute)

    wrapper = await mountSuspended(mountSuspendedLayout, {
      global: {
        stubs: ['NuxtPage'],
      },
    })
  })

  it('is a component', () => {
    expect(wrapper.vm).toBeTruthy()
  }, 20000)
})

If I don’t mock useNuxtApp, then my test simply times out after 10 seconds, because it can’t complete whatever process it is trying to go through. When I mock useNuxtApp as I have done above, the timeout goes away but I get this error:

[Vue warn]: Component is missing template or render function. 
  at <MountSuspendedHelper> 
  at <Anonymous ref="VTU_COMPONENT" > 
  at <VTUROOT>

 ❯ layouts/tests/mount-suspended.test.js (1)
   ❯ mountSuspended experiment (1)
     × is a component
       ⠼ [ beforeEach ]

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  layouts/tests/mount-suspended.test.js > mountSuspended experiment > is a component
TypeError: Cannot read properties of undefined (reading 'beforeEach')
 ❯ Object.setup node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_@unocss+reset@0_fuoepch7xshvexerjkvadss7ra/node_modules/nuxt/dist/app/components/nuxt-root.vue:35:36
     33| 
     34| const nuxtApp = useNuxtApp()
     35| const onResolve = nuxtApp.deferHydration()
       |                                    ^
     36| if (import.meta.client && nuxtApp.isHydrating) {
     37|   const removeErrorHook = nuxtApp.hooks.hookOnce('app:error', onResolve)
 ❯ setup node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_typesc_bgcjl5dvzzs77rvj5u4ob6o3ty/node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:106:50
 ❯ callWithErrorHandling node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:195:19
 ❯ setupStatefulComponent node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7572:25
 ❯ setupComponent node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7533:36
 ❯ mountComponent node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5861:7
 ❯ processComponent node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5827:9
 ❯ patch node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5306:11
 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5971:11
 ❯ ReactiveEffect.run node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:181:19

After reviewing the error message above, I opened up the file at node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_@unocss+reset@0_fuoepch7xshvexerjkvadss7ra/node_modules/nuxt/dist/app/components/nuxt-root.vue:35:36 and found that on line 38 it says:

  useRouter().beforeEach(removeErrorHook)

It seems that useRouter() is returning undefined in this instance, hence the error Cannot read properties of undefined (reading 'beforeEach'). So I thought the solution would be to mock useRouter() but so far none of my attempts have been successful. I tried mocking it with vi.mock('vue-router') (and some additional code) but I noticed in the file where the error is occurring that it is importing an internal Nuxt version of the router:

import { useRoute, useRouter } from '../composables/router'

Both ChatGPT and Claude therefore suggested that I use vi.mock('nuxt/dist/app/composables/nuxt', ...) but that doesn’t help either.

All of this is to say, I can’t believe it’s so difficult to mock something so simple like a tiny call to useNuxtApp() as I’ve done here, when using mountSuspended in a test. It seems that when you need to start using mountSuspended() instead of mount(), this simple change significantly raises the bar when it comes to the amount of knowledge you have to have about Nuxt’s internals, all in order to write the most basic test for it!

Is it possible I am overlooking some sort of built-in utility for making this easier? Why would this simple situation present so many challenges? Am I even headed in the right direction with this?

Thiết kế website giá rẻ

Danh mục

Vitest errors out when using mountSuspended with a component that also uses useNuxtApp