如何在Vitest中使用全局变量？Vue遗留项目测试遇阻求助

以下是几个可行的解决步骤，按优先级尝试：

1. 确保Vitest配置正确加载setup文件 #

首先检查你的vitest.config.ts是否正确指定了setup文件，很多时候问题出在setup文件根本没被执行：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom',
    globals: true,
    // 明确指定setup文件路径
    setupFiles: ['./vitest.setup.ts'],
  }
})

2. 在setup文件中正确挂载config到全局对象 #

不要用const config = {}这种局部定义，要直接挂载到globalThis（happy-dom环境下的全局对象是globalThis，而非Node.js的global）：

// vitest.setup.ts
globalThis.config = {
  // 填入测试需要的配置项，比如和生产环境一致的结构
  apiBaseUrl: 'https://test.example.com',
  appName: 'Test App'
}

如果用populateGlobal，也要针对globalThis操作：

// vitest.setup.ts
import { populateGlobal } from '@vitest/spy'

populateGlobal(globalThis, {
  config: {
    // 测试配置项
  }
})

3. 修复TypeScript类型提示（避免编辑器报错） #

在项目根目录或types文件夹下创建vitest-env.d.ts文件，补充全局类型定义：

// vitest-env.d.ts
declare global {
  interface Window {
    config: {
      // 这里定义你的config结构，比如：
      apiBaseUrl: string
      appName: string
    }
  }

  interface GlobalThis {
    config: Window['config']
  }
}

export {}

然后确保tsconfig.json的include数组包含这个文件：

{
  "include": ["src/**/*", "vitest.setup.ts", "vitest-env.d.ts"]
}

4. 单测试文件临时挂载（全局setup失效时的应急方案） #

如果全局配置还是不生效，可以在单个测试文件中手动挂载：

// 你的测试文件.spec.ts
beforeAll(() => {
  globalThis.config = { /* 测试配置 */ }
})

afterAll(() => {
  // 测试结束后清理全局变量，避免影响其他测试
  delete globalThis.config
})

test('example test', () => {
  expect(config.apiBaseUrl).toBe('https://test.example.com')
})

内容的提问来源于stack exchange，提问作者Ricardo de Vries