Jika Anda menulis pengujian frontend, kemungkinan besar Anda pernah menemukan Mock Service Worker (MSW). Ini adalah pustaka pilihan untuk mencegat permintaan di dalam browser dan Node, dan untuk pengujian unit dan komponen, sulit untuk dikalahkan. Panduan ini menjelaskan apa yang dilakukan MSW dengan baik, di mana ia mulai tidak diskalakan, dan kapan platform mocking API yang di-host lebih masuk akal.
tombol
Apa itu Mock Service Worker?
Mock Service Worker adalah pustaka JavaScript yang mencegat permintaan jaringan di sumbernya. Di browser, ia mendaftarkan Service Worker yang menangkap panggilan `fetch` dan `XMLHttpRequest` yang keluar. Di Node, ia menambal lapisan permintaan sehingga handler yang sama berjalan di Jest atau Vitest. Anda menulis handler permintaan yang cocok dengan metode dan jalur, lalu mengembalikan respons apa pun yang Anda inginkan.
Desainnya cerdas. Kode aplikasi Anda terus memanggil API jaringan yang sesungguhnya. MSW berada di tengah dan menjawabnya, sehingga Anda tidak perlu men-stub `fetch` atau menukar klien HTTP Anda. Definisi mock yang sama berfungsi dalam pengujian dan dalam build pengembangan yang sedang berjalan, itulah sebabnya banyak tim React dan Vue menggunakannya. Anda dapat menggali kode sumber MSW di GitHub untuk melihat cara kerja lapisan intersepsi.
Handler yang umum terlihat seperti ini:
import { http, HttpResponse } from 'msw'
export const handlers = [
http.get('/api/users/:id', ({ params }) => {
return HttpResponse.json({ id: params.id, name: 'Ada Lovelace' })
}),
]
Itulah daya tariknya. Mock berada di samping kode Anda, dikontrol versinya dengan pengujian Anda, dan berjalan di mana pun JavaScript Anda berjalan.
Di mana MSW bersinar
MSW sangat cocok ketika mock dan konsumen berada dalam basis kode yang sama. Beberapa kasus di mana ini adalah alat yang tepat:
- Pengujian komponen dan unit. Render sebuah komponen, biarkan ia menembakkan permintaannya yang sesungguhnya, dan kembalikan data yang sudah ada. Tidak perlu menggabungkan dua pengujian. Jika Anda membandingkannya dengan memata-matai klien secara langsung, lihat bagaimana ini berbeda dari mock Jest dari panggilan API.
- Pengembangan frontend lokal. Bangun UI sebelum backend ada. Alihkan handler untuk mensimulasikan pemuatan, kesalahan, atau status kosong sesuai permintaan.
- CI Deterministik. Pengujian tidak menyentuh server langsung, sehingga tidak bermasalah dengan kondisi jaringan atau data pementasan bersama.
- Satu bahasa, satu tim. Ketika orang yang menulis mock adalah orang yang mengonsumsinya, menjaga handler dalam repositori adalah cara paling sederhana.
Jika itu menggambarkan situasi Anda, Anda mungkin tidak membutuhkan hal lain. MSW gratis, sumber terbuka, dan dibangun khusus untuk ini.
Di mana MSW mulai menjadi beban
Hal yang sama yang membuat MSW hebat dalam satu repo, mock yang hidup sebagai kode di repo itu, adalah yang membatasinya setelah lebih banyak orang terlibat. Inilah di mana tim cenderung melebihinya.
Konsumen Non-JavaScript
Handler MSW adalah JavaScript. Jika tim seluler Anda menulis Swift atau Kotlin, atau pengujian integrasi backend Anda berjalan di Go atau Python, mereka tidak dapat mengimpor handler Anda. Mereka akan membutuhkan mock mereka sendiri, yang akan berbeda dari milik Anda. Server mock yang agnostik bahasa yang berbicara HTTP melalui URL sungguhan bekerja untuk setiap klien, tanpa memandang bahasa.
Mock Bersama yang Selalu Aktif
MSW berjalan di dalam suatu proses. Tidak ada URL bersama yang dapat diakses oleh insinyur QA, desainer, atau tim mitra dari mesin mereka sendiri. Saat Anda menginginkan satu titik akhir yang digunakan beberapa orang sekaligus, Anda memerlukan server mock yang di-host dengan alamat stabil, bukan Service Worker yang terikat pada satu tab browser.
Alur Kerja Berbasis Desain Awal dan Skema
Jika Anda mendesain API di OpenAPI sebelum menulis kode, Anda menginginkan mock yang dihasilkan dari spesifikasi secara otomatis, sehingga mock tidak dapat bertentangan dengan kontrak. MSW mengharapkan Anda untuk menulis handler secara manual. Menghasilkan mock langsung dari skema adalah model yang berbeda. Anda dapat membaca lebih lanjut tentang pendekatan ini dalam panduan mocking API dan pola-pola di sekitarnya.
Data Dinamis Realistis dalam Skala Besar
MSW mengembalikan apa pun yang dikodekan oleh handler Anda. Untuk data yang mirip aslinya di banyak bidang, Anda menulis logika itu sendiri. Platform yang menggabungkan generasi gaya faker dan inferensi nama bidang memberi Anda respons yang realistis tanpa perlu membuatnya satu per satu secara manual.
MSW vs. Platform Mocking API Lengkap
Berikut adalah perbandingan jujur. Tidak ada kolom yang "lebih baik" secara abstrak; keduanya memecahkan masalah yang berbeda.
| Kemampuan | Mock Service Worker | Platform API yang di-host (mis. Apidog) |
|---|---|---|
| Berjalan di dalam pengujian unit/komponen JS | Ya, native | Tidak, itu bukan pustaka pengujian JS |
| Agnostik bahasa melalui HTTP | Tidak (hanya JS) | Ya, klien apa pun |
| URL bersama untuk seluruh tim | Tidak | Ya, server mock yang di-host |
| Hasilkan mock dari OpenAPI | Manual | Otomatis dari skema |
| Generasi data cerdas/dinamis | Dikodekan secara manual | Terpasang |
| Tersimpan di repo Anda dengan pengujian | Ya | Disimpan di proyek bersama |
| Biaya | Gratis, sumber terbuka | Tingkat gratis + paket berbayar |
Kesimpulannya: MSW adalah pilihan yang tepat untuk pengujian frontend dan pengembangan lokal. Platform seperti Apidog adalah pilihan yang tepat ketika mock harus dibagikan, netral bahasa, atau didorong oleh spesifikasi.
Apidog sebagai Pelengkap, bukan Pengganti
Sebagai klarifikasi, Apidog bukanlah pengganti langsung MSW di dalam Jest atau Vitest. Ini bukan pustaka JavaScript yang Anda impor ke dalam file pengujian. Anggap saja sebagai lapisan di atas pengujian unit Anda, tempat di mana mock menjadi sumber daya bersama yang agnostik bahasa untuk seluruh tim.
Inilah yang terlihat dalam praktik. Anda mendesain atau mengimpor API di Apidog, dan itu secara otomatis menghasilkan titik akhir mock dari skema. Mock tersebut mendapatkan URL nyata yang dapat dipanggil oleh rekan satu tim frontend, seluler, dan QA Anda. Apidog mengisi respons dengan data realistis dengan menyimpulkan dari nama bidang, sehingga bidang yang disebut `email` mengembalikan email dan `createdAt` mengembalikan tanggal. Anda juga dapat menulis aturan khusus ketika Anda membutuhkan respons 500 tertentu atau kasus ekstrem tertentu.
Karena mock berasal dari skema yang sama dengan desain dan pengujian Anda, mock tetap sinkron dengan kontrak. Itulah bagian yang tidak dapat dijamin oleh handler yang ditulis secara manual. Jika Anda ingin melihat bagaimana generasi skema-ke-mock dibandingkan di berbagai alat, rangkuman alat mocking API terbaik ini menempatkan opsi-opsi tersebut secara berdampingan.
Pembagian praktis yang diterapkan banyak tim:
- Pertahankan MSW untuk pengujian komponen dan unit di dalam repositori frontend.
- Gunakan mock yang di-host untuk integrasi antar-tim, demo, dan konsumen non-JS apa pun.
Anda tidak memilih salah satu. Anda menggunakan masing-masing di tempat yang sesuai. Unduh Apidog jika Anda ingin mencoba sisi hosting di samping pengaturan MSW yang sudah ada.
Alternatif MSW Lain yang Perlu Diketahui
MSW bukan satu-satunya pustaka mocking, dan platform bukan satu-satunya pilihan Anda. Tergantung pada tumpukan Anda:
- Mockoon adalah aplikasi desktop untuk membuat server mock lokal dengan cepat, dengan GUI alih-alih kode.
- WireMock adalah server mock berbasis Java, kuat untuk tim JVM dan pengujian kontrak.
- Prism oleh Stoplight menghasilkan mock langsung dari file OpenAPI melalui baris perintah.
- json-server mengubah file JSON menjadi REST API cepat untuk pembuatan prototipe.
Masing-masing memiliki kelebihan dan kekurangan. WireMock dan Prism condong ke pekerjaan backend dan kontrak; Mockoon dan json-server condong ke pengaturan lokal yang cepat. Jika hambatan Anda secara spesifik adalah "MSW tidak dapat membantu rekan tim non-JS saya," server mock berbasis HTTP apa pun menyelesaikannya. Untuk sudut pandang frontend yang lebih luas, lihat bagaimana tim menangani mocking API di React dengan Axios.
Pertanyaan yang Sering Diajukan
Apakah MSW gratis?
Ya. Mock Service Worker adalah sumber terbuka di bawah lisensi MIT dan gratis untuk digunakan dalam proyek apa pun, baik komersial maupun non-komersial. Anda hanya mulai membayar saat Anda beralih ke platform hosting untuk mock bersama, dan alat seperti Apidog juga menyertakan tingkatan gratis untuk itu.
Bisakah Apidog menggantikan MSW dalam pengujian unit saya?
Tidak, dan Anda tidak boleh mencoba melakukannya. MSW mencegat permintaan di dalam test runner JavaScript Anda. Apidog adalah platform yang di-host, bukan pustaka yang dapat diimpor, sehingga tidak dapat berada di dalam Jest atau Vitest seperti halnya MSW. Gunakan Apidog untuk mock bersama, lintas tim, atau berbasis skema. Jika Anda fokus murni pada sisi test runner, panduan tentang cara mem-mock panggilan API ini mencakup pendekatan-pendekatan dalam kode.
Apakah MSW berfungsi di Node, atau hanya di browser?
Keduanya. Di browser, MSW menggunakan Service Worker. Di Node, ia menambal lapisan permintaan sehingga handler yang sama berjalan di Jest, Vitest, atau lingkungan pengujian Node apa pun. Mode ganda itu adalah salah satu kekuatan terbesarnya untuk tim JS full-stack.
Kapan saya harus beralih dari MSW ke server mock yang di-host?
Beralih, atau lebih tepatnya menambahkan satu, ketika mock perlu dibagikan. Sinyal yang paling jelas: klien non-JavaScript membutuhkannya, beberapa orang membutuhkan URL stabil yang sama, atau Anda mendesain API dengan spesifikasi terlebih dahulu dan ingin mock dihasilkan dari OpenAPI secara otomatis.
Kesimpulan
MSW sangat baik dalam apa yang dibangun untuknya: mencegat permintaan di dalam JavaScript untuk pengujian frontend dan unit. Itu tidak mencoba menjadi mock yang dibagikan, di-host, dan agnostik bahasa, dan itu tidak masalah. Ketika mock Anda perlu keluar dari repo, ketika bahasa lain atau tim lain membutuhkannya, atau ketika Anda ingin mock dihasilkan dari spesifikasi, itulah saatnya untuk menambahkan platform lengkap di sampingnya.
Apidog menangani sisi bersama yang digerakkan oleh skema: server mock yang di-host dengan URL nyata, mock otomatis dari desain OpenAPI Anda, dan data realistis di luar kotak. Pertahankan MSW di mana ia kuat, dan biarkan Apidog mencakup semua hal di luar batas test runner Anda. Unduh Apidog dan arahkan frontend Anda ke mock bersama untuk melihat perbedaannya.
tombol