Jest dan React Testing Library adalah dua pustaka utama yang banyak digunakan dalam pengujian (testing) aplikasi React. Testing sangat penting untuk memastikan bahwa aplikasi bekerja sesuai harapan dan untuk mencegah bug. Berikut penjelasan lengkapnya.
### **1. Jest**
Jest adalah framework testing berbasis JavaScript yang sering digunakan untuk menguji aplikasi berbasis React. Jest menawarkan berbagai fitur seperti **snapshot testing**, **mocking**, dan **async testing**.
#### **Instalasi**
Jest sudah termasuk dalam Create React App, jadi jika Anda menggunakan CRA, tidak perlu instalasi tambahan. Namun, jika Anda ingin menginstalnya sendiri:
```bash
npm install --save-dev jest
#### **Penggunaan Dasar**
File test biasanya menggunakan ekstensi `.test.js` atau `.spec.js`. Misalnya, kita memiliki fungsi sederhana berikut:
```javascript
// math.js
export function add(a, b) {
return a + b;
}
Berikut cara membuat pengujian dengan Jest:
```javascript
// math.test.js
import { add } from './math';
test('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});
#### **Beberapa Fungsi Penting di Jest**
- **test**: Digunakan untuk mendefinisikan test case. Formatnya `test('description', callback)`.
- **expect**: Digunakan untuk menyatakan ekspektasi hasil.
- **toBe**: Matcher yang membandingkan nilai secara ketat.
#### **Snapshot Testing**
Snapshot testing digunakan untuk memeriksa apakah output komponen masih sama. Ini sangat berguna untuk komponen UI.
```javascript
import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';
test('Button renders correctly', () => {
const tree = renderer.create(<Button label="Click Me" />).toJSON();
expect(tree).toMatchSnapshot();
});
Saat pertama kali dijalankan, Jest akan membuat file snapshot. Ketika dijalankan kembali, Jest akan membandingkan hasil terbaru dengan snapshot tersebut.
### **2. React Testing Library**
React Testing Library dirancang untuk menguji komponen React dengan berfokus pada cara pengguna berinteraksi dengan aplikasi, bukan pada detail implementasinya. Library ini bekerja sangat baik bersama Jest.
#### **Instalasi**
React Testing Library juga sudah termasuk di Create React App. Namun, jika Anda ingin menginstalnya secara manual:
```bash
npm install --save-dev @testing-library/react
#### **Penggunaan Dasar**
Misalkan kita memiliki komponen sederhana yang menampilkan dan menutup modal:
```javascript
// Modal.js
import React, { useState } from 'react';
function Modal() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(true)}>Open Modal</button>
{isOpen && (
<div role="dialog">
<p>This is a modal</p>
<button onClick={() => setIsOpen(false)}>Close</button>
</div>
)}
</div>
);
}
export default Modal;
Pengujian komponen ini dengan React Testing Library:
```javascript
// Modal.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Modal from './Modal';
test('opens and closes the modal', () => {
render(<Modal />);
// Pastikan modal tidak muncul pertama kali
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
// Klik tombol Open Modal
fireEvent.click(screen.getByText(/open modal/i));
// Modal sekarang harus muncul
expect(screen.getByRole('dialog')).toBeInTheDocument();
// Klik tombol Close
fireEvent.click(screen.getByText(/close/i));
// Modal sekarang harus tertutup
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
Pada contoh di atas:
- **render**: Merender komponen yang diuji.
- **screen**: Memudahkan mencari elemen dengan metode seperti `getByText` dan `getByRole`.
- **fireEvent**: Memicu event tertentu, misalnya klik.
#### **Fitur React Testing Library**
- **getBy...**: Mengambil elemen yang ada (akan error jika tidak ditemukan).
- **queryBy...**: Mengambil elemen, mengembalikan null jika tidak ada.
- **findBy...**: Mengambil elemen secara async (untuk elemen yang mungkin muncul setelah beberapa waktu).
### **Perbedaan Utama Jest vs. React Testing Library**
- **Jest**: Framework untuk menjalankan test, cocok untuk pengujian unit, snapshot, dan async. Jest mendukung mocking, timer palsu, dan fitur lainnya.
- **React Testing Library**: Lebih fokus pada pengujian komponen dengan simulasi interaksi pengguna. Library ini bekerja lebih baik bersama Jest sebagai runner untuk mengeksekusi pengujian.