Front-End Testing: Perkenalan dengan Jest dan React Testing Library

Gambar: Greg Rakozy, "Front-end Developer", Unsplash 

Pendahuluan

Dalam pengembangan aplikasi web modern, pengujian front-end merupakan aspek penting untuk memastikan stabilitas dan kualitas aplikasi. Dua alat yang paling banyak digunakan oleh pengembang React adalah Jest dan React Testing Library. Artikel ini akan membahas pentingnya pengujian front-end, bagaimana Jest dan React Testing Library bekerja, serta mengapa keduanya menjadi standar industri. Kami juga akan menyertakan penjelasan tentang Kebijakan Privasi demi menjaga kualitas konten yang sesuai dengan standar Google.

Kenapa Testing Itu Penting di Front‑End?

Seperti dikemukakan di DEV Community, testing frontend sangat penting untuk mendeteksi bug lebih awal, meningkatkan kualitas kode, dan mempermudah kolaborasi tim dev.to. Selain itu, pengguna bisa berkaca pada otomatisasi dan pengujian integrasi layaknya developer profesional, sesuai diskusi di Reddit:

“Testing allows you to write in stone how a given component should work… prevent bugs” udemy.com+3reddit.com+3dev.to+3

Dengan testing, kita tidak hanya menulis aplikasi, tetapi juga membangun kepercayaan dan stabilitas jangka panjang.

---

Memahami Peran Jest dan React Testing Library (RTL)

• Jest: test runner serbaguna untuk JavaScript—menjalankan test suites, assertions, snapshot, mocking dll testing-library.com+3medium.com+3stackoverflow.com+3.

• RTL: seperti kekasih tes untuk user—mengedepankan interaksi komponen seperti pengguna nyata, menghindari implementasi lampau .

Malyton Lucas menjelaskan:

“RTL is all about mimicking how real users interact… no more testing implementation details!” linkedin.com+1dev.to+1

Dengan kombinasi ini, kita dapat menghadirkan tes yang tahan terhadap refaktor dan mudah dipahami sepanjang waktu.

---

Setup & Instalasi Cepat

Install dependency:

bash

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

Atau:

bash

yarn add --dev jest @testing-library/react @testing-library/jest-dom

Tambahkan setup di package.json atau jest.config.js:

js

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  testEnvironment: 'jsdom',
};

---

Contoh Test: Komponen Sederhana

a) Rendering & Query

File: HelloWorld.js

jsx

export default function HelloWorld() {
  return <div>Hello World</div>;
}

Test: HelloWorld.test.js

js

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

test('renders Hello World text', () => {
  render(<HelloWorld />);
  const el = screen.getByText(/Hello World/i);
  expect(el).toBeInTheDocument();
});

Singkat dan user‑centered—fokus pada output bukan implementasi.

b) Event Handling

Komponen Counter.js:

jsx

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <p>{count}</p>
    </>
  );
}

Test:

js

test('increments counter', () => {
  render(<Counter />);
  const btn = screen.getByText('+');
  fireEvent.click(btn);
  expect(screen.getByText('1')).toBeInTheDocument();
});

dev.to+15medium.com+15refine.dev+15tianyaschool.medium.com+3dhiwise.com+3refine.dev+3

---

Snapshot Testing Jest

Jest dapat menyimpan snapshot DOM untuk memantau perubahan:

jsx

import renderer from 'react-test-renderer';
import Link from './Link';

test('Link hover changes class', () => {
  const tree = renderer.create(<Link page="/">Home</Link>).toJSON();
  expect(tree).toMatchSnapshot();
});

Setiap perubahan UI akan memicu revisi snapshot, sesuai dokumentasi Jest reddit.com+2medium.com+2dev.to+2thinksys.com+5keploy.io+5stackoverflow.com+5.

---

Mocking API & Asynchronous Event

Untuk fungsi fetch data, gunakan jest.mock() atau msw. Contoh:

js

jest.mock('../api');
import { fetchUser } from '../api';
…
fetchUser.mockResolvedValue({ name: 'John' });
…
await screen.findByText('John');

RTL & Jest memudahkan simulasi async dan isolasi dari layanan eksternal.

---

Strategy Testing Layers

