Mocking Modul dan Pemanggilan API
Buat mock untuk modul ES dengan jest.mock(), buat stub fetch dengan MSW (Mock Service Worker), dan uji komponen yang bergantung pada data eksternal tanpa pemanggilan jaringan sungguhan.
Mocking Modul dan Pemanggilan API adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Mengapa Menggunakan Mock?
Pengujian unit harus terisolasi. Panggilan API nyata lambat, tidak dapat diandalkan, dan mahal. Penggunaan mock mengganti dependensi dengan pengganti pengujian terkontrol yang mengembalikan respons yang dapat diprediksi.
jest.mock() — Membuat Mock Seluruh Modul
jest.mock('module-path') mengganti seluruh modul dengan versi yang dibuat mock secara otomatis. Semua ekspor menjadi stub jest.fn(). Panggil mockReturnValue atau mockResolvedValue untuk menetapkan nilai pengembalian.
jest.mock('./api');
import { fetchUser } from './api';
(fetchUser as jest.Mock).mockResolvedValue({ id: 1, name: 'Alice' });
test('renders user name', async () => {
render(<Profile userId="1" />);
await screen.findByText('Alice');
expect(fetchUser).toHaveBeenCalledWith('1');
});jest.fn() — Stub Manual
jest.fn() membuat fungsi mock yang dapat Anda lacak dan kendalikan. Ini berguna untuk props fungsi panggilan balik dan dependensi layanan.
const onSubmit = jest.fn();
render(<Form onSubmit={onSubmit} />);
await user.click(screen.getByRole('button', { name: /submit/i }));
expect(onSubmit).toHaveBeenCalledOnce();
expect(onSubmit).toHaveBeenCalledWith({ email: 'alice@example.com' });Pengaturan Ulang Mock dengan beforeEach
Atur ulang mock di antara pengujian untuk mencegah kebocoran status. Gunakan jest.clearAllMocks() dalam beforeEach.
beforeEach(() => {
jest.clearAllMocks(); // reset call counts and implementations
});
afterAll(() => {
jest.restoreAllMocks(); // restore original implementations
});MSW — Mock Service Worker
MSW mencegat panggilan fetch/XHR nyata pada tingkat jaringan menggunakan Service Worker (peramban) atau pencegat Node.js (pengujian). Tulis penangan permintaan yang mengembalikan respons palsu.
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
const server = setupServer(
http.get('/api/users', () => {
return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());Penggantian MSW per Pengujian
Ganti penangan bawaan untuk skenario pengujian tertentu.
test('handles server error', async () => {
server.use(
http.get('/api/users', () => new HttpResponse(null, { status: 500 }))
);
render(<UserList />);
await screen.findByText(/server error/i);
});Membuat Tiruan localStorage
Gunakan jest.spyOn untuk membuat tiruan metode Penyimpanan Web dalam pengujian yang menggunakan localStorage.
beforeEach(() => {
const store: Record<string, string> = {};
jest.spyOn(Storage.prototype, 'getItem').mockImplementation((key) => store[key] ?? null);
jest.spyOn(Storage.prototype, 'setItem').mockImplementation((key, val) => { store[key] = val; });
});Membuat Tiruan Pewaktu
jest.useFakeTimers() menggantikan setTimeout/setInterval dengan versi yang dikendalikan Jest. jest.runAllTimers() mempercepat semua pewaktu hingga selesai.
jest.useFakeTimers();
test('shows toast for 3 seconds', () => {
render(<Toast message="Saved!" />);
expect(screen.getByText('Saved!')).toBeInTheDocument();
jest.advanceTimersByTime(3000);
expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
});
afterEach(() => jest.useRealTimers());Pola Pabrik Modul
Untuk TypeScript, pabrik modul tiruan mengembalikan tipe yang tepat.
jest.mock('./services/auth', () => ({
login: jest.fn().mockResolvedValue({ token: 'test-token' }),
logout: jest.fn()
}));Pengujian Cuplikan — Gunakan Secukupnya
Pengujian cuplikan menyimpan representasi terserialisasi dari keluaran komponen dan gagal jika representasi tersebut berubah. Pengujian ini mudah dibuat, tetapi dapat menghasilkan positif palsu yang mengganggu. Gunakan hanya untuk komponen presentasi yang stabil dan murni.
Pemeriksaan Singkat
Apa keunggulan utama MSW dibandingkan jest.mock('fetch') untuk membuat tiruan API?
Ringkasan: Membuat Tiruan
jest.mock() menggantikan modul. jest.fn() membuat rintisan yang dapat dilacak. Atur ulang tiruan dalam beforeEach. MSW mencegat HTTP pada tingkat jaringan — pendekatan membuat tiruan yang paling realistis. Gunakan penggantian server.use() per pengujian untuk skenario kesalahan. Gunakan pewaktu palsu untuk kode yang bergantung pada waktu. Utamakan MSW untuk pengujian integrasi komponen.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mocking Modul dan Pemanggilan API” gratis?
Ya — teks lengkap “Mocking Modul dan Pemanggilan API” 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 “Mocking Modul dan Pemanggilan API”?
Buat mock untuk modul ES dengan jest.mock(), buat stub fetch dengan MSW (Mock Service Worker), dan uji komponen yang bergantung pada data eksternal tanpa pemanggilan jaringan sungguhan. 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 4 dari 4.
Berapa lama pelajaran “Mocking Modul dan Pemanggilan API” 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