Nuxt 和 pinia 的 Vitest 设置自动导入

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` not defined

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,
  },
};