Testing untuk Frontend Developer: Jest + React Testing Library

Testing masih sering di-skip oleh developer, padahal ini skill yang sangat dihargai di dunia kerja.

Kenapa Testing Penting?

1. Menangkap bugs sebelum production
2. Refactoring jadi aman
3. Dokumentasi behavior yang hidup
4. Meningkatkan kepercayaan saat deploy

Setup

npm install -D jest @testing-library/react @testing-library/jest-dom

Test Pertama

import { render, screen } from "@testing-library/react";
import { Button } from "./button";

test("renders button with text", () => {
  render(<Button>Click me</Button>);
  expect(screen.getByText("Click me")).toBeInTheDocument();
});

test("calls onClick when clicked", async () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click</Button>);
  await userEvent.click(screen.getByText("Click"));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Testing Async

test("loads and displays data", async () => {
  render(<UserProfile userId="123" />);
  expect(await screen.findByText("Sony")).toBeInTheDocument();
});

Tips

1. Test behavior, bukan implementation details
2. Gunakan getByRole > getByTestId
3. Minimal test happy path + error state
4. Jangan test styling — test functionality
5. Aim for 80% coverage di kode penting

Mulai dari test sederhana, lalu tingkatkan coverage secara bertahap.