Menguji Aplikasi React dengan Vitest: Panduan Komprehensif

Pengujian ialah aspek kritikal pembangunan perisian moden, memastikan kod anda berfungsi seperti yang diharapkan dan menghalang regresi semasa aplikasi anda berkembang. Dalam ekosistem React, alatan seperti Vitest menawarkan rangka kerja ujian yang pantas, berkuasa dan mudah digunakan yang disepadukan dengan lancar dengan aplikasi React moden. Dalam siaran ini, kami akan meneroka cara menyediakan dan menggunakan Vitest untuk menguji komponen, cangkuk dan utiliti React anda dengan berkesan.

---

1. Pengenalan kepada Vitest

Vitest ialah rangka kerja ujian pantas yang dibina untuk projek JavaScript dan TypeScript moden, terutamanya yang menggunakan Vite sebagai alat binaan mereka. Vitest diilhamkan oleh Jest, salah satu rangka kerja ujian paling popular dalam komuniti React, tetapi ia dioptimumkan untuk kelajuan dan kesederhanaan, menjadikannya pilihan yang bagus untuk projek React yang dikuasakan oleh Vite.

Ciri-ciri Utama:

• Pelaksanaan Pantas: Vitest menjalankan ujian secara selari dan memanfaatkan keupayaan binaan pantas Vite.
• Sokongan ESM Asli: Vitest direka untuk JavaScript moden, menawarkan sokongan luar biasa untuk modul ES.
• Keserasian dengan Jest: Jika anda biasa dengan Jest, anda akan mendapati API Vitest sudah biasa, menjadikan peralihan lancar.
• Sokongan TypeScript Terbina dalam: Vitest menyokong TypeScript secara asli, memberikan keselamatan jenis dalam ujian anda.

---

2. Menyediakan Vitest dalam Projek React

Mari mulakan dengan menyediakan Vitest dalam projek React. Kami akan menganggap anda mempunyai apl React yang dibuat menggunakan Vite. Jika tidak, anda boleh menciptanya dengan cepat menggunakan arahan berikut:

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

Langkah 1: Pasang Vitest dan Ketergantungan Berkaitan

Pasang Vitest bersama-sama Perpustakaan Pengujian React dan kebergantungan lain yang diperlukan:

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

• vitest: Rangka kerja ujian.
• @testing-library/react: Menyediakan utiliti untuk menguji komponen React.
• @testing-library/jest-dom: Menambah pemadanan tersuai pada Jest dan Vitest untuk penegasan nod DOM.
• @testing-library/user-event: Mensimulasikan interaksi pengguna dengan DOM.

Langkah 2: Konfigurasikan Vitest

Seterusnya, konfigurasikan Vitest dengan mencipta atau mengubah suai fail vitest.config.ts anda dalam akar projek anda:

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',
  },
});

• persekitaran: 'jsdom': Mengejek persekitaran penyemak imbas untuk ujian.
• globals: true: Membenarkan penggunaan pembolehubah global seperti describe, it, expect tanpa mengimportnya.
• setupFiles: Fail untuk menyediakan konfigurasi ujian, serupa dengan setupFilesAfterEnv Jest.

Langkah 3: Buat Fail Persediaan

Buat fail setupTests.ts dalam direktori src anda untuk mengkonfigurasi @testing-library/jest-dom:

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

Persediaan ini secara automatik akan menyertakan pemadanan tersuai yang disediakan oleh jest-dom dalam ujian anda.

---

3. Ujian Penulisan untuk Komponen Reaksi

Dengan persediaan Vitest, mari tulis beberapa ujian untuk komponen React yang mudah. Pertimbangkan komponen Butang berikut:

// 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;

Sekarang, mari tulis ujian untuk komponen ini:

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

Penjelasan:

• render: Memaparkan komponen untuk ujian.
• skrin: Menanyakan DOM yang diberikan.
• userEvent.click: Mensimulasikan acara klik pada butang.
• vi.fn(): Mengejek fungsi untuk menjejaki panggilannya.

---

4. Menjalankan Ujian Anda

Anda boleh menjalankan ujian anda menggunakan arahan berikut:

npx vitest

Ini akan melaksanakan semua fail ujian yang mengikut corak *.test.tsx atau *.spec.tsx secara lalai. Anda juga boleh menjalankan ujian dalam mod jam tangan dengan:

npx vitest --watch

Vitest akan memberikan output terperinci, menunjukkan kepada anda status setiap ujian dan sebarang ralat yang berlaku.

---

5. Cangkuk Pengujian dan Utiliti Tersuai

Vitest juga boleh digunakan untuk menguji cangkuk dan utiliti React tersuai. Katakan anda mempunyai cangkuk tersuai 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 };
}

Anda boleh menulis ujian untuk cangkuk ini seperti berikut:

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

Penjelasan:

• renderHook: Memaparkan cangkuk React dalam persekitaran ujian.
• bertindak: Memastikan bahawa sebarang kemas kini kepada keadaan atau kesan diproses sebelum membuat penegasan.

---

6. Kesimpulan

Vitest menyediakan cara yang berkuasa dan cekap untuk menguji aplikasi React, terutamanya apabila digabungkan dengan alatan moden seperti Vite. Kesederhanaan, kelajuan dan keserasiannya dengan amalan Jest sedia ada menjadikannya pilihan terbaik untuk projek React kecil dan besar.

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 ?‍?

Atas ialah kandungan terperinci Menguji Aplikasi React dengan Vitest: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!