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-dev

Vi 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 prosjektet

lag 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 ✨