在 Vitest 中，definePageMeta 将如何被 Mocked？

Question

我正在尝试使用Vitest为我的应用程序编写 UT，该应用程序在 Vue 之上有 Nuxt。

definePageMeta但当我尝试模拟时，我变得不确定test.vue。

这是我的组件 test.vue-

<script setup lang="ts">
definePageMeta({
  layout: 'xyz',
  title: 'test component',
});
</script>

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

这是我的 UT 文件，命名test.spec.ts如下 -

import { describe, expect, it } from 'vitest';

import Index from '../pages/test.vue';
import { mount } from '@vue/test-utils';

describe('renders the test component', () => {
  it('renders properly', () => {
    const wrapper = mount(Index);
    expect(wrapper.text()).toContain('Hello Vitest');
  });
});

这是我收到的错误 -

Answer 1

答案可以在这里找到 stackoverflow 问题

基本上导入这个： import {definePageMeta } from '#imports'

将此resolve.alias添加到vitest.config.js以及setupFiles中

export default defineConfig({
 test: {
    setupFiles: 'setup-tests.ts',
  },
  resolve: {
    alias: {
       '#imports': '<rootDir>/.nuxt/imports.d.ts',
    }
  }
})

最后将其添加到 setup-tests.js

vi.mock('#imports', () => ({
  definePageMeta: (meta: any) => {},
}))

请点击上面的链接以获取更深入的信息