Teknik Terbaik untuk Mencipta Ujian dengan Rangka Kerja Vitest

Ujian unit, ujian integrasi dan ujian hujung ke hujung semuanya disokong oleh Vitest, rangka kerja ujian pantas dan kontemporari yang direka untuk Vite. Dengan penyepaduan lancarnya dengan perpustakaan JavaScript kontemporari seperti React dan Vue, ia menyediakan cara ujian penulisan yang pantas dan berkesan yang tidak memerlukan persediaan. Kaedah terbaik untuk menulis ujian yang boleh dipercayai, terurus dan berkesan dengan rangka kerja Vitest akan dibincangkan dalam artikel ini.

1. Menyediakan Vitest

Sebelum mendalami teknik lanjutan, mari sediakan projek mudah dengan Vitest. Jika anda menggunakan Vite untuk projek anda, Vitest direka bentuk untuk berfungsi di luar kotak dengan persediaan yang minimum.

Langkah 1: Pasang Vitest

Untuk memasang Vitest, jalankan arahan berikut dalam direktori projek anda:

npm install vitest --save-dev

Langkah 2: Buat Ujian Mudah

Setelah dipasang, buat fail ujian ringkas untuk melihat Vitest beraksi.

import { describe, it, expect } from 'vitest';

describe('Math Functions', () => {
  it('should add two numbers correctly', () => {
    const sum = 1 + 2;
    expect(sum).toBe(3);
  });
});

Jalankan ujian anda menggunakan arahan berikut:

npx vitest

2. Atur Ujian dengan Describe and It Block

Huraian dan bloknya adalah asas dalam Vitest (dan banyak rangka kerja ujian lain seperti Jest). Mereka membantu mengatur ujian anda secara logik dan menjadikannya lebih mudah dibaca.

huraikan: Digunakan untuk mengumpulkan ujian berkaitan.
ia: Mentakrifkan kes ujian individu dalam blok huraikan.
Struktur ini memastikan bahawa kes ujian anda teratur dan boleh diselenggara apabila suite ujian anda berkembang.

describe('User Authentication', () => {
  it('should login with valid credentials', () => {
    // Test login functionality
  });

  it('should fail to login with invalid credentials', () => {
    // Test invalid login functionality
  });
});

3. Kebergantungan Mengejek

Dalam aplikasi moden, ujian selalunya memerlukan simulasi perkhidmatan luaran seperti API, pangkalan data atau perpustakaan pihak ketiga. Vitest menyediakan sokongan asli untuk kebergantungan mengejek, yang membantu mengasingkan tingkah laku yang ingin anda uji.

Mengejek Contoh Panggilan API

Mari kita mempermainkan panggilan API mudah menggunakan vi.fn Vitest untuk mensimulasikan fungsi tanpa benar-benar memanggil perkhidmatan luaran.

import { vi } from 'vitest';
import { fetchUserData } from './api';

vi.mock('./api', () => ({
  fetchUserData: vi.fn(),
}));

describe('User API', () => {
  it('should fetch user data correctly', async () => {
    const mockUserData = { id: 1, name: 'John Doe' };
    fetchUserData.mockResolvedValueOnce(mockUserData);

    const result = await fetchUserData(1);
    expect(result).toEqual(mockUserData);
  });
});

Dalam contoh ini, kami mengejek fungsi fetchUserData, membolehkan kami mengawal respons dan mengelak daripada membuat panggilan API sebenar.

4. Ujian Syot Kilat

Vitest menyokong ujian syot kilat, yang berguna apabila anda ingin mengesahkan output komponen atau fungsi dari semasa ke semasa. Teknik ini amat berfaedah untuk komponen UI.

Contoh Ujian Syot Kilat

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should match the snapshot', () => {
    const { container } = render(<MyComponent />);
    expect(container).toMatchSnapshot();
  });
});

Ujian syot kilat memastikan output komponen kekal konsisten. Jika output berubah, anda akan digesa untuk mengemas kini syot kilat, membantu menangkap perubahan yang tidak disengajakan.

