如何在Jest/Nuxt页面测试中引入Nuxt Layout组件

可以实现你需要的带布局挂载页面的测试需求，以下是两种常用的落地方式：

方法1：手动嵌套布局+页面组件（全版本通用，无额外依赖） #

手动将目标页面组件作为默认插槽内容传入布局组件，再对组合后的整体执行挂载，即可同时拿到布局和页面的DOM结构。

import { mount } from '@vue/test-utils'
import TargetPage from '~/pages/target-page.vue'
import UsedLayout from '~/layouts/default.vue' // 替换为页面对应的布局文件

test('测试页面与布局组件交互逻辑', () => {
  const wrapper = mount(UsedLayout, {
    slots: {
      default: TargetPage
    },
    global: {
      stubs: {
        // 不需要测试的全局组件可在此处打桩
        NuxtLink: true
      }
      // 其他全局配置：mock的vuex、i18n、路由实例可在此传入
    }
  })

  // 可同时对布局、页面的元素和交互做断言
  expect(wrapper.find('[data-testid="layout-nav"]').exists()).toBe(true)
  expect(wrapper.find('[data-testid="page-content"]').exists()).toBe(true)
})

方法2：使用@nuxt/test-utils官方工具（Nuxt3推荐） #

Nuxt3官方测试工具会自动读取页面definePageMeta中配置的布局，无需手动嵌套，更贴近Nuxt实际运行逻辑。

import { mountSuspended } from '@nuxt/test-utils/runtime'
import TargetPage from '~/pages/target-page.vue'

test('测试带布局的页面交互', async () => {
  const wrapper = await mountSuspended(TargetPage, {
    route: '/target-page-path', // 传入页面对应路由
    // 其他全局配置可在此传入
  })

  // 直接测试布局交互对页面的影响
  await wrapper.find('[data-testid="sidebar-toggle"]').trigger('click')
  expect(wrapper.find('.page-wrapper').classes()).toContain('sidebar-shrink')
})

注意事项 #

• 若页面指定了非默认布局，手动嵌套时需要传入对应布局文件；使用官方工具时会自动读取配置，无需额外调整
• 测试前需提前mock布局、页面依赖的接口请求、全局状态、路由参数，避免挂载失败
• 建议给核心交互元素加data-testid标识，避免选择器受样式、结构改动影响

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