vue.js 如何定义PageMeta将在Vitest中被嘲笑?

m1m5dgzv  于 2023-02-19  发布在  Vue.js
关注(0)|答案(1)|浏览(239)

我尝试Vitest为我的应用程序编写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');
  });
});

这是我得到的错误-

lsmepo6l

lsmepo6l1#

可以找到答案here stackoverflow question
基本上导入以下内容:从“#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) => {},
}))

点击上面的链接,了解更多详细信息

相关问题