Pengujian React
React Testing Library, Jest, Vitest, pengujian komponen, mocking, interaksi pengguna, coverage
1Apa perbedaan utama antara getBy, queryBy, dan findBy di React Testing Library?
Apa perbedaan utama antara getBy, queryBy, dan findBy di React Testing Library?
Jawaban
getBy melempar error jika elemen tidak ada (assertions sinkron), queryBy mengembalikan null jika elemen tidak ada (memeriksa ketidakhadiran), dan findBy mengembalikan Promise untuk elemen asinkron. Gunakan getBy secara default untuk elemen yang harus ada, queryBy untuk memverifikasi bahwa elemen tidak ada, dan findBy untuk menunggu elemen muncul setelah delay.
2Apa keuntungan utama getByRole dibandingkan getByTestId?
Apa keuntungan utama getByRole dibandingkan getByTestId?
Jawaban
getByRole mendorong praktik terbaik aksesibilitas dengan menargetkan elemen berdasarkan peran ARIA semantik mereka (button, textbox, heading), yang meningkatkan aksesibilitas komponen untuk screen reader. getByTestId memerlukan penambahan atribut data-testid buatan yang tidak memberikan nilai bagi pengguna akhir. React Testing Library merekomendasikan untuk memprioritaskan getByRole, getByLabelText, dan getByText sebelum getByTestId.
3Bagaimana cara menguji rendering kondisional dari elemen yang TIDAK ada di DOM?
Bagaimana cara menguji rendering kondisional dari elemen yang TIDAK ada di DOM?
Jawaban
Gunakan queryBy untuk memverifikasi ketidakhadiran elemen, karena mengembalikan null alih-alih melempar error. Contoh: expect(screen.queryByText('Error')).toBeNull() atau expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy akan melempar error dan membuat test gagal, sementara findBy menunggu elemen muncul (timeout jika tidak ada).
Mengapa React Testing Library merekomendasikan untuk TIDAK menguji detail implementasi?
Apa perbedaan antara render dan screen di React Testing Library?
+17 pertanyaan wawancara
Topik wawancara React / Next.js lainnya
Dasar-Dasar JavaScript
Dasar-Dasar React
React Hooks
Siklus hidup komponen
React Router
Manajemen state dengan Context
Form & Controlled Components
Pengambilan Data & API
React Query (TanStack Query)
Styling & CSS-in-JS
Dasar-dasar Next.js
TypeScript dengan React
Data Fetching Next.js
Server Actions Next.js
Routing & Navigasi Next.js
API Routes Next.js
Metadata & SEO di Next.js
Middleware & Auth di Next.js
Zustand State Management
Optimasi Performa React
Error Boundaries & Error Handling
Advanced React Patterns
Fitur Lanjutan Next.js
Deployment & Produksi Next.js
Architecture & Design Patterns
React Server Components
Internasionalisasi Next.js
Keamanan React & Praktik Terbaik
Kuasai React / Next.js untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis