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