為什么選擇維泰斯特？

Vitest 的設(shè)計(jì)考慮了現(xiàn)代開發(fā)。這就是它脫穎而出的原因：

速度

Vitest 以 Vite 作為基礎(chǔ)，利用其閃電般快速的熱模塊替換 (HMR) 和 esbuild 進(jìn)行捆綁和轉(zhuǎn)譯。結(jié)果是：

• 智能即時(shí)監(jiān)視模式：僅針對受影響的文件重新運(yùn)行測試，使反饋循環(huán)即時(shí)進(jìn)行。
• 開箱即用的 ESM 支持：現(xiàn)代項(xiàng)目受益于對 ES 模塊的直接支持，無需破解。

在性能基準(zhǔn)測試中，由于使用了 Vite 優(yōu)化的構(gòu)建管道，Vitest 始終大幅領(lǐng)先 Jest。

注意：這些基準(zhǔn)可能會根據(jù)項(xiàng)目復(fù)雜性和系統(tǒng)規(guī)格而有所不同。

兼容性

Vitest 與 Jest 兼容，這意味著您可以通過最少的更改重用大部分現(xiàn)有的測試套件。它還支持開箱即用的流行工具，如 TypeScript、JSX 和 ESM。

開發(fā)者經(jīng)驗(yàn)

• 與Vite的HMR集成，實(shí)現(xiàn)快速測試迭代。
• 簡單的 API 和配置。
• 豐富的生態(tài)系統(tǒng)和不斷增長的社區(qū)支持。

---

設(shè)置 Vitest

讓我們深入了解在 TypeScript 項(xiàng)目中設(shè)置 Vitest。我們將使用 React 項(xiàng)目來演示這一點(diǎn)，但 Vue 3 或 Node.js 項(xiàng)目的步驟類似。

安裝

1. 確保安裝了 Node.js 和 npm/yarn/pnpm。
2. 安裝 Vitest 及其對等依賴項(xiàng)：

npm install --save-dev vitest

對于使用 React 的項(xiàng)目，您還需要 React 測試庫：

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

配置

創(chuàng)建或更新您的 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',
  },
});

添加安裝文件

設(shè)置文件用于配置測試環(huán)境。創(chuàng)建一個 test/setup.ts 文件：
導(dǎo)入 '@testing-library/jest-dom';

添加腳本

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

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

---

使用 Vitest 編寫單元測試

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

示例：反應(yīng)組件

想象你有一個 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>;
};

編寫測試

為組件創(chuàng)建測試文件：

// 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();
  });
});

運(yùn)行測試

使用以下命令運(yùn)行測試：
npm 運(yùn)行測試

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

---

高級功能

嘲笑

Vitest直接支持模擬模塊和函數(shù)：

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();
});

性能測試

使用 Vitest 的 CLI 選項(xiàng)來衡量性能：
vitest --run --coverage

---

結(jié)論

Vitest 是現(xiàn)代測試的一個引人注目的選擇，它提供由 Vite 提供支持的速度、簡單性和豐富的功能。無論是從 Jest 遷移還是重新開始，Vitest 都能提供出色的開發(fā)人員體驗(yàn)，并確保您的測試與代碼一樣快地運(yùn)行。

在您的下一個項(xiàng)目中嘗試 Vitest，體驗(yàn)不同之處！

參考

訪問網(wǎng)站
維特

以上是使用 Vitest 進(jìn)行單元測試：下一代測試框架的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！