Layer	Tujuan
Unit	Tes fungsi/fungsi kecil (state, utilitas)
Integrasi	Tes interaksi antar komponen API/Context
E2E	Tes alur pengguna lengkap (gunakan Cypress)

RTL fokus pada unit + integrasi, sementara E2E bisa pakai Cypress or Selenium tianyaschool.medium.com+4stackoverflow.com+4linkedin.com+4.

---

Menghindari Flaky Tests

Penelitian di arXiv menunjukkan test JavaScript tepercaya sering fluktuatif karena async atau state sharing .
Tips untuk avoid:

• Gunakan async/await dan findBy*, hindari timer manual.

• Bersihkan mocks di afterEach().

• Hazard test yang deterministik, tidak bergantung urutan.

---

Pengenalan React Testing Library

React Testing Library (RTL) fokus pada pengujian komponen dari perspektif pengguna, bukan implementasi teknis. Ini berarti kita menulis pengujian seperti bagaimana pengguna akan berinteraksi dengan aplikasi.

Fitur RTL:

• Pendekatan "testing what the user sees".

• Selektor berbasis teks dan peran.

• Integrasi yang mudah dengan Jest.

Contoh Penggunaan:

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

test('menampilkan judul halaman', () => {
  render(<App />);
  expect(screen.getByText(/selamat datang/i)).toBeInTheDocument();
});

---

Kombinasi Jest dan RTL

Menggabungkan Jest dan React Testing Library memberikan pendekatan menyeluruh terhadap pengujian aplikasi React. Dengan Jest sebagai test runner dan RTL sebagai alat render UI, pengujian menjadi lebih alami dan mudah dipahami.

Best Practices:

• Hindari pengujian implementasi internal.

• Gunakan selektor berdasarkan teks atau label, bukan class.

• Gunakan describe dan it atau test untuk struktur yang jelas.

---

Tipe-Tipe Pengujian dalam Front-End

Sebelum masuk lebih dalam ke Jest dan React Testing Library, penting untuk memahami beberapa jenis pengujian yang umum digunakan dalam pengembangan front-end:

1. Unit Testing

Unit testing fokus pada pengujian bagian terkecil dari aplikasi, seperti fungsi atau komponen individual. Misalnya, Anda ingin memastikan bahwa fungsi perhitungan diskon mengembalikan nilai yang benar.

2. Integration Testing

Pengujian ini memverifikasi apakah beberapa unit bekerja dengan baik secara bersama-sama. Misalnya, ketika komponen form mengirim data ke backend, apakah form menampilkan pesan sukses atau error dengan benar?

3. End-to-End (E2E) Testing

E2E testing memverifikasi seluruh alur aplikasi seperti yang dilakukan oleh pengguna. Tool seperti Cypress atau Playwright biasa digunakan untuk pengujian tipe ini, meskipun tidak dibahas dalam artikel ini.

4. Snapshot Testing

Snapshot testing digunakan untuk mendeteksi perubahan tidak disengaja pada tampilan UI. Biasanya digunakan untuk mendeteksi perubahan kecil yang mungkin tidak terlihat secara kasat mata.

---

Studi Kasus: Membuat Aplikasi Todo List dan Mengujinya

Untuk memahami manfaat Jest dan React Testing Library, mari kita bahas contoh nyata: membuat aplikasi Todo List sederhana dan mengujinya.

1. Struktur Komponen

