mock-service-worker

Mocking

Mit Mocks simulieren/imitieren wir Komponenten, die wir aus irgendeinem Grund nicht direkt verwenden wollen oder können.

API Mocking mit Mock Service Worker

Ein typisches Beispiel sind APIs. Durch Mocking können wir mit einer API interagieren, ohne dass sie schon existieren muss (z.B. weil das Backend-Team parallel an ihr arbeitet), und wissen immer genau, welche Daten zurückkommen werden.

Mock Service Worker ist ein sehr mächtiges und beliebtes Tool hierfür.

MSW Setup

Wir installieren MSW mit npm install --save-dev msw

Handler.ts-Datei erstellen

Wir erstellen src/mock/handlers.ts. Hier werden die einzelnen Routen gemockt.

Diese Datei kann z.B. so aussehen:

import { http, HttpResponse } from 'msw'
import { birds } from '../data/birds'
export const handlers = [
  // wir fangen hier alle GET Requests an https://tolleapi.com/hello ab
  http.get('https://tolleapi.com/hello', () => {
    // und beantworten sie mit dem Objekt {text: "Hallo Welt!"}
    return HttpResponse.json({text: "Hallo Welt!"})
  }),
]

Dieser Code definiert einen Handler für Mock Service Worker (MSW), um eine API zu simulieren.

  • Zunächst werden die erforderlichen Funktionen von MSW importiert: http und HttpResponse.
  • Dann wird ein Array namens handlers erstellt. Dieses Array enthält die zu simulierenden API-Routen.
  • Im Beispiel werden GET-Anfragen an die Adresse https://tolleapi.com/hello abgefangen.
  • Als Antwort auf diese Anfrage wird ein JSON-Objekt in der Form {text: "Hallo Welt!"} zurückgegeben.

Dieser Handler ist nützlich für die Entwicklung ohne eine echte API. Zum Beispiel kann man damit die Frontend-Entwicklung fortsetzen, wenn das Backend noch nicht fertig ist. Außerdem kann er in Tests verwendet werden, um konsistente und vorhersehbare API-Antworten zu gewährleisten.

Browser-Datei erstellen

Dann erstellen wir eine weitere Datei namens src/mock/browser.ts

Hier werden unsere Routen gesammelt und speziell für die Verwendung im Browser verpackt.

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)

Dieser Code bildet einen Teil des Mock Service Worker (MSW) Setups.

  • import { setupWorker } from 'msw/browser': Importiert die setupWorker Funktion aus der Browser-Version von MSW.
  • import { handlers } from './handlers': Importiert die zuvor definierten API-Mock-Handler.
  • export const worker = setupWorker(...handlers): Ruft die setupWorker Funktion auf, um einen MSW-Worker zu erstellen und konfiguriert ihn mit handlers. Dieser Worker wird im Browser laufen und die spezifizierten API-Anfragen abfangen und Mock-Antworten generieren.

Dieser Code stellt die grundlegende Konfiguration bereit, damit MSW in der Browser-Umgebung funktionieren kann.

Service Worker erstellen

Jetzt erstellen wir mit npx msw init ./public --save einen Service Worker.

Dieser wird später eingehende Anfragen abfangen und umschreiben.

Nun können wir MSW integrieren.

App für Mock-Daten neu konfigurieren

Das machen wir in App.tsx, und zwar bevor wir React initialisieren:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

async function enableMocking() {
  if (process.env.NODE_ENV !== "development") {
    return;
  }
  const { worker } = await import("./mocks/browser");
  // worker.start() gibt ein Promise zurück, das aufgelöst wird, wenn der Service Worker bereit ist und beginnt, Anfragen abzufangen.
  return worker.start();
}

enableMocking().then(() =>
  createRoot(document.getElementById("root")!).render(
    <StrictMode>
      <App />
    </StrictMode>
  )
);

1. Import-Anweisungen

import { StrictMode } from "react";

import { createRoot } from "react-dom/client";

import App from "./App.tsx";

import "./index.css";

Diese Anweisungen importieren die grundlegenden Komponenten und Stile der React-Anwendung. StrictMode wird verwendet, um während der Entwicklung potenzielle Probleme zu erkennen. createRoot ist eine neue Render-Methode, die mit React 18 eingeführt wurde.

2. enableMocking-Funktion

async function enableMocking() {
  if (process.env.NODE_ENV !== "development") {
    return;
  }
  const { worker } = await import("./mocks/browser");
  return worker.start();
}

Diese Funktion macht Folgendes:

  • Sie führt eine Umgebungsprüfung durch. Sie läuft nur in der Entwicklungsumgebung.
  • Sie importiert den MSW-Worker dynamisch. Dies ist wichtig, um unnötigen Code im Production-Build zu vermeiden.
  • Der Aufruf von worker.start() startet den Service Worker und macht ihn bereit, API-Anfragen abzufangen.

Erläuterung zu process.env.NODE_ENV

process.env.NODE_ENV ist eine häufig verwendete Umgebungsvariable in Node.js-Anwendungen. Diese Variable gibt an, in welcher Umgebung die Anwendung läuft. Sie hat in der Regel drei Hauptwerte:

  • development: Bezeichnet die Entwicklungsumgebung. In diesem Modus sind normalerweise Debugging-Funktionen aktiviert.
  • production: Bezeichnet die Produktionsumgebung. Leistungsoptimierungen sind aktiviert und Debugging-Funktionen sind deaktiviert.
  • test: Bezeichnet die Testumgebung. Wird bei der Ausführung automatisierter Tests verwendet.

In unserem Code stellt die Prüfung if (process.env.NODE_ENV !== "development") sicher, dass die Anwendung den Mock-Service nur in der Entwicklungsumgebung verwendet. Dies garantiert, dass in der Produktionsumgebung eine Verbindung zur echten API hergestellt wird.

3. Starten der React-Anwendung

enableMocking().then(() =>
  createRoot(document.getElementById("root")!).render(
    <StrictMode>
      <App />
    </StrictMode>
  )
);

Dieser Abschnitt:

  • Ruft zuerst die Funktion enableMocking() auf und wartet auf deren Abschluss.
  • Erstellt mit createRoot eine React-Wurzel im DOM-Element mit der ID 'root'.
  • Rendert die App-Komponente innerhalb von StrictMode. StrictMode führt einige Überprüfungen durch und gibt Warnungen aus, um potenzielle Probleme hervorzuheben.

Diese Struktur stellt sicher, dass MSW bereit ist, bevor die React-Anwendung startet. Dadurch können API-Aufrufe, die beim Start der Anwendung gemacht werden, sofort abgefangen und gemockt werden. Dies ermöglicht die Frontend-Entwicklung ohne echtes Backend und erlaubt die kontrollierte Simulation von API-Antworten.

Nun sollte alles bereit sein, und ein Fetch-Request an die entsprechende Route sollte uns "gemockte" Daten zurückgeben

Github Repo:

https://github.com/snahmd/birdsift

Share:

Kommentar hinterlassen