摘要

單元測試是針對程式碼中最小的可測試單元（如一個函式、一個元件）進行的測試。Vitest 是一個由 Vite 團隊打造的、與 Vite 無縫整合的極速單元測試框架。

定義與說明

在 Vue 中，我們通常會測試：一個組合式函數的邏輯是否正確。一個元件在接收到特定 props 後，是否渲染出預期的內容。當使用者與元件互動後，元件是否觸發了正確的 emit 事件。

實作範例

測試一個計數器組合式函數。

useCounter.test.js

// useCounter.test.js
import { describe, it, expect } from 'vitest';
import { useCounter } from './useCounter';

describe('useCounter', () => {
  it('should increment the count', () => {
    const { count, increment } = useCounter();
    expect(count.value).toBe(0);
    increment();
    expect(count.value).toBe(1);
  });
});

結論

單元測試是保證程式碼品質、防止迴歸錯誤和促進重構的基石。Vitest 以其閃電般的速度和與 Vite 的深度整合，成為了 Vue 3 專案單元測試的首選。

單元測試 Vitest 程式碼品質