Cara Testing komponen di React

Testing komponen di React adalah langkah penting untuk memastikan aplikasi berfungsi sesuai dengan yang diharapkan. Jest dan React Testing Library adalah dua alat populer yang digunakan untuk menguji komponen React.

Pendahuluan

• Jest: Framework testing JavaScript yang memungkinkan Anda menulis tes yang dapat dijalankan secara otomatis.

• React Testing Library: Pustaka untuk menguji komponen React dengan fokus pada interaksi pengguna dan perilaku komponen.

Mengatur Lingkungan Testing

Sebelum mulai menulis tes, Anda perlu memastikan bahwa Jest dan React Testing Library sudah terinstal dalam proyek Anda.

Instalasi

Jika Anda menggunakan Create React App, Jest dan React Testing Library sudah terinstal secara default. Namun, jika belum, Anda dapat menginstalnya dengan perintah berikut:

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

Contoh Testing Komponen

Misalkan kita memiliki komponen sederhana bernama Counter yang memiliki tombol untuk menambah nilai counter.

File src/Counter.js:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Menulis Tes untuk Komponen

Sekarang, kita akan menulis tes untuk komponen Counter menggunakan Jest dan React Testing Library.

File src/Counter.test.js:

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

test('menampilkan nilai counter awal', () => {
  render(<Counter />);
  const counterElement = screen.getByText(/Counter: 0/i);
  expect(counterElement).toBeInTheDocument();
});

test('menambah nilai counter ketika tombol diklik', () => {
  render(<Counter />);
  const buttonElement = screen.getByText(/Increment/i);
  fireEvent.click(buttonElement);
  const counterElement = screen.getByText(/Counter: 1/i);
  expect(counterElement).toBeInTheDocument();
});

Penjelasan Kode

• Render Komponen: render(<Counter />); digunakan untuk merender komponen Counter dalam lingkungan pengujian.

• Mencari Elemen: screen.getByText(/Counter: 0/i); digunakan untuk mencari elemen yang menampilkan teks Counter: 0.

• Asersi: expect(counterElement).toBeInTheDocument(); memastikan bahwa elemen tersebut ada dalam dokumen.

• Simulasi Event: fireEvent.click(buttonElement); mensimulasikan klik pada tombol.

• Mengulangi Pencarian dan Asersi: Setelah event disimulasikan, kita mencari teks yang diperbarui dan memastikan itu benar.

Menjalankan Tes

Untuk menjalankan tes, Anda dapat menggunakan perintah berikut:

npm test

Perintah ini akan memulai Jest dan secara otomatis menemukan serta menjalankan semua file yang memiliki ekstensi .test.js atau .spec.js.

Penambahan Jest Matchers dengan @testing-library/jest-dom

Untuk asersi yang lebih kaya, seperti memeriksa apakah elemen ada di DOM, React Testing Library menyediakan @testing-library/jest-dom.

Contoh Penggunaan:

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

test('button should be in the document', () => {
  render(<Counter />);
  const buttonElement = screen.getByText(/Increment/i);
  expect(buttonElement).toBeInTheDocument();
});

Tips dan Best Practices

• Testing Behavior: Fokus pada perilaku komponen, bukan implementasi. Tes harus memvalidasi hasil dari interaksi pengguna dan output UI.

• Testing User Flow: Gunakan fireEvent untuk mensimulasikan interaksi pengguna seperti klik, input, dan lain-lain.

• Snapshot Testing: Jest mendukung snapshot testing, yang berguna untuk memverifikasi tampilan UI.

Sumber

• React Testing Library Documentation

• Jest Documentation

• Create React App Documentation

Dengan menggunakan Jest dan React Testing Library, Anda dapat menulis tes yang robust dan memvalidasi bahwa komponen React Anda berfungsi seperti yang diharapkan, bahkan saat aplikasi tumbuh dalam kompleksitas.