跳至主要内容

01｜Vitest 是什麼？為什麼要用它？

系列文章：從零學會 Vitest — 第 1 篇，共 8 篇

測試是什麼？為什麼要寫？​

想像你剛寫好一個計算折扣的函式，你在瀏覽器上手動試了幾次，看起來沒問題，就推上去了。

結果三週後，同事改了某個地方，折扣突然算錯，而且沒有人發現，直到客訴進來……

這就是「沒有測試」的代價。

測試（Test）是一段程式碼，專門用來「確認你的程式有沒有照你預期的方式運作」。你寫好測試之後，每次改程式，只要跑一次測試，就能立刻知道有沒有東西壞掉。

你的程式碼 ──執行──▶ 測試 ──比對結果──▶ ✅ 通過 / ❌ 失敗

測試帶來的好處：

  • 安心重構：改程式不用擔心不知道哪裡壞掉
  • 活文件：測試本身就是「這段程式應該怎麼用」的說明書
  • 快速除錯：測試失敗時，馬上知道哪個功能出了問題

認識 Vitest​

Vitest 是一個現代化的 JavaScript / TypeScript 測試框架。

它由 Vite 團隊開發，專門為使用 Vite 作為建置工具的專案設計，但也可以用在一般的 Node.js 專案。

官網：https://vitest.dev

Vitest 的幾個特色​

1. 速度非常快

Vitest 使用和 Vite 一樣的模組解析方式，不需要額外編譯，測試啟動和執行的速度都快很多。

2. 設定超簡單

如果你已經有 vite.config.ts，Vitest 幾乎不需要額外設定，直接就能用。

3. 語法和 Jest 幾乎一樣

如果你以前寫過 Jest，切換到 Vitest 非常容易，大部分的寫法都相同。

4. 原生支援 TypeScript 和 ESM

不需要額外安裝 Babel 或 ts-jest，直接支援現代語法。

5. 內建 UI 介面

可以開啟一個漂亮的網頁介面，讓你用視覺化方式看測試結果。

Vitest vs Jest：差在哪裡？​

Jest 是目前最廣泛使用的 JavaScript 測試框架。Vitest 是後起之秀，你可能會想問：那我要用哪個？

比較項目JestVitest
誕生年份20142022
開發團隊Meta（Facebook）Vite 團隊
啟動速度較慢非常快
Vite 專案整合需要額外設定幾乎零設定
TypeScript 支援需要 ts-jest原生支援
ESM 支援有問題，需設定原生支援
語法相容性—大部分與 Jest 相容
生態系非常成熟快速成長中

結論：

  • 新專案用 Vite？👉 選 Vitest，設定最省事
  • 舊專案已經用 Jest？👉 可以繼續用，沒有非換不可
  • 想試試看更快的測試體驗？👉 遷移到 Vitest 成本很低

測試有哪些種類？​

在繼續之前，先認識三種常見的測試類型，之後學習時會一直看到這些名詞。

單元測試（Unit Test）​

測試一個函式或一小段邏輯是否正確運作，不依賴外部系統。

測試對象：一個計算金額的函式
輸入：100（原價）, 0.8（折扣）
預期輸出：80

這是最基礎、也最常見的測試類型。Vitest 最常用來做這種測試。

整合測試（Integration Test）​

測試多個模組合作時，有沒有照預期運作。比如：資料庫存取 + 業務邏輯一起測。

端對端測試（E2E Test）​

模擬真實使用者操作瀏覽器的流程，從頭到尾跑一遍。需要搭配 Playwright 或 Cypress 等工具。

本系列文章主要聚焦在單元測試，這是學習測試的最佳起點。

第一篇小結​

  • 測試讓你有信心改程式，不怕改壞東西
  • Vitest 是現代、快速、對 Vite 友善的測試框架
  • Vitest 語法和 Jest 幾乎一樣，容易上手
  • 本系列從最基礎的單元測試開始學起

下一篇預告​

👉 第 2 篇：環境安裝與第一個測試

我們會實際安裝 Vitest、設定好環境，並寫出你人生中第一個自動化測試，親眼看到 ✅ 通過的樣子。

本系列文章共 8 篇，適合 JavaScript / TypeScript 初學者。 如果你已經有 Vite 專案，可以直接從第 2 篇開始。