測試是現代軟體開發的關鍵方面，可確保您的程式碼按預期工作並防止隨著應用程式的發展而出現回歸。在 React 生態系統中，像 Vitest 這樣的工具提供了一個快速、強大且易於使用的測試框架，可與現代 React 應用程式無縫整合。在這篇文章中，我們將探討如何設定和使用 Vitest 來有效地測試您的 React 元件、掛鉤和實用程式。
Vitest 是一個速度極快的測試框架，專為現代 JavaScript 和 TypeScript 專案構建，特別是那些使用 Vite 作為建置工具的專案。 Vitest 的靈感來自 Jest，Jest 是 React 社群中最受歡迎的測試框架之一，但它針對速度和簡單性進行了最佳化，使其成為 Vite 支援的 React 專案的絕佳選擇。
讓我們從在 React 專案中設定 Vitest 開始。我們假設您有一個使用 Vite 建立的 React 應用程式。如果沒有，您可以使用以下命令快速建立一個：
npm create vite@latest my-react-app -- --template react cd my-react-app
安裝 Vitest 以及 React 測試庫和其他必要的依賴項：
npm install --save-dev vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event
接下來，透過在專案根目錄中建立或修改 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',
},
});
在 src 目錄中建立 setupTests.ts 檔案來設定@testing-library/jest-dom：
import '@testing-library/jest-dom';
此設定將自動在您的測試中包含 jest-dom 提供的自訂匹配器。
設定好 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);
});
});
說明：
您可以使用以下命令執行測試：
npx vitest
預設情況下，這將執行遵循 *.test.tsx 或 *.spec.tsx 模式的所有測試檔案。您也可以使用以下命令在監視模式下執行測試：
npx vitest --watch
Vitest 將提供詳細的輸出，向您顯示每個測試的狀態以及發生的任何錯誤。
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);
});
});
說明：
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中文網其他相關文章！
