Tutorial Komprehensif untuk Pengujian (Testing) Komponen React

[ramaID]

Langkah 1: Mengatur Proyek React dengan Vite, Bun, dan TypeScript

1. Instalasi Bun

   • Pertama, pastikan Anda telah menginstal Bun. Jika belum, Anda dapat menginstalnya dengan perintah berikut:

     curl -fsSL https://bun.sh/install | bash
     

2. Buat Proyek React Baru dengan Vite dan TypeScript

   • Jalankan perintah berikut untuk membuat proyek baru menggunakan Vite dengan template React dan TypeScript:

     bun create vite@latest my-react-app --template react-ts
     cd my-react-app
     

Langkah 2: Mengatur Vitest dan Testing Library

1. Instalasi Vitest dan @testing-library/react

   • Gunakan Bun untuk menginstal Vitest dan @testing-library/react:

     bun add -d vitest @testing-library/react @testing-library/jest-dom
     

2. Konfigurasi Vitest

   • Perbarui file konfigurasi Vitest di vitest.config.ts:

     // vitest.config.ts
     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'
     
     // https://vitest.dev/config/
     export default defineConfig({
       plugins: [react()],
       test: {
         globals: true,
         environment: 'jsdom',
         setupFiles: './src/setupTests.ts',
       },
     })
     

3. Setup Vitest

   • Buat file setupTests.ts di dalam folder src untuk mengatur Jest DOM:

     // src/setupTests.ts
     import '@testing-library/jest-dom'
     

Langkah 3: Membuat Komponen dan Pengujian

1. Buat Komponen React dengan TypeScript

   • Misalkan Anda memiliki komponen Button.tsx di dalam folder src/components:

     // src/components/Button.tsx
     import React from 'react';
     
     interface ButtonProps {
       onClick?: () => void;
       children: React.ReactNode;
     }
     
     const Button: React.FC<ButtonProps> = ({ onClick, children }) => (
       <button onClick={onClick}>{children}</button>
     );
     
     export default Button;
     

2. Buat File Pengujian untuk Komponen

   • Buat file Button.test.tsx di dalam folder src/components:

     // src/components/Button.test.tsx
     import React from 'react';
     import { render, screen, fireEvent } from '@testing-library/react';
     import { describe, it, expect, vi } from 'vitest';
     import Button from './Button';
     
     describe('Button component', () => {
       it('renders button with correct text', () => {
         render(<Button>Click Me</Button>);
         const buttonElement = screen.getByText(/click me/i);
         expect(buttonElement).toBeInTheDocument();
       });
     
       it('calls onClick prop when clicked', () => {
         const handleClick = vi.fn();
         render(<Button onClick={handleClick}>Click Me</Button>);
         const buttonElement = screen.getByText(/click me/i);
         fireEvent.click(buttonElement);
         expect(handleClick).toHaveBeenCalledTimes(1);
       });
     
       it('matches snapshot', () => {
         const { asFragment } = render(<Button>Click Me</Button>);
         expect(asFragment()).toMatchSnapshot();
       });
     });
     

Langkah 4: Menjalankan Pengujian

1. Menambahkan Skrip Pengujian di package.json

   • Tambahkan skrip untuk menjalankan Vitest dalam file package.json:

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

2. Menjalankan Pengujian

   • Jalankan perintah berikut di terminal untuk menjalankan pengujian:

     bun run test
     

Vitest akan mencari file pengujian dan menjalankannya. Anda akan melihat hasil pengujian di terminal.

Kesimpulan

Dengan mengikuti langkah-langkah ini, Anda dapat mengatur lingkungan pengujian komponen React menggunakan Vite, Vitest, Bun, dan TypeScript. Penggunaan TypeScript akan membantu Anda dengan pengetikan yang kuat dan autocompletion, meminimalisir kesalahan dan meningkatkan produktivitas.