使用Nuxt 3使用useNuxtApp使用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 },
}))