jsx

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const handleAdd = () => {
    setTodos([...todos, input]);
    setInput('');
  };

  return (
    <div>
      <h1>Daftar Kegiatan</h1>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Tambahkan kegiatan"
      />
      <button onClick={handleAdd}>Tambah</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

2. Pengujian dengan React Testing Library

jsx

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

test('menambahkan item ke daftar todo', () => {
  render(<TodoApp />);
  const input = screen.getByPlaceholderText(/tambahkan kegiatan/i);
  const button = screen.getByText(/tambah/i);

  fireEvent.change(input, { target: { value: 'Belajar React' } });
  fireEvent.click(button);

  expect(screen.getByText('Belajar React')).toBeInTheDocument();
});

Pengujian ini meniru interaksi pengguna dan memverifikasi bahwa item baru muncul setelah tombol ditekan.

---

Continuous Integration (CI) dan Testing Otomatis

Integrasi pengujian ke dalam workflow CI/CD sangat penting untuk memastikan bahwa setiap commit yang masuk ke repository telah lolos pengujian.

Tools CI Populer:

• GitHub Actions: Gratis dan mudah digunakan, terutama untuk proyek open-source.

• GitLab CI/CD: Sangat terintegrasi dengan GitLab.

• CircleCI dan Travis CI: Digunakan oleh banyak tim skala menengah hingga besar.

Contoh File .yml GitHub Actions untuk Jest:

yaml

name: Run Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Run Jest tests
        run: npm test -- --watchAll=false

Dengan integrasi ini, Anda bisa langsung mengetahui apakah perubahan kode memengaruhi fitur lain dalam aplikasi.

---

Testing Mindset: Fokus pada Pengalaman Pengguna

React Testing Library mengedepankan prinsip "test behavior, not implementation". Ini berarti Anda disarankan untuk menulis pengujian seperti bagaimana pengguna berinteraksi dengan aplikasi, bukan bagaimana komponen dibangun.

Contoh Buruk:

jsx

const button = container.querySelector('.btn-primary'); // Tergantung class

Contoh Baik:

jsx

const button = screen.getByRole('button', { name: /tambah/i });

Dengan cara ini, pengujian Anda lebih tahan terhadap perubahan struktur internal, selama perilaku UI tetap sama.

---

Strategi Coverage Testing

Code coverage mengukur sejauh mana kode aplikasi telah diuji. Tools seperti Jest dapat menunjukkan berapa persen kode Anda yang telah tercakup oleh pengujian.

Menjalankan perintah:

bash

npm test -- --coverage

Akan menampilkan output seperti:

yaml

Statements   : 95.6%
Branches     : 88.9%
Functions    : 91.2%
Lines        : 94.7%

Namun, jangan hanya fokus pada angka. Kualitas pengujian lebih penting dari sekadar mencapai 100% coverage. Pastikan Anda menguji skenario edge case dan logika bisnis utama.

---

Testing Komponen yang Bergantung pada API

Aplikasi modern biasanya terhubung dengan API eksternal. Untuk mengetes komponen yang bergantung pada data API, Anda bisa menggunakan Mocking.

Contoh Pengujian API:

jsx

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ data: ['Item 1', 'Item 2'] }),
  })
);

test('menampilkan data dari API', async () => {
  render(<DataComponent />);
  const item = await screen.findByText('Item 1');
  expect(item).toBeInTheDocument();
});

Dengan pendekatan ini, Anda tidak tergantung pada API sungguhan, sehingga pengujian menjadi stabil dan cepat.

---

Testing Komponen dengan Context, Redux, atau Router

Banyak aplikasi React menggunakan state management seperti Redux, Context API, atau routing dengan React Router.

Untuk mengetes komponen yang tergantung pada konteks global atau router, Anda dapat membungkus komponen dalam provider:

jsx

import { BrowserRouter } from 'react-router-dom';

render(
  <BrowserRouter>
    <MyComponent />
  </BrowserRouter>
);

Untuk Redux:

jsx

import { Provider } from 'react-redux';
import store from './store';

render(
  <Provider store={store}>
    <MyComponent />
  </Provider>
);

Dengan begitu, Anda tetap bisa menguji komponen yang kompleks tanpa mengorbankan cakupan pengujian.

---

Meningkatkan Performa dan Keandalan Testing

Beberapa tips untuk meningkatkan kualitas dan keandalan pengujian:

• Gunakan screen.debug() untuk melihat output sementara.

• Hindari terlalu banyak waitFor kecuali benar-benar diperlukan.

• Pisahkan pengujian berdasarkan fitur di dalam folder __tests__.

• Gunakan mocks secara selektif, jangan berlebihan agar tidak menghilangkan realisme.

---

Praktik Terbaik dalam Pengujian Front-End

Untuk memastikan pengujian yang efektif dan efisien, berikut beberapa praktik terbaik yang dapat diterapkan:

1. Uji Perilaku, Bukan Implementasi

Fokuslah pada bagaimana pengguna berinteraksi dengan aplikasi, bukan pada detail implementasi internal. Misalnya, uji apakah tombol "Kirim" mengirimkan data dengan benar, bukan bagaimana fungsi handleSubmit diimplementasikan.