5. Menguji Kod Asynchronous

Apabila menguji fungsi tak segerak, Vitest menyediakan utiliti untuk mengendalikan janji, menjadikannya lebih mudah untuk memastikan kod tak segerak berfungsi seperti yang diharapkan.

Menguji Contoh Fungsi Async

import { describe, it, expect } from 'vitest';

const fetchData = async () => {
  return new Promise((resolve) => setTimeout(() => resolve('data'), 1000));
};

describe('Async Functions', () => {
  it('should resolve data', async () => {
    const data = await fetchData();
    expect(data).toBe('data');
  });
});

Teknik ini penting untuk menguji permintaan API, pemasa atau kod tak segerak yang lain.

6. Liputan Kod

Vitest menyokong penjanaan laporan liputan kod di luar kotak, yang membantu anda memahami berapa banyak pangkalan kod anda diliputi oleh ujian. Ia menunjukkan bahagian kod yang telah diuji dan yang masih belum diuji.

Mendayakan Liputan Kod

Untuk mendayakan liputan kod, tambahkan yang berikut pada konfigurasi Vitest anda:

// vite.config.js or vitest.config.js
export default {
  test: {
    coverage: {
      reporter: ['text', 'html'],
    },
  },
};

Jalankan ujian anda dengan liputan:

npx vitest --coverage

Ini akan menjana laporan liputan, membolehkan anda menganalisis bahagian mana kod anda memerlukan lebih banyak ujian.

7. Ujian Parameter

Ujian berparameter ialah cara terbaik untuk menjalankan satu kes ujian dengan input dan output yang dijangkakan berbeza. Ini mengurangkan pertindihan kod dan memastikan fungsi anda berfungsi dengan betul untuk pelbagai senario.

Contoh Ujian Parameter

describe.each([
  [1, 2, 3],
  [2, 3, 5],
  [5, 5, 10],
])('Math Operations', (a, b, expected) => {
  it(`should add ${a} and ${b} to equal ${expected}`, () => {
    expect(a + b).toBe(expected);
  });
});

Dengan menggunakan describe.each, anda boleh mengulang set input dan output yang dijangkakan dalam satu kes ujian, menjadikan ujian anda lebih KERING (Jangan Ulangi Sendiri).

8. Menguji Komponen Reaksi dengan Perpustakaan Pengujian

Vitest berfungsi dengan baik dengan Pustaka Pengujian React, alat popular untuk menguji komponen React. Ia menggalakkan menguji gelagat komponen anda, bukannya butiran pelaksanaan.

Contoh Pengujian Komponen Reaksi

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import MyButton from './MyButton';

describe('MyButton Component', () => {
  it('should render correctly', () => {
    render(<MyButton />);
    expect(screen.getByText('Click Me')).toBeInTheDocument();
  });

  it('should call onClick when clicked', () => {
    const handleClick = vi.fn();
    render(<MyButton onClick={handleClick} />);
    screen.getByText('Click Me').click();
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Menguji komponen React dengan Vitest memastikan UI anda berkelakuan seperti yang diharapkan apabila berinteraksi dengan butang, input atau elemen lain.

Kesimpulan

Tanpa persediaan diperlukan, rangka kerja Vitest menawarkan pengalaman ujian kontemporari yang mantap. Anda boleh membina suite ujian yang boleh dipercayai dan berkesan dengan mematuhi amalan terbaik, termasuk menggunakan blok huraikan untuk mengatur ujian, mensimulasikan perkhidmatan luaran dan menggunakan ujian syot kilat. Selain itu, kaedah seperti mendayakan liputan kod, menguji komponen React dan menguji kod tak segerak akan menjamin bahawa aplikasi anda diuji dengan baik dan boleh diselenggara.

Atas ialah kandungan terperinci Teknik Terbaik untuk Mencipta Ujian dengan Rangka Kerja Vitest. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!