Nuxt3页面测试：useAsyncData Mock生效但onMounted未触发

问题说明 #

• 测试包含useAsyncData和onMounted的Nuxt3页面时，已成功MockuseAsyncData，但页面未挂载导致onMounted钩子无法触发
• 试过flushPromises、nextTick等方法都没用，页面在yarn dev环境能正常运行

可行解决方案 #

1. 用完整挂载替代浅挂载 #

如果使用Vue Test Utils，别用shallowMount，改用mount。浅挂载不会完整初始化组件，会跳过部分生命周期钩子，包括onMounted。

2. 用Nuxt官方测试工具搭建环境 #

直接用@nuxt/test-utils提供的setupNuxt初始化测试环境，它会自动处理Nuxt的上下文、生命周期等依赖，避免手动模拟遗漏。示例代码如下：

import { mount } from '@vue/test-utils'
import { setupNuxt } from '@nuxt/test-utils'
import Index from '~/pages/index.vue'

describe('Index Page', () => {
  beforeEach(async () => {
    // 初始化Nuxt测试环境
    await setupNuxt()
  })

  it('should trigger onMounted hook', async () => {
    const mockMountedFn = vi.fn()
    // 监听onMounted调用
    vi.spyOn(vue, 'onMounted').mockImplementation(mockMountedFn)
    
    // 完整挂载组件，同时Mock useAsyncData
    const wrapper = mount(Index, {
      global: {
        mocks: {
          useAsyncData: vi.fn(() => ({ 
            data: ref('mock content'),
            pending: ref(false)
          }))
        }
      }
    })
    
    await wrapper.vm.$nextTick()
    await flushPromises()
    
    expect(mockMountedFn).toHaveBeenCalled()
  })
})

3. 检查useAsyncData的Mock结构 #

确保Mock的useAsyncData返回符合Nuxt要求的结构，比如包含data（ref类型）、pending等属性。如果Mock返回的结构不对，组件可能渲染失败，进而跳过onMounted。

重要提示 #

不要手动模拟Nuxt的核心API和上下文，官方测试工具已经封装好了这些逻辑，用它能避免大部分生命周期相关的测试问题。

内容的提问来源于stack exchange，提问作者Necrogoru