使用 Vitest 進行單元測試：下一代測試框架-js教程-PHP中文網

使用 Vitest 進行單元測試：下一代測試框架

Patricia Arquette

發布： 2024-12-29 11:46:10

原創

238 人瀏覽過

Unit Testing with Vitest: A Next-Generation Testing Framework

為什麼選擇維泰斯特？

Vitest 的設計考慮了現代開發。這就是它脫穎而出的原因：

速度

Vitest 以 Vite 作為基礎，利用其閃電般快速的熱模組替換 (HMR) 和 esbuild 進行捆綁和轉譯。結果是：

智慧型即時監視模式：僅針對受影響的檔案重新執行測試，使回饋循環即時進行。
開箱即用的 ESM 支援：現代專案受益於對 ES 模組的直接支持，無需破解。

在效能基準測試中，由於使用了 Vite 最佳化的建置管道，Vitest 始終大幅領先 Jest。

Framework	Time to run 500 tests
Jest	~8 seconds
Vitest	~3 seconds
Mocha	~6 seconds

注意：這些基準可能會根據項目複雜性和系統規格而有所不同。

相容性

Vitest 與 Jest 相容，這表示您可以透過最少的變更重複使用大部分現有的測試套件。它還支援開箱即用的流行工具，如 TypeScript、JSX 和 ESM。

開發者經驗

與Vite的HMR集成，實現快速測試迭代。
簡單的 API 與設定。
豐富的生態系統和不斷增長的社區支持。

---

設定 Vitest

讓我們深入了解在 TypeScript 專案中設定 Vitest。我們將使用 React 專案來示範這一點，但 Vue 3 或 Node.js 專案的步驟類似。

安裝

確保安裝了 Node.js 和 npm/yarn/pnpm。
安裝 Vitest 及其對等依賴項：

npm install --save-dev vitest

對於使用 React 的項目，您還需要 React 測試庫：

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

配置

建立或更新您的 vite.config.ts 以啟用 Vitest：

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

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // Use 'node' for Node.js projects
    setupFiles: './test/setup.ts',
  },
});

登入後複製

新增安裝文件

設定檔用於配置測試環境。建立一個 test/setup.ts 檔案：
導入 '@testing-library/jest-dom';

新增腳本

更新您的 package.json 以包含測試腳本：

{
  "scripts": {
    "test": "vitest"
  }
}

登入後複製

---

使用 Vitest 編寫單元測試

Vitest 提供了類似 Jest 的 API，讓編寫測驗變得簡單。這是一個簡單的例子：

例：反應組件

想像你有一個 React 元件：

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

type GreetingProps = {
  name: string;
};

export const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

登入後複製

編寫測試

為元件建立測試檔案：

// src/components/__tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Greeting } from '../Greeting';

describe('Greeting Component', () => {
  it('renders the correct greeting', () => {
    render(<Greeting name="Vitest" />);
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

登入後複製

運行測試

使用以下命令執行測試：
npm 運行測試

您將看到與此類似的輸出：
✓ Greeting 元件渲染正確的問候語

---

進階功能

嘲笑

Vitest直接支援模擬模組與函數：

import { vi } from 'vitest';

const mockFn = vi.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

登入後複製

快照測試

快照測驗非常簡單：

import { render } from '@testing-library/react';
import { expect } from 'vitest';
import { Greeting } from '../Greeting';

test('matches snapshot', () => {
  const { container } = render(<Greeting name="Vitest" />);
  expect(container).toMatchSnapshot();
});

登入後複製