MSW, eller Mock Service Worker lar deg som utvikler definere API-endepunkter som din klient kan kalle på nettverksnivået. Det vil si at du slipper masse ekstra boilerplate-kode når du trenger å starte utvikling mot for eksempel et uferdig api.
Hva
Med MSW slipper du å tenke på servere eller databaser som må være tilgjengelig når du skal utvikle. Du kan fokusere på dataene du forventer fra API'ene applikasjonen din kaller, og være sikker på at du får svaret du forventer når du utvikler. Du har full frihet til å definere hvilke data som returneres og statuskode for endepunktet. I tillegg kan du enkelt simulere feil fra et endepunkt, eller definere en realistisk delay, eller en eksplisitt delay.
En realistisk delay som MSW kaller det, tar utgangspunkt i en tilfeldig delay mellom ~100 - 400ms. En eksplisitt delay lar deg som utvikler sette akkurat den verdien du selv ønsker for å representere en gitt mengde tid serveren skal vente før den svarer.
Hvor skal jeg bruke MSW?
MSW kan brukes i en ren frontend-app, som en del av en backend-app, i enhetstester eller i fulle integrasjonstester med rammeverk som for eksempel Playwright eller Cypress.
Kom i gang
For å komme i gang installer du msw med kommandoen
npm install msw@latest --save-devVi kan se for oss en applikasjon som returnerer julesanger
så kan du lage en fil mock/handlers.ts der du definerer API-endepunktene dine slik:
import { http, HttpResponse } from 'msw'
export const handlers = [
// Intercept "GET requesten til mittapi.no/julesanger
http.get('https://mittapi.no/julesanger', () => {
// ...og responder med en json payload som matcher forventet // resultat fra API'et
return HttpResponse.json([
{
id: "123",
navn: "Deilig er jorden"
},
{
{
id: "321",
navn: "På låven sitter nissen"
}
}
])
}),
]Når du har definert endepunkte(ne) dine må du starte serveren. Dette skjer litt forskjellig avhengig av om du integrerer mot nettleseren, Node.js eller React Native. For spesifikke integrasjonsdetaljer finner du det du trenger på sidene til MSW.
For å integrere mot browseren gjør du følgende:
npx msw init <PUBLIC_DIR> --save
// <PUBLIC_DIR> = mappen der public-filene dine ligger i prosjektetlag så en fil /mocks/browser.ts som ser slik ut:
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)og til slutt så starter du mock-serveren bare under lokal utvikling med følgende kodesnutt:
// src/index.ts eller annen fil som rendrer React-app'en din
import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './App'
async function enableMocking() {
if (process.env.NODE_ENV !== 'development') {
return
}
const { worker } = await import('./mocks/browser')
// `worker.start()` returns a Promise that resolves
// once the Service Worker is up and ready to intercept requests.
return worker.start()
}
enableMocking().then(() => {
ReactDOM.render(<App />, rootElement)
})Nå gjenstår det bare å bekrefte at alt har fungert knirkefritt. Det gjør du ved å starte applikasjonen din lokalt, åpne nettleseren og gå til console i dev tools. Da bør du se meldingen under:
[MSW] Mocking enabled.Når du har fått verifisert i console at MSW sier "Mocking enabled" kan du skrive din vanlige HTTP request til julesanger-api'et og få svar fra mock'en.
Nå gjenstår det bare for deg å beskrivet api'ene din applikasjon integrerer mot og komme i gang med utviklingen!
Hvis du ønsker et eksempel med kode for oppsett så finner du det her ✨