Advanced React Series

Solidify Your Code: React Testing Mastery

Jangan biarkan bug sampai ke user. Pelajari teknik pengujian dari komponen terkecil hingga alur aplikasi menyeluruh.

15 Menit Baca
Intermediate
Updated: Jan 2024

Unit Testing

Validasi logika komponen secara terisolasi menggunakan Jest.

Unit testing adalah fondasi piramida pengujian. Fokusnya memastikan fungsi kecil bekerja sesuai harapan tanpa mempedulikan dependensi luar.

  • Test render komponen
  • Validasi props & state awal
  • Simulasi user event sederhana
Counter.test.js 
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

describe('Counter Component', () => {
  test('renders initial count', () => {
    render();
    const count = screen.getByText(/count: 0/i);
    expect(count).toBeInTheDocument();
  });

  test('increments count', () => {
    render();
    const btn = screen.getByRole('button');
    fireEvent.click(btn);
    expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
  });
});

Integration Testing

Memastikan beberapa unit bekerja harmonis saat disatukan.

LoginForm.test.js 
test('submits form with data', async () => {
  const onSubmit = jest.fn();
  render();

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: 'user@test.com' }
  });
  
  fireEvent.click(screen.getByRole('button'));

  await waitFor(() => {
    expect(onSubmit).toHaveBeenCalledWith({
      email: 'user@test.com'
    });
  });
});

Integration test memeriksa interaksi antar komponen, seperti bagaimana input field berinteraksi dengan tombol submit.

Pro Tip:

Gunakan waitFor untuk menangani operasi asinkron seperti API call.

E2E Testing (Cypress)

Simulasi perilaku user sungguhan dari awal hingga akhir.

Skenario Login Flow

  1. 1

    Visit Page

    Bot membuka halaman login.

  2. 2

    Input Credentials

    Mengisi email & password valid.

  3. Assert Redirect

    Memastikan user masuk ke dashboard.

describe('Auth Flow', () => {
  it('should login successfully', () => {
    cy.visit('/login');
    
    cy.get('[data-cy=email]')
      .type('admin@saung.com');
      
    cy.get('[data-cy=pass]')
      .type('secret123');
      
    cy.get('button[type=submit]')
      .click();
      
    cy.url().should('include', '/dashboard');
  });
});