Vitest 设置 Nuxt 和 pinia 自动导入

Question

我正在尝试设置vitest+，@vue/test-utils但我无法测试一些使用ref（Vue）或useCookie（Nuxt）的组件，我对 Pinia 也有同样的问题，我在 nuxt.config.js 中全局导入 2 个函数，如下所示

[
  '@pinia/nuxt',
  {
    autoImports: ['defineStore', 'acceptHMRUpdate'],
  }
] 

这是我的 vitest.config.js 设置：

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import AutoImport from 'unplugin-auto-import/vite'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'],
      dirs: ['./composables/']
    })
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: {
      provider: 'c8',
      reporter: 'html',
      reportsDirectory: './coverage'
    },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './')
    }
  },
})

我试图测试的组件是这样的：

<script setup>
import AButton from '~/components/atoms/a-button/a-button.vue'
...

defineProps({
  label: {
    type: String,
    required: true
  },
})

const show = ref(false)

const Squad = useCookie('squad', { maxAge: 60 * 60 * 24 * 7 })
const appStore = useAppStore()

在 Nuxt 3 中，正如您所知，您不知道import { ref } from vue或者... useCookie from..它们是自动导入的但vitest无法识别它们，我看到了几个问题，但没有一个答案可以解决我的问题。

这些是一些：

• 在 vitest 中自动导入 vue 反应系统，用于测试 Nuxt 3 和 vitest 中的可组合项
• 使用 vitest 测试 Nuxt3 内的 Pinia 存储会抛出“useRuntimeConfig”未定义

Answer 1

我对 refs 和 Nuxt 3 有同样的问题，我通过使用 unplugin-auto-import/vite 解决了它

安装后，将 AutoImport 配置添加到vitest.config.ts：

import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";

export default {
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue"],
    }),
  ],
  test: {
    globals: true,
    environment: "jsdom",
  },
  coverage: {
    all: true,
  },
};