React Testing Library
Merender React component dalam test lalu memeriksa output yang benar-benar tersedia untuk user.
Tujuan belajar
- Menjelaskan peran render dan screen pada component test
- Menulis assertion pada visible output component
- Membedakan component test dari pemeriksaan implementation internal
- Memahami kebutuhan DOM test environment pada local project
Isi lesson
6 blok- 1.Render component, lalu cari apa yang dapat ditemukan userBelum selesaiWajib
- 2.Test status profile yang terlihat di layarBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan menguji library ReactBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Render component, lalu cari apa yang dapat ditemukan user
WajibReact Testing Library membantu merender component dalam environment test dan mencari output dengan screen. Cara berpikirnya sederhana: render component dengan props tertentu, lalu pastikan teks, role, label, atau state yang penting benar-benar muncul. Ini lebih dekat dengan pengalaman user dibanding memeriksa instance component atau state hook secara langsung. Untuk DOM matcher seperti toBeInTheDocument, project lokal biasanya menyiapkan jest-dom bersama environment test yang sesuai.
Bagian ini memengaruhi progres lesson.
Test status profile yang terlihat di layar
Wajibimport "@testing-library/jest-dom/vitest";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
function ProfileStatus({ isComplete }: { isComplete: boolean }) {
return <p>{isComplete ? "Profile lengkap" : "Profile belum lengkap"}</p>;
}
describe("ProfileStatus", () => {
it("shows the complete status", () => {
render(<ProfileStatus isComplete={true} />);
expect(screen.getByText("Profile lengkap")).toBeInTheDocument();
});
});render membuat component tersedia dalam environment test. screen.getByText mencari teks yang dapat dibaca user lalu matcher memeriksa keberadaannya. Test tidak perlu mengetahui apakah component memakai ternary, if, atau helper lain selama output yang dijanjikan tetap sama.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususTest profile status visible output
Render ProfileStatus lalu assert output yang terlihat ketika profile lengkap. Preview tidak menjalankan React Testing Library.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Apa yang diperiksa oleh component test yang sehat setelah render ProfileStatus?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
WajibJangan menguji library React
Tidak perlu membuat test untuk membuktikan useState dapat mengubah state atau React dapat merender JSX. Tulis test untuk behavior feature-mu: status mana yang muncul, action apa yang tersedia, dan perubahan apa yang user lihat setelah interaction. Test menjadi lebih singkat dan failure lebih informatif.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- render menyiapkan component untuk diuji dalam environment test.
- screen mencari output yang dapat ditemukan user.
- Component test fokus pada props, output, dan behavior feature.
- DOM matcher serta test environment perlu dikonfigurasi pada local project.
- Berikutnya, user-event membantu test mensimulasikan interaction user yang lebih realistis.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Render component, lalu cari apa yang dapat ditemukan user.