Reactjs Testing Patterns React Testing Library User Event Mocking Network Calls Test Resilience

React.js1 September 20262 menit baca

Reactjs Testing Patterns React Testing Library User Event Mocking Network Calls Test Resilience

Definisi

Testing komponen React dengan React Testing Library (RTL) berfokus pada perilaku yang dilihat user, bukan detail implementasi. RTL menyediakan query berbasis role, label, dan teks yang stabil terhadap perubahan class atau struktur DOM.

Kapan dipakai

Uji komponen yang punya logika non-trivial: form dengan validasi, interaksi async, state bersyarat, atau komponen yang memanggil API. Komponen murni presentasional sederhana biasanya tidak butuh test sendiri.

Cara kerja

Setup dasar

tsx

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from

Selesai membaca dokumentasi ini?

Kembali ke rujukan utama React.js untuk melanjutkan topik lainnya.

Kembali ke Kategori

tsx

import { rest } from 'msw';
import { setupServer } from 'msw/node';
 
const server = setupServer(
    rest.get('/api/user', (req, res, ctx) =>
        res(ctx.json({ name: 'Budi' }))
    )
);
 
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Reactjs Testing Patterns React Testing Library User Event Mocking Network Calls Test Resilience | Rujukan Pemrograman | Mahir.dev Academy

Reactjs Testing Patterns React Testing Library User Event Mocking Network Calls Test Resilience

Reactjs Testing Patterns React Testing Library User Event Mocking Network Calls Test Resilience

Definisi

Kapan dipakai

Cara kerja

Setup dasar

Selesai membaca dokumentasi ini?

Mock network call

Alur test

Contoh等待 async

Catatan implementasi

Kesalahan umum

Referensi terkait