Frontend Academy · Pelajaran

@testing-library/react: render, userEvent

Render komponen dalam DOM simulasi, lakukan kueri berdasarkan role dan teks label, jalankan interaksi pengguna dengan userEvent, dan lakukan assertion terhadap output yang terlihat.

@testing-library/react: render, userEvent adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Filosofi Testing Library

@testing-library mendorong pengujian yang menyerupai cara pengguna berinteraksi dengan antarmuka. Lakukan kueri berdasarkan peran, label, dan teks — bukan berdasarkan detail implementasi seperti nama kelas CSS atau bagian dalam komponen.

Memasang Testing Library

Pasang Testing Library untuk React dan paket userEvent untuk menyimulasikan interaksi pengguna.

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

render() — Memasang Komponen

render(<Component />) memasang komponen dalam DOM simulasi. Fungsi ini mengembalikan fungsi kueri untuk menemukan elemen.

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

test('renders button with label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Membuat Kueri Elemen

Utamakan kueri dalam urutan berikut: getByRole (dapat diakses), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue. Gunakan queryBy* saat menguji ketidakberadaan elemen. Gunakan findBy* untuk elemen asinkron.

// Prefer (accessible):
screen.getByRole('button', { name: /submit/i });
screen.getByLabelText('Email');

// For text content:
screen.getByText('Welcome!');

// Existence check:
expect(screen.queryByText('Error')).not.toBeInTheDocument();

// Async appearance:
await screen.findByText('Data loaded');

userEvent — Menyimulasikan Tindakan Pengguna

userEvent menyimulasikan interaksi pengguna nyata: mengetik, mengeklik, dan navigasi papan ketik. Pendekatan ini lebih realistis daripada fireEvent yang lebih lama.

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

test('typing in input', async () => {
  const user = userEvent.setup();
  render(<SearchInput />);

  const input = screen.getByRole('textbox', { name: /search/i });
  await user.type(input, 'react hooks');

  expect(input).toHaveValue('react hooks');
});

Menguji Pengiriman Formulir

Isi bidang formulir lalu kirimkan. Verifikasi hasilnya — apa yang dilihat pengguna setelah pengiriman.

test('submitting the login form', async () => {
  const onLogin = jest.fn();
  const user = userEvent.setup();
  render(<LoginForm onLogin={onLogin} />);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.type(screen.getByLabelText('Password'), 'secret123');
  await user.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

Pencocok Khusus jest-dom

@testing-library/jest-dom menambahkan pencocok yang berguna: toBeInTheDocument(), toBeVisible(), toBeDisabled(), toHaveValue(), toHaveClass(), dan toHaveFocus().

Menguji Pembaruan Komponen Asinkron

Gunakan waitFor() atau kueri findBy* untuk elemen yang muncul secara asinkron (setelah pengambilan data, setelah waktu tunggu).

test('shows data after loading', async () => {
  render(<UserList />);

  expect(screen.getByRole('status')).toHaveTextContent('Loading');

  const items = await screen.findAllByRole('listitem');
  expect(items).toHaveLength(3);
});

Menguji Status Pemuatan dan Kesalahan

Buat mock respons fetch untuk menguji berbagai status. MSW (Mock Service Worker) adalah alat terbaik untuk membuat mock respons API dalam pengujian.

Menguji Aksesibilitas

Testing Library secara alami mendorong aksesibilitas — jika Anda tidak dapat membuat kueri elemen berdasarkan peran atau label, elemen tersebut kemungkinan tidak dapat diakses. Gunakan jest-axe untuk audit aksesibilitas otomatis dalam pengujian.

Jangan Menguji Detail Implementasi

Hindari: membuat kueri berdasarkan nama kelas CSS, mengimpor status internal komponen, dan menguji apakah metode tertentu dipanggil. Uji perilaku dari sudut pandang pengguna: apa yang mereka lihat dan apa yang terjadi saat mereka berinteraksi.

Pemeriksaan Singkat

Fungsi kueri Testing Library mana yang sebaiknya diutamakan untuk menemukan elemen interaktif?

Rangkuman: @testing-library/react

render() memasang komponen dalam DOM simulasi. Buat kueri berdasarkan peran, label, dan teks — bukan detail implementasi. Gunakan userEvent.setup() untuk interaksi pengguna yang realistis. Gunakan findBy* untuk elemen asinkron. Gunakan jest-dom untuk pernyataan yang mudah dibaca. Lakukan pengujian dari sudut pandang pengguna: apa yang mereka lihat dan lakukan. Komponen yang dapat diakses lebih mudah diuji.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “@testing-library/react: render, userEvent” gratis?

Ya — teks lengkap “@testing-library/react: render, userEvent” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “@testing-library/react: render, userEvent”?

Render komponen dalam DOM simulasi, lakukan kueri berdasarkan role dan teks label, jalankan interaksi pengguna dengan userEvent, dan lakukan assertion terhadap output yang terlihat. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “@testing-library/react: render, userEvent” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Penyiapan Jest dan Test Dasar
@testing-library/react: render, userEvent
@testing-library/vue: memasang komponen
Mocking Modul dan Pemanggilan API

← Kembali ke Frontend Academy