使用 Vitest 框架建立測試的最佳技術

單元測試、整合測試和端到端測試都由 Vitest 支持，Vitest 是一個專為 Vite 設計的快速且現代的測試框架。透過與 React 和 Vue 等當代 JavaScript 程式庫的順利集成，它提供了一種快速有效的方法來編寫無需設定的測試。本文將討論使用 Vitest 框架編寫可靠、可管理且有效的測試的最佳方法。

1。設定 Vitest

在深入研究進階技術之前，讓我們先使用 Vitest 建立一個簡單的專案。如果您在專案中使用 Vite，Vitest 的設計只需最少的設定即可開箱即用。

第 1 步：安裝 Vitest

要安裝 Vitest，請在專案目錄中執行以下命令：

npm install vitest --save-dev

第 2 步：建立一個簡單的測試

安裝後，建立一個簡單的測試檔案來查看 Vitest 的運作情況。

import { describe, it, expect } from 'vitest';

describe('Math Functions', () => {
  it('should add two numbers correctly', () => {
    const sum = 1 + 2;
    expect(sum).toBe(3);
  });
});

使用以下命令執行測試：

npx vitest

2。使用Describe 和It Blocks 組織測試

describe 和 it 區塊是 Vitest（以及許多其他測試框架，如 Jest）的基礎。它們有助於邏輯地組織您的測試並使它們更易於閱讀。

describe：用於將相關測驗分組。
it：在描述區塊中定義單獨的測試案例。
這種結構可確保您的測試案例隨著測試套件的成長而組織良好且可維護。

describe('User Authentication', () => {
  it('should login with valid credentials', () => {
    // Test login functionality
  });

  it('should fail to login with invalid credentials', () => {
    // Test invalid login functionality
  });
});

3。模擬依賴

在現代應用程式中，測試通常需要模擬 API、資料庫或第三方程式庫等外部服務。 Vitest 為模擬依賴項提供本機支持，這有助於隔離您想要測試的行為。

模擬 API 呼叫範例

讓我們使用 Vitest 的 vi.fn 來模擬一個簡單的 API 呼叫來模擬函數，而無需實際呼叫外部服務。

import { vi } from 'vitest';
import { fetchUserData } from './api';

vi.mock('./api', () => ({
  fetchUserData: vi.fn(),
}));

describe('User API', () => {
  it('should fetch user data correctly', async () => {
    const mockUserData = { id: 1, name: 'John Doe' };
    fetchUserData.mockResolvedValueOnce(mockUserData);

    const result = await fetchUserData(1);
    expect(result).toEqual(mockUserData);
  });
});

在此範例中，我們模擬了 fetchUserData 函數，使我們能夠控制回應並避免進行真正的 API 呼叫。

4。快照測驗

Vitest 支援快照測試，當您想要驗證元件或函數隨時間的輸出時，這非常有用。這種技術對於 UI 元件特別有益。

快照測試範例

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should match the snapshot', () => {
    const { container } = render(<MyComponent />);
    expect(container).toMatchSnapshot();
  });
});

快照測試可確保元件輸出保持一致。如果輸出發生變化，系統會提示您更新快照，協助擷取無意的變更。

5。測試非同步程式碼

在測試非同步函數時，Vitest 提供了處理 Promise 的實用程序，可以更輕鬆地確保非同步程式碼按預期工作。

測試非同步函數範例

import { describe, it, expect } from 'vitest';

const fetchData = async () => {
  return new Promise((resolve) => setTimeout(() => resolve('data'), 1000));
};

describe('Async Functions', () => {
  it('should resolve data', async () => {
    const data = await fetchData();
    expect(data).toBe('data');
  });
});

此技術對於測試 API 請求、計時器或其他非同步程式碼至關重要。

6。代碼覆蓋率

Vitest 支援產生開箱即用的程式碼覆蓋率報告，這可以幫助您了解測試覆蓋了多少程式碼庫。它顯示了程式碼的哪些部分已經過測試，哪些部分尚未測試。

啟用程式碼覆蓋

要啟用程式碼覆蓋率，請將以下內容加入您的 Vitest 配置：

// vite.config.js or vitest.config.js
export default {
  test: {
    coverage: {
      reporter: ['text', 'html'],
    },
  },
};

運行覆蓋範圍的測試：

npx vitest --coverage

這將產生一份覆蓋率報告，讓您可以分析程式碼的哪些區域需要更多測試。

7。參數化測試

參數化測試是運行具有不同輸入和預期輸出的單一測試案例的好方法。這減少了程式碼重複並確保您的函數在各種場景下都能正確運行。

參數化測試範例

describe.each([
  [1, 2, 3],
  [2, 3, 5],
  [5, 5, 10],
])('Math Operations', (a, b, expected) => {
  it(`should add ${a} and ${b} to equal ${expected}`, () => {
    expect(a + b).toBe(expected);
  });
});

透過使用describe.each，您可以在單一測試案例中迭代不同的輸入集和預期輸出，使您的測試更加DRY（不要重複自己）。

8。使用測試庫測試 React 元件

Vitest 與 React 測試函式庫搭配得很好，React 測試函式庫是一種用於測試 React 元件的熱門工具。它鼓勵測試元件的行為，而不是實作細節。

React 元件測試範例

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import MyButton from './MyButton';

describe('MyButton Component', () => {
  it('should render correctly', () => {
    render(<MyButton />);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('should call onClick when clicked', () => {
    const handleClick = vi.fn();
    render(<MyButton onClick={handleClick} />);
    screen.getByText('Click Me').click();
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

使用 Vitest 測試 React 元件可確保您的 UI 在與按鈕、輸入或其他元素互動時如預期運作。

結論

無需設置，Vitest 框架即可提供強大、現代化的測試體驗。您可以透過遵循最佳實踐來建立可靠且有效的測試套件，其中包括使用描述區塊來組織測試、模擬外部服務以及利用快照測試。此外，啟用程式碼覆蓋率、測試 React 元件和測試非同步程式碼等方法將確保您的應用程式經過良好的測試和維護。

以上是使用 Vitest 框架建立測試的最佳技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！