Testing Library React Tutorial

Testing Library React Tutorial

4 min read Jun 18, 2024
Testing Library React Tutorial

Testing Library React Tutorial: Cara Menulis Tes yang Efektif

Testing Library adalah sebuah library yang membantu Anda menulis tes yang lebih fokus pada bagaimana pengguna berinteraksi dengan aplikasi React Anda. Alih-alih menguji implementasi internal komponen, Testing Library mendorong Anda untuk menulis tes yang memvalidasi perilaku aplikasi dari sudut pandang pengguna.

Mengapa Menggunakan Testing Library?

  • Fokus pada Pengalaman Pengguna: Tes Anda akan memvalidasi bagaimana pengguna sebenarnya berinteraksi dengan aplikasi Anda, bukan hanya bagaimana kode internal bekerja.
  • Tes yang Lebih Kuat: Tes yang berfokus pada perilaku pengguna lebih tahan terhadap perubahan kode internal.
  • Tes yang Lebih Mudah Dipahami: Tes yang ditulis dengan Testing Library lebih mudah dibaca dan dipahami oleh pengembang lain, bahkan yang tidak familiar dengan kode aplikasi Anda.

Instalasi

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

Memulai

1. Render Komponen Anda:

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders a welcome message', () => {
  render();
  const welcomeElement = screen.getByText('Welcome to MyComponent!');
  expect(welcomeElement).toBeInTheDocument();
});

2. Temukan Elemen dengan screen:

screen adalah objek yang menyediakan fungsi untuk menemukan elemen di dalam DOM.

  • getByText: Menemukan elemen berdasarkan teks yang terkandung di dalamnya.
  • getByRole: Menemukan elemen berdasarkan peran ARIA.
  • getByLabelText: Menemukan elemen berdasarkan label yang terkait dengannya.

3. Assertions:

  • toBeInTheDocument: Memastikan elemen ada di dalam DOM.
  • toBeVisible: Memastikan elemen terlihat.
  • toBeDisabled: Memastikan elemen dinonaktifkan.

Contoh: Mengetes Tombol

import { render, screen, fireEvent } from '@testing-library/react';
import MyButton from './MyButton';

test('clicks the button and updates the counter', () => {
  render();
  const buttonElement = screen.getByRole('button');

  // Simulasikan klik pada tombol
  fireEvent.click(buttonElement);

  // Validasi bahwa counter telah diperbarui
  const counterElement = screen.getByText('Counter: 1');
  expect(counterElement).toBeInTheDocument();
});

Tips Tambahan

  • Gunakan fireEvent untuk mensimulasikan interaksi pengguna: Klik, fokus, perubahan input, dll.
  • Gunakan waitFor untuk menunggu elemen muncul: Berguna untuk komponen yang memiliki state yang berubah secara asinkron.
  • Pertimbangkan untuk menggunakan userEvent untuk tes yang lebih kompleks: userEvent menyediakan API tingkat tinggi untuk mensimulasikan interaksi pengguna yang lebih realistis.

Kesimpulan

Testing Library adalah alat yang powerful untuk menulis tes yang efektif untuk aplikasi React Anda. Dengan berfokus pada pengalaman pengguna, Anda dapat memastikan bahwa aplikasi Anda berfungsi sebagaimana mestinya dan mudah digunakan.

Related Post