使用 Vitest 測試 React 應用程式：綜合指南

測試是現代軟體開發的關鍵方面，可確保您的程式碼按預期工作並防止隨著應用程式的發展而出現回歸。在 React 生態系統中，像 Vitest 這樣的工具提供了一個快速、強大且易於使用的測試框架，可與現代 React 應用程式無縫整合。在這篇文章中，我們將探討如何設定和使用 Vitest 來有效地測試您的 React 元件、掛鉤和實用程式。

---

1. 維測簡介

Vitest 是一個速度極快的測試框架，專為現代 JavaScript 和 TypeScript 專案構建，特別是那些使用 Vite 作為建置工具的專案。 Vitest 的靈感來自 Jest，Jest 是 React 社群中最受歡迎的測試框架之一，但它針對速度和簡單性進行了最佳化，使其成為 Vite 支援的 React 專案的絕佳選擇。

主要特點：

• 快速執行： Vitest 並行運行測試並利用 Vite 的快速建置功能。
• 原生 ESM 支援： Vitest 專為現代 JavaScript 設計，為 ES 模組提供開箱即用的支援。
• 與 Jest 的兼容性：如果您熟悉 Jest，您會發現 Vitest 的 API 很熟悉，從而使過渡順利。
• 內建 TypeScript 支援： Vitest 原生支援 TypeScript，為您的測試提供型別安全。

---

2. 在 React 專案中設定 Vitest

讓我們從在 React 專案中設定 Vitest 開始。我們假設您有一個使用 Vite 建立的 React 應用程式。如果沒有，您可以使用以下命令快速建立一個：

npm create vite@latest my-react-app -- --template react
cd my-react-app

步驟一：安裝Vitest及相關依賴

安裝 Vitest 以及 React 測試庫和其他必要的依賴項：

npm install --save-dev vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event

• vitest：測試框架。
• @testing-library/react：提供測試 React 元件的實用程式。
• @testing-library/jest-dom：為 DOM 節點斷言新增自訂匹配器到 Jest 和 Vitest。
• @testing-library/user-event：模擬使用者與 DOM 的互動。

步驟2：配置Vitest

接下來，透過在專案根目錄中建立或修改 vitest.config.ts 檔案來設定 Vitest：

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.ts',
  },
});

• 環境：'jsdom'：模擬瀏覽器環境進行測試。
• globals: true: 允許使用全域變量，如describe、it、expect，而不匯入它們。
• setupFiles：用於設定測試配置的文件，類似 Jest 的 setupFilesAfterEnv。

第 3 步：建立安裝文件

在 src 目錄中建立 setupTests.ts 檔案來設定@testing-library/jest-dom：

import '@testing-library/jest-dom';

此設定將自動在您的測試中包含 jest-dom 提供的自訂匹配器。

---

3. 為 React 元件編寫測試

設定好 Vitest 後，讓我們為一個簡單的 React 元件寫一些測試。考慮以下 Button 組件：

// src/components/Button.tsx
import React from 'react';

type ButtonProps = {
  label: string;
  onClick: () => void;
};

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

現在，讓我們為這個元件編寫測試：

// src/components/Button.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from './Button';

describe('Button Component', () => {
  it('renders the button with the correct label', () => {
    render(<Button label="Click Me" onClick={() => {}} />);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('calls the onClick handler when clicked', async () => {
    const handleClick = vi.fn();
    render(<Button label="Click Me" onClick={handleClick} />);
    await userEvent.click(screen.getByText('Click Me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

說明：

• render：渲染元件以進行測試。
• screen：查詢渲染的 DOM。
• userEvent.click：模擬按鈕的點擊事件。
• vi.fn()：模擬一個函數來追蹤其呼叫。

---

4. 運行測試

您可以使用以下命令執行測試：

npx vitest

預設情況下，這將執行遵循 *.test.tsx 或 *.spec.tsx 模式的所有測試檔案。您也可以使用以下命令在監視模式下執行測試：

npx vitest --watch

Vitest 將提供詳細的輸出，向您顯示每個測試的狀態以及發生的任何錯誤。

---

5. 測試鉤子和自訂實用程序

Vitest 也可以用於測試自訂 React 掛鉤和實用程式。假設您有一個自訂掛鉤 useCounter:

// src/hooks/useCounter.ts
import { useState } from 'react';

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);

  return { count, increment, decrement };
}

您可以如下為此鉤子編寫測試：

// src/hooks/useCounter.test.ts
import { renderHook, act } from '@testing-library/react-hooks';
import { useCounter } from './useCounter';

describe('useCounter Hook', () => {
  it('initializes with the correct value', () => {
    const { result } = renderHook(() => useCounter(10));
    expect(result.current.count).toBe(10);
  });

  it('increments the counter', () => {
    const { result } = renderHook(() => useCounter());
    act(() => {
      result.current.increment();
    });
    expect(result.current.count).toBe(1);
  });

  it('decrements the counter', () => {
    const { result } = renderHook(() => useCounter(10));
    act(() => {
      result.current.decrement();
    });
    expect(result.current.count).toBe(9);
  });
});

說明：

• renderHook：在測試環境中渲染一個 React hook。
• act：確保在做出斷言之前處理對狀態或效果的任何更新。

---

六、結論

Vitest 提供了一種強大而高效的方法來測試 React 應用程序，特別是與 Vite 等現代工具結合使用時。它的簡單性、速度以及與現有 Jest 實踐的兼容性使其成為小型和大型 React 專案的絕佳選擇。

By integrating Vitest into your workflow, you can ensure that your React components, hooks, and utilities are thoroughly tested, leading to more robust and reliable applications. Whether you’re testing simple components or complex hooks, Vitest offers the tools you need to write effective tests quickly.

For more information, visit the Vitest documentation.

Feel free to explore more advanced features of Vitest, such as mocking, snapshot testing, and parallel test execution, to further enhance your testing capabilities.

Happy Coding ?‍?

以上是使用 Vitest 測試 React 應用程式：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！