iT邦幫忙

2026 iThome 鐵人賽

DAY 13
0

day13_title

前言

在 ts/js 的專案中,測試框架會直接影響開發體驗還有 CI 的執行效率
在遠古時代,普遍大家都用 Jest 作為業界的預設選項,(雖然我在業界普遍都是用 vitest)

我當年在推 vitest 的時候,大家都還在用 Jest 在那時候, vitest 基本上效能上是碾壓 Jest 的
隨著時間過去,也越來越多人用 vitest 作為預設選項,如今我特別推 bun:test

主要幾個理由包含著,效能又更碾壓更快速以外,他也記取前人的教訓把這一切做得更好

開始 bun:test

先備知識

因為我們使用 bun 基本上 跑測試不用額外安裝任何東西

bun test

一個簡單的指令就可以跑測試,基本上他會掃我們的專案目錄有 *.test.ts, *.spec.ts, *.test.js 的去跑

我們這裡就寫個簡單的測試

index.test.ts

import { describe, test, expect } from 'bun:test';

const add = (a: number, b: number): number => {
  return a + b;
}

describe('add', () => {
  test('測試兩個數字相加', () => {
    expect(add(12, 13)).toBe(25);
  });

  test('負數相加', () => {
    expect(add(-2, -3)).toBe(-5);
  });
});

測試成功的樣子

test_01

如果測試失敗長這樣(這裏故意把加法加錯)

test_fail_01

常用 api

常見 method

我們這裡會展示幾個常用的像是 非同步的測試, mock, beforeEach, afterEach, beforeAll, afterAll
這幾個在 jest, vitest 都是差不多的

import { beforeAll, afterAll, beforeEach, describe, test, afterEach, mock, expect } from 'bun:test';

describe('', () => {
  beforeAll(() => {
    console.log('\x1b[031m這個會在測試前執行!😛!\x1b[0m');
    console.log('===== start =====');
  });

  beforeEach(() => {
    console.log('\x1b[032m這個會在每個測試前執行!🧪!\x1b[0m');
    console.log('===== [console] start =====');
  });

  test('mock 測試一下', () => {
    // 這裏 mock 一個會回傳 100 的 function
    const mockFn = mock(() => 100);
    expect(mockFn()).toBe(100);
    expect(mockFn).toHaveReturnedTimes(1) // 這裏測試有沒有呼叫這個 function 一次
  });

  test('測試一下非同步🕑', async () => {
    const result = await Promise.resolve('done')
    expect(result).toBe('done');
  });

  afterEach(() => {
    console.log('===== [console] end =====');
    console.log('\x1b[033m這個會在每個測試後執行!✅\x1b[0m');
  });

  afterAll(() => {
    console.log('\x1b[031m這個會在測試後執行!⭐️!\x1b[0m');
    console.log('===== end =====');
  });

  // test.todo('待完成的測試🚧', () => {
  //
  // })
});

我們把一切會用到的用起來看看,看以下結果

測試結果

三者架構的比較

在配置難度上

Jest(複雜,難) -> vitest(通常會寫 vite.config.ts就會寫 vitest 配置,難度:普) -> bun(內建的幾乎不用配置)

bun 勝出!

效能上

Jest(好慢好慢) -> vitest(大部分的狀況,神快) -> bun(比神快還快)

bun 又勝出

成熟度與教學文

Jest 比較老,Jest 勝出

優劣比較表

面向 Jest Vitest bun:test
生態系成熟度 最成熟,最多教學/套件相容 快速追趕中 最不成熟
Jest API 相容性 原生 高度相容(近乎 find-replace 遷移) 部分相容,複雜 mock/workspace 場景較弱
設定 需要較多設定,尤其 TS/ESM 若已有 vite.config 幾乎零設定 零設定,內建於 Bun
Coverage 工具 成熟 成熟(V8/Istanbul) 較弱/有落差
瀏覽器/DOM 測試 需 jsdom 有 Browser Mode(真實 Chromium) 較弱
穩定性/flake rate 最穩定 穩定 相對較不穩定,尤其大型 monorepo
適用場景 既有大型 Jest 專案、需要最大生態系穩定性 新專案、Vite/React/Vue/Svelte 生態、多數情境下的預設選擇 專案本身就跑在 Bun runtime、測試相對單純(工具函式、API handler)

決策鏈

  • 新專案、用 Vite 生態(React/Vue/Svelte):選 Vitest
  • 既有大型 Jest 專案、依賴大量 Jest 專屬 mock/plugin留在 Jest -> 能跑就不要動的概念🤪
  • 專案跑在 Bun 上,測試偏簡單:可用 bun:test,大型 monorepo 或需複雜 mocking/coverage 則需謹慎評估

結論

三個框架,一句話:Jest 求穩、Vitest 求快又不失穩、bun:test 求更快但要有點膽識。
如果你的專案還在 Bun 上跑得順順的,bun:test 值得一試——零設定、速度感人

但這篇只是起點,bun:test 真正有趣的地方還在後面:mock 的極限在哪、跟現有 CI 整合會踩什麼雷、效能優勢到底能不能撐過真實世界的複雜測試場景……


上一篇
Bun Shell:用 JS 寫 Shell Script,跨平台不頭痛
下一篇
Bun Macros:編譯時執行程式碼的黑魔法(上篇- 基礎篇)
系列文
不只是快 —— Bun 30 天:從底層架構、全套工具鏈到生產部署19
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言