definePageMeta将如何在Vitest中被嘲笑？

Question

我正在尝试Vitest为我的应用程序编写UTs，该应用程序在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>

下面是名为test.spec.ts的UT文件，如下所示-

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

答案可以找到here stackoverflow question

基本上导入以下内容:从'#imports‘导入{ definePageMeta }(这将取消自动导入功能，但很好)

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

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

最后，将其添加到set-tests.js中。

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

请按照上面的链接获取更多的深度信息。