Pengujian Unit dengan Vitest: Rangka Kerja Pengujian Generasi Seterusnya

Mengapa Memilih Vitest?

Vitest direka bentuk dengan mengambil kira pembangunan moden. Inilah sebabnya ia menonjol:

Kelajuan

Vitest memanfaatkan Vite sebagai asasnya, menggunakan penggantian modul panas sepantas kilat (HMR) dan esbuild untuk penggabungan dan transpilasi. Ini menghasilkan:

• Mod Tontonan Pintar & Segera: Ujian dijalankan semula hanya untuk fail yang terjejas, menjadikan gelung maklum balas serta-merta.
• Sokongan ESM luar kotak: Projek moden mendapat manfaat daripada sokongan langsung untuk modul ES tanpa penggodaman.

Dalam penanda aras prestasi, Vitest secara konsisten mengatasi Jest dengan margin yang ketara disebabkan penggunaan saluran paip binaan Vite yang dioptimumkan.

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

Nota: Penanda aras ini mungkin berbeza-beza bergantung pada kerumitan projek dan spesifikasi sistem.

Keserasian

Vitest serasi dengan Jest, yang bermaksud anda boleh menggunakan semula kebanyakan suite ujian sedia ada anda dengan perubahan yang minimum. Ia juga menyokong alatan popular seperti TypeScript, JSX dan ESM out-of-the-box.

Pengalaman Pembangun

• Bersepadu dengan HMR Vite untuk lelaran ujian yang pantas.
• API dan konfigurasi ringkas.
• Ekosistem yang kaya dan sokongan komuniti yang semakin meningkat.

---

Menyediakan Vitest

Mari kita mendalami penyediaan Vitest dalam projek TypeScript. Kami akan menunjukkan ini menggunakan projek React, tetapi langkahnya adalah serupa untuk projek Vue 3 atau Node.js.

Pemasangan

1. Pastikan anda telah memasang Node.js dan npm/yarn/pnpm.
2. Pasang Vitest dan kebergantungan rakan setaranya:

pasang npm --save-dev vitest

Untuk projek menggunakan React, anda juga memerlukan perpustakaan ujian React:

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

Konfigurasi

Buat atau kemas kini vite.config.ts anda untuk mendayakan 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',
  },
});

Menambah Fail Persediaan

Sediakan fail digunakan untuk mengkonfigurasi persekitaran ujian. Buat fail test/setup.ts:
import '@testing-library/jest-dom';

Menambah Skrip

Kemas kini package.json anda untuk memasukkan skrip ujian:

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

---

Ujian Unit Penulisan dengan Vitest

Vitest menyediakan API seperti Jest yang menjadikan ujian penulisan mudah. Berikut ialah contoh mudah:

Contoh: Komponen Reaksi

Bayangkan anda mempunyai komponen React:

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

type GreetingProps = {
  name: string;
};

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

Ujian Penulisan

Buat fail ujian untuk komponen:

// 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"></greeting>);
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

Menjalankan Ujian

Jalankan ujian menggunakan:
ujian larian npm

Anda akan melihat output yang serupa dengan ini:
✓ Komponen Ucapan memberikan ucapan yang betul

---

Ciri Lanjutan

mengejek

Vitest menyokong modul dan fungsi mengejek secara langsung:

import { vi } from 'vitest';

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

Ujian Syot Kilat

Ujian syot kilat semudah:

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

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

Ujian Prestasi

Gunakan pilihan CLI Vitest untuk mengukur prestasi:
vitest --run --liputan

---

Kesimpulan

Vitest ialah pilihan yang menarik untuk ujian moden, menawarkan kelajuan, kesederhanaan dan ciri yang kaya yang dikuasakan oleh Vite. Sama ada berhijrah dari Jest atau bermula baharu, Vitest menyediakan pengalaman pembangun yang sangat baik dan memastikan ujian anda berjalan sepantas kod anda.

Cuba Vitest dalam projek anda yang seterusnya dan rasai perbezaannya!

Rujukan

Tapak web vitest
Vite

Atas ialah kandungan terperinci Pengujian Unit dengan Vitest: Rangka Kerja Pengujian Generasi Seterusnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!