在 Vitest 中，definePageMeta 将如何被模拟？答案

【问题标题】：How would definePageMeta will be Mocked in Vitest?在 Vitest 中，definePageMeta 将如何被模拟？
【发布时间】：2022-10-05 09:58:13
【问题描述】：

我在尝试维泰斯特为我的应用程序编写 UT，该应用程序在 Vue 顶部有 Nuxt。

但是当我试图模拟test.vue 时，我得到definePageMeta 未定义。

这是我的零件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');
  });
});

这是我得到的错误 -

【问题讨论】：

标签： vue.js nuxt.js vuejs3 nuxtjs3 vitest

【解决方案1】：

答案可以在here stackoverflow question找到

基本上导入这个： 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) => {},
}))

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

【讨论】：