在 vitest 中自动导入 vue 反应系统，用于测试 Nuxt 3 和 vitest 中的可组合项

我在 Nuxt 3 中使用一些实用程序。vue 反应系统（ref, computed, ...) 也直接导入。然而，测试的情况并非如此。

运行规范文件导入./useBusinessValidation可组合抛出错误ReferenceError: ref is not defined

源文件./useBusinessValidation:

import { MaybeRef } from "@vueuse/core"

export const useBusinessValidation = <T>(rule: (payload: T) => true | string, payload: MaybeRef<T>) => {
  const validation = computed(() => rule(unref(payload)))

  const isValid = computed(() => validation.value === true)
  const errorMessage = computed(() => isValid.value ? undefined : validation.value as string)

  return {
    isValid,
    errorMessage
  }
}

规格文件useBusinessValidation.spec.ts:

import { useBusinessValidation } from "./useBusinessValidation"

describe('useBusinessValidation', async () => {
  it('should be valid with payload respecting the rule', () => {
    const rule = (x: number) => x > 0 ? true : `invalid ${x} number. Expected ${x} to be greater than 0.`
    const { isValid, errorMessage } = useBusinessValidation(rule, 0)

    expect(isValid.value).toBe(true)
    expect(errorMessage.value).toBe(undefined)
  });
})

and the vitest.config.ts

{
  resolve: {
    alias: {
      '~': '.',
      '~~': './',
      '@@': '.',
      '@@/': './',
      'assets': './assets',
      'public': './public',
      'public/': './public/'
    }
  },
  test: {
    globals: true,
    setupFiles: './test/setupUnit.ts',
    environment: 'jsdom',
    deps: { inline: [/@nuxt\/test-utils-edge/] },
    exclude: [
      'test/**/**.spec.ts',
      '**/node_modules/**',
      '**/dist/**',
      '**/cypress/**',
      '**/.{idea,git,cache,output,temp}/**'
    ]
  }
}

我也尝试过@vitejs/plugin-vue as

plugins: [Vue()]

在 vitest 配置中。但没有成功。

要在 vitest 中自动导入，请安装拔出自动导入 https://github.com/antfu/unplugin-auto-import.

然后，在 vitest.config.ts 中添加：

import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
...
  plugins: [
    AutoImport({
      imports: [
        'vue',
        // could add 'vue-router' or 'vitest', whatever else you need.
      ],
   }),
  ]
});