原始碼測試

Vitest 提供了一種在原始碼中與實作程式碼並行執行測試的方法，類似於 Rust 的模組測試。

這種方式讓測試與實作程式碼共享相同的閉包，因此能夠針對私有狀態進行測試，而無需將其匯出。同時，它也為開發帶來更快速的反饋迴圈。

設定

首先，在原始檔的末尾加入一個 if (import.meta.vitest) 區塊，並在其中編寫測試。例如：

// src/index.ts

// 實作程式碼
export function add(...args: number[]) {
  return args.reduce((a, b) => a + b, 0);
}

// 原始碼內測試套件 (In-source test suites)
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;
  it('add', () => {
    expect(add()).toBe(0);
    expect(add(1)).toBe(1);
    expect(add(1, 2, 3)).toBe(6);
  });
}

更新 Vitest 的 includeSource 配置，以包含 src/ 目錄下的檔案：

// vite.config.ts
/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    includeSource: ['src/**/*.{js,ts}'], 
  },
});

然後您就可以開始測試了！

$ npx vitest

生產環境建置

為了在生產環境建置時移除測試程式碼，你需要在設定檔案中設定 define 選項，讓建置工具執行無用程式碼消除 (dead code elimination)。例如，在 Vite 中：

// vite.config.ts
/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    includeSource: ['src/**/*.{js,ts}'],
  },
  define: {
    'import.meta.vitest': 'undefined', 
  }, 
});

其他建置工具

unbuild

// build.config.ts
import { defineBuildConfig } from 'unbuild';

export default defineBuildConfig({
  replace: {
    'import.meta.vitest': 'undefined', 
  }, 
  // other options
});

了解更多：unbuild

rollup

// rollup.config.js
import replace from '@rollup/plugin-replace'; 

export default {
  plugins: [
    replace({
      'import.meta.vitest': 'undefined', 
    }), 
  ],
  // other options
};

了解更多：Rollup

TypeScript

要獲得對 import.meta.vitest 的 TypeScript 支援，請將 vitest/importMeta 加入你的 tsconfig.json 檔案中的 types 陣列：

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "vitest/importMeta"
    ]
  }
}

參考 test/import-meta 以獲取完整範例。

備註

此功能可能適用於以下情況：

• 小範圍函數或工具的單元測試
• 原型設計
• 內聯斷言

對於更複雜的測試，例如元件或 E2E 測試，建議使用獨立的測試檔案。