2. Gunakan Selektor yang Mewakili Pengalaman Pengguna

Pilih selektor berdasarkan teks atau peran, seperti getByText atau getByRole, daripada menggunakan class atau ID yang dapat berubah seiring waktu.

3. Hindari Snapshot Testing yang Berlebihan

Snapshot testing berguna untuk komponen yang jarang berubah. Namun, terlalu banyak snapshot dapat menyebabkan false positive dan menyulitkan pemeliharaan.

4. Isolasi Pengujian

Pastikan setiap pengujian berdiri sendiri dan tidak bergantung pada pengujian lain. Ini memudahkan identifikasi masalah dan mempercepat proses debugging.

5. Gunakan Mocking dengan Bijak

Mocking berguna untuk mengisolasi komponen dari dependensi eksternal. Namun, hindari over-mocking yang dapat mengaburkan perilaku nyata aplikasi.

---

Integrasi Pengujian dalam Alur Kerja CI/CD

Mengintegrasikan pengujian ke dalam alur kerja Continuous Integration/Continuous Deployment (CI/CD) memastikan bahwa setiap perubahan kode diuji sebelum diterapkan ke produksi.

Contoh Integrasi dengan GitHub Actions

yaml

name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Install Dependencies
        run: npm install
      - name: Run Tests
        run: npm test -- --coverage

Dengan konfigurasi ini, setiap push atau pull request ke cabang main akan memicu pengujian otomatis, memastikan stabilitas kode secara berkelanjutan.

---

Pengujian Komponen Kompleks

Aplikasi React sering kali menggunakan konteks global, seperti Redux atau React Context, serta routing dengan React Router. Berikut cara menguji komponen yang menggunakan fitur-fitur tersebut:

1. Pengujian dengan Redux

Gunakan Provider dari Redux untuk membungkus komponen yang diuji, dan sediakan store mock untuk mengontrol state selama pengujian.

jsx

import { Provider } from 'react-redux';
import { render } from '@testing-library/react';
import configureStore from 'redux-mock-store';
import MyComponent from './MyComponent';

const mockStore = configureStore([]);
const store = mockStore({ /* initial state */ });

render(
  <Provider store={store}>
    <MyComponent />
  </Provider>
);

2. Pengujian dengan React Router

Gunakan MemoryRouter dari React Router untuk mensimulasikan routing dalam pengujian.

jsx

import { MemoryRouter } from 'react-router-dom';

render(
  <MemoryRouter initialEntries={['/initial-route']}>
    <MyComponent />
  </MemoryRouter>
);

---

📈 Meningkatkan Kualitas dan Performa Pengujian

Beberapa strategi untuk meningkatkan kualitas dan performa pengujian:

1. Gunakan user-event untuk Simulasi Interaksi

user-event menyediakan API yang lebih realistis untuk mensimulasikan interaksi pengguna dibandingkan fireEvent.

jsx

import userEvent from '@testing-library/user-event';

userEvent.click(screen.getByText('Submit'));

2. Optimalkan Waktu Eksekusi Pengujian

Gunakan opsi --runInBand untuk menjalankan pengujian secara berurutan, yang dapat membantu dalam debugging.

bash

npm test -- --runInBand

3. Gunakan jest.spyOn untuk Memantau Fungsi

jest.spyOn memungkinkan Anda memantau pemanggilan fungsi tertentu tanpa mengubah implementasinya.

jsx

const spy = jest.spyOn(api, 'fetchData');

Testing End-to-End (E2E): Pelengkap Pengujian Unit

Meskipun Jest dan React Testing Library sangat efektif untuk pengujian unit dan integrasi di tingkat komponen, pengujian end-to-end (E2E) juga penting untuk memastikan bahwa seluruh alur aplikasi berjalan sebagaimana mestinya dari sudut pandang pengguna.

Apa Itu Pengujian E2E?

Testing E2E meniru perilaku pengguna dari awal hingga akhir dalam alur nyata aplikasi — seperti login, checkout, atau pengisian formulir. Alat populer untuk pengujian E2E termasuk Cypress dan Playwright.

Contoh Sederhana dengan Cypress

javascript

describe('Formulir Kontak', () => {
  it('mengirimkan data dengan benar', () => {
    cy.visit('/kontak');
    cy.get('input[name="nama"]').type('Budi');
    cy.get('input[name="email"]').type('budi@example.com');
    cy.get('textarea[name="pesan"]').type('Halo!');
    cy.get('button[type="submit"]').click();
    cy.contains('Pesan berhasil dikirim');
  });
});

Perbedaan dengan Unit Testing

Aspek	Unit Test (Jest/RTL)	E2E Test (Cypress)
Fokus	Komponen individual	Seluruh alur aplikasi
Kecepatan	Sangat cepat	Relatif lambat
Stabilitas	Tinggi	Bisa dipengaruhi jaringan/API
Kebutuhan	Unit testing diperlukan	Pelengkap, bukan pengganti

Meskipun pengujian E2E membutuhkan waktu lebih lama, ia sangat bermanfaat untuk mengidentifikasi masalah nyata dalam pengalaman pengguna.

---

Pengaruh Testing terhadap SEO Teknis

Meskipun pengujian front-end secara langsung tidak meningkatkan peringkat SEO, ada dampak tidak langsung yang sangat penting, terutama dalam konteks Core Web Vitals dan pengalaman pengguna (UX), yang kini menjadi faktor penentu dalam ranking Google.

1. Menghindari Bug yang Mengganggu Navigasi

Jika suatu komponen navigasi rusak karena update, pengguna akan mengalami frustasi — meningkatkan bounce rate dan menurunkan performa SEO.

Dengan pengujian, Anda bisa mendeteksi dan memperbaiki bug ini lebih awal, menjaga konsistensi pengalaman pengguna.

2. Meningkatkan Waktu Muat (Load Time)

Komponen yang rusak atau terlalu berat bisa memperlambat halaman. Testing dan refactoring memungkinkan Anda mengevaluasi performa dan menghapus bagian yang tidak efisien.

3. Memastikan Kompatibilitas Perangkat

Pengujian UI memastikan antarmuka tampil baik di berbagai resolusi dan perangkat — ini sangat penting untuk SEO mobile-first.

---

Dokumentasi dan Reproduksi Bug

Salah satu keunggulan pengujian terstruktur adalah dokumentasi yang dapat diuji ulang (repeatable documentation). Setiap bug yang ditemukan dan diperbaiki sebaiknya didokumentasikan melalui test case agar tidak muncul kembali di masa depan.

Contoh Kasus:

Sebuah bug muncul ketika pengguna menekan tombol submit dua kali, menyebabkan duplikasi data.

Solusi:

1. Perbaiki bug di komponen.

2. Tambahkan pengujian:

jsx

test('menghindari pengiriman ganda', async () => {
  render(<Formulir />);
  const tombol = screen.getByRole('button', { name: /kirim/i });
  userEvent.click(tombol);
  userEvent.click(tombol);
  await waitFor(() => expect(screen.getByText(/pesan berhasil/i)).toBeInTheDocument());
  expect(fetch).toHaveBeenCalledTimes(1);
});

Dengan pendekatan ini, bug tidak hanya diperbaiki, tetapi dicegah agar tidak terulang.

Best Practices Testing

• Gunakan query user-first: getByRole, getByText, bukan query ke detail DOM tianyaschool.medium.com+2linkedin.com+2stackoverflow.com+2.

• Tambahkan komentar pendek pada test.

• Integrasikan di CI/CD—GitHub Actions, GitLab CI, dsb 🔁

• Sediakan coverage report (--coverage) agar tahu sejauh mana cakupan test.

---

Kesimpulan

Testing bukan berarti repot. Dengan Jest + React Testing Library, kita bisa membuat aplikasi lebih andal dan mudah dipelihara. Tes-strategi user-centric mirip flow pengguna nyata, sehingga tim bisa lanjut refaktor tanpa takut rusak.

Yuk, baca sekarang:
https://www.higosense.my.id/2025/04/mengintegrasikan-front-end-dan-back-end.html
https://www.higosense.my.id/2025/04/cara-optimalkan-performa-front-end-lazy.html
https://www.higosense.my.id/2025/05/mengapa-setiap-developer-harus-memahami.html