入門

概觀

Vitest 是由 Vite 提供技術支援的下一代測試框架。

您可以在 為何選擇 Vitest 區段中進一步了解此專案背後的原理。

線上體驗 Vitest

您可以在 StackBlitz 上線上體驗 Vitest。它直接在瀏覽器中執行 Vitest，幾乎與本機設定相同，但不需要在您的機器上安裝任何東西。

將 Vitest 加入您的專案

透過影片了解如何安裝

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

提示

Vitest 1.0 需要 Vite >=v5.0.0 和 Node >=v18.0.0

建議您使用上述方法之一，在您的 package.json 中安裝 vitest 副本。不過，如果您希望直接執行 vitest，可以使用 npx vitest（npx 命令附帶 npm 和 Node.js）。

npx 命令會執行命令，無論是來自本地的 node_modules/.bin，還是安裝命令執行所需的任何套件。預設情況下，npx 會檢查命令是否存在於 $PATH 或本機專案二進位檔中，並執行該命令。如果找不到命令，則會在執行之前安裝該命令。

撰寫測試

舉例來說，我們將撰寫一個簡單的測試，驗證將兩個數字相加的函式的輸出。

// sum.js
export function sum(a, b) {
  return a + b
}

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

提示

預設情況下，測試的檔名中必須包含「.test.」或「.spec.」。

接下來，若要執行測試，請將下列區段新增至您的 package.json

{
  "scripts": {
    "test": "vitest"
  }
}

最後，執行 npm run test、yarn test 或 pnpm test，視您的套件管理員而定，Vitest 會列印此訊息

✓ sum.test.js (1)
  ✓ adds 1 + 2 to equal 3

Test Files  1 passed (1)
    Tests  1 passed (1)
  Start at  02:15:44
  Duration  311ms

深入瞭解 Vitest 的用法，請參閱 API 區段。

設定 Vitest

Vitest 的主要優點之一是與 Vite 的統一設定。如果存在，vitest 會讀取您的根目錄 vite.config.ts，以與外掛程式和設定相符，就像您的 Vite 應用程式一樣。例如，您的 Vite resolve.alias 和 外掛程式 設定會立即生效。如果您希望在測試期間使用不同的設定，您可以

• 建立 vitest.config.ts，它具有較高的優先順序
• 傳遞 --config 選項給 CLI，例如 vitest --config ./path/to/vitest.config.ts
• 在 defineConfig 上使用 process.env.VITEST 或 mode 屬性（如果未覆寫，將設為 test），以有條件地套用 vite.config.ts 中不同的設定

Vitest 支援與 Vite 相同的設定檔副檔名：.js、.mjs、.cjs、.ts、.cts、.mts。Vitest 不支援 .json 副檔名。

如果您沒有使用 Vite 作為您的建置工具，您可以使用設定檔中的 test 屬性來設定 Vitest

import {  } from 'vitest/config'

export default ({
  : {
    // ...
  },
})

提示

即使您自己不使用 Vite，Vitest 也在很大程度上依賴於它的轉換管道。因此，您也可以設定 Vite 文件 中所述的任何屬性。

如果您已經在使用 Vite，請在您的 Vite 設定中新增 test 屬性。您還需要在設定檔頂端使用 三斜線指令 新增對 Vitest 類型的參照。

/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...
  },
})

請參閱 設定參考 中的設定選項清單。

警告

如果您決定為 Vite 和 Vitest 設定兩個獨立的設定檔，請務必在您的 Vitest 設定檔中定義相同的 Vite 選項，因為它會覆寫您的 Vite 檔，而不是延伸它。您也可以使用 vite 或 vitest/config 項目中的 mergeConfig 方法將 Vite 設定與 Vitest 設定合併。

vitest.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config.mjs'

export default mergeConfig(viteConfig, defineConfig({
  test: {
    // ...
  }
}))

vite.config.mjs

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue()],
})

但是，我們建議您同時為 Vite 和 Vitest 使用同一個檔案，而不是建立兩個獨立的檔案。

工作區支援

使用 Vitest 工作區 在同一個專案中執行不同的專案設定。您可以在 vitest.workspace 檔案中定義一個清單，說明您的工作區包含哪些檔案和資料夾。該檔案支援 js/ts/json 副檔名。此功能非常適合單一儲存庫設定。

import {  } from 'vitest/config'

export default ([
  // you can use a list of glob patterns to define your workspaces
  // Vitest expects a list of config files
  // or directories where there is a config file
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // you can even run the same tests,
  // but with different configs in the same "vitest" process
  {
    : {
      : 'happy-dom',
      : './shared_tests',
      : 'happy-dom',
      : ['./setup.happy-dom.ts'],
    },
  },
  {
    : {
      : 'node',
      : './shared_tests',
      : 'node',
      : ['./setup.node.ts'],
    },
  },
])

命令列介面

在已安裝 Vitest 的專案中，您可以在您的 npm 腳本中使用 vitest 二進位檔，或直接使用 npx vitest 執行它。以下是預設的 Vitest 專案 npm 腳本

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

若要執行測試一次而不監控檔案變更，請使用 vitest run。您可以指定其他 CLI 選項，例如 --port 或 --https。若要取得 CLI 選項的完整清單，請在您的專案中執行 npx vitest --help。

進一步了解 命令列介面

IDE 整合

我們也提供了一個 Visual Studio Code 的官方擴充功能，以增強您使用 Vitest 進行測試的體驗。

從 VS Code 市集安裝

進一步了解 IDE 整合

範例

使用 Vitest 的專案

• unocss
• unplugin-auto-import
• unplugin-vue-components
• vue
• vite
• vitesse
• vitesse-lite
• fluent-vue
• vueuse
• milkdown
• gridjs-svelte
• spring-easing
• bytemd
• faker
• million
• Vitamin
• neodrag
• svelte-multiselect
• iconify
• tdesign-vue-next
• cz-git

使用未發布的提交

如果您無法等到新版本來測試最新功能，您需要將 vitest repo 克隆到您的本機，然後自行建置並連結它（需要 pnpm）

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # you can use your preferred package manager for this step

然後前往您使用 Vitest 的專案，並執行 pnpm link --global vitest（或您用來連結 vitest 的套件管理員）

社群

如果您有任何問題或需要協助，請在 Discord 和 GitHub 討論 中與社群聯繫。