使用 useNuxtApp 和 Nuxt 3 使用 Vitest 测试组件

Question

我想使用

useNuxtApp

可组合项测试组件。 这是组件(

MyComponent.vue

):

<template>
  <div class="flex justify-between">
    <span>{{ $fmt(12) }}</span>
  </div>
</template>

<script lang="ts" setup>
const { $fmt } = useNuxtApp()
</script>

$fmt

是

plugins

文件夹中的插件。

问题是当我尝试使用

MyComponent.vue

测试

vitest

时，测试未开始并出现此错误：

ReferenceError: useNuxtApp is not defined

我不知道如何模拟

useNuxtApp

可组合项

Answer 1

解决方案是在组件中导入

useNuxtApp

：

<template>
  <div class="flex justify-between">
    <span>{{ $fmt(12) }}</span>
  </div>
</template>

<script lang="ts" setup>
import { useNuxtApp } from '#app'
const { $fmt } = useNuxtApp()
</script>

在

#app

中添加

#head

和

vitest.config.js

别名，以将

useNuxtApp

导入到您的测试文件中：

import path from 'path'
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/unit/setup/index.ts',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '.'),
      '#app': path.resolve(
        __dirname,
        './node_modules/nuxt/dist/app/index.d.ts'
      ),
      '#head': path.resolve(
        __dirname,
        './node_modules/nuxt/dist/app/index.d.ts'
      ),
    },
  },
}

最后你可以在测试文件中模拟

useNuxtApp

：

import { vi } from 'vitest'
import * as nuxt from '#app'
import { currency } from '@/plugins/utils/fmt-util'

// @ts-ignore
vi.spyOn(nuxt, 'useNuxtApp').mockImplementation(() => ({
  $fmt: { currency },
}))

Answer 2

您可以使用存根来代替嘲笑：

vi.stubGlobal("useNuxtApp", () => vi.fn(() => ({ $fmt: vi.fn() })));