Vue3+Nuxt3项目Vitest测试报错：definePageMeta未定义

问题描述 #

在Vue 3 + Nuxt 3项目中使用Vitest执行测试时，出现以下报错：

ReferenceError: definePageMeta is not defined
 - /pages/client/login.vue:869:5
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7190:25
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7151:36
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5555:7
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5521:9
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5007:11
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5664:11
 - /node_modules/@vue/reactivity/dist/reactivity.cjs.js:182:19
 - /node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5770:51
      
undefined

版本信息 #

• "nuxt": "^3.5.2"
• "vitest": "^0.32.2"
• "jsdom": "^22.1.0"
• "@vue/test-utils": "^2.4.0"

相关代码 #

页面组件（pages/client/page.vue） #

<template>
  <p>My page</p>
</template>
<script lang="ts" setup>
definePageMeta({
  layout: 'layout',
  middleware: 'authorized',
})
</script>

测试文件（mytest.spec.ts） #

import { describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import setupTest from 'tests/setupTest'
import Page from 'pages/client/page.vue'

setupTest()

describe('Page', () => {
  it('is a Vue instance', () => {
    expect(Page).toBeTruthy()
    const wrapper = mount(Page)
  })
})

Vitest配置（vitest.config.js） #

import { defineConfig } from 'vite'
import viteTsconfigPaths from 'vite-tsconfig-paths'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    viteTsconfigPaths(),
    AutoImport({
      imports: ['vue'],
      dirs: ['composables', 'components', 'utils', 'stores', 'pages'],
    }),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: {
      provider: 'istanbul',
      reporter: ['text', 'json', 'html'],
    },
  },
})

definePageMeta是Nuxt 3专属的编译时API，Vitest默认环境不会自动注入该全局函数，以下是两种可行解决方式：

方案1：全局模拟definePageMeta #

修改Vitest配置，通过初始化文件注入模拟函数：

1. 更新vitest.config.js，添加测试初始化文件配置：

import { defineConfig } from 'vite'
import viteTsconfigPaths from 'vite-tsconfig-paths'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    viteTsconfigPaths(),
    AutoImport({
      imports: ['vue'],
      dirs: ['composables', 'components', 'utils', 'stores', 'pages'],
    }),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    // 指定测试初始化文件
    setupFiles: ['./tests/setup-vitest.js'],
    coverage: {
      provider: 'istanbul',
      reporter: ['text', 'json', 'html'],
    },
  },
})

2. 在tests目录下创建setup-vitest.js，写入模拟代码：

// 模拟Nuxt的definePageMeta全局函数
global.definePageMeta = () => {}

方案2：使用Nuxt官方测试工具（推荐） #

Nuxt提供的@nuxt/test-utils会自动适配Nuxt专属API，无需手动模拟：

1. 安装依赖：

npm install -D @nuxt/test-utils

2. 更新测试文件mytest.spec.ts：

import { describe, expect, it } from 'vitest'
import { mount, setup } from '@nuxt/test-utils'
import Page from 'pages/client/page.vue'

describe('Page', async () => {
  // 初始化Nuxt测试环境
  await setup({ server: true })

  it('is a Vue instance', async () => {
    const wrapper = await mount(Page)
    expect(wrapper.vm).toBeTruthy()
  })
})

3. 替换vitest.config.js为Nuxt兼容配置：

import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
})

内容的提问来源于stack exchange，提问作者Phan Ly Huynh