How would definePageMeta will be Mocked in Vitest?

Question

I was trying Vitest to write UTs for my app which has Nuxt on the top of Vue.

But I am getting definePageMeta as undefined when trying to mock test.vue.

Here is my component test.vue -

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

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

Here is my UT file named test.spec.ts as follows -

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');
  });
});

Here is the Error I am getting -

Answer 1

the answer can be found here stackoverflow question

Basically import this: import { definePageMeta } from '#imports'

Add this resolve.alias to vitest.config.js, as well as the setupFiles

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

And finally add this to setup-tests.js

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

Follow the link above for more in-depth info