ReferenceError：definePageMeta 未定义

Question

描述：

在我的 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”
• “维斯特”：“^0.32.2”
• “jsdom”：“^22.1.0”
• “@vue/test-utils”：“^2.4.0”

这是我的页面代码：

<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.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'],
    },
  },
})

感谢您的支持。

Answer 1

我也有同样的问题。我使用“导出默认”代码变体而不是“definePageMeta”：

<script lang="ts">
export default {
  layout: 'no-header',
}
</script>

我不太确定为什么这有效，但也许有人可以添加提示。