So erstellen Sie einen Mock-API-Server in JavaScript

Die Entwicklung und das Testen eines Frontend-Features können schwierig sein – besonders, wenn das benötigte Backend noch nicht bereit ist. Diese Abhängigkeit von einer Backend-API verlangsamt häufig den Entwicklungsprozess.

In solchen Situationen kann Ihnen die Entwicklung einer Mock-API viel Zeit sparen: Sie können Ihr Feature unabhängig vom Backend entwickeln und leichter testen sowie mögliche Fehlerfälle Ihrer API erkennen, bevor sie bereitsteht.

In diesem Artikel erfahren Sie mehr über Mock-API-Server, über Tools zum Erstellen von Mock-APIs, darüber, wie Sie damit Entwicklung und Tests beschleunigen können, und wie Sie einen einfachen Mock-Server einrichten.

Was ist ein Mock-API-Server?

Ein Mock-API-Server ist ein simulierter API-Server, der realistische Antworten auf die Anfragen eines Clients liefert. In der Regel dient ein Mock-API-Server als Ersatz für einen Backend-Server, der sich noch in der Entwicklung befindet.

Ein Mock-API-Server ahmt eine echte API mithilfe von Platzhalterdaten mit realistischen Antwortwerten nach. Viele funktionale und nicht-funktionale Eigenschaften der ursprünglichen Komponente, etwa die dauerhafte Speicherung von Daten, fehlen jedoch.

Mock-API-Server lassen sich in verschiedenen Szenarien einsetzen, darunter:

• Entwicklung: Mock-API-Server heben vorübergehend die Abhängigkeit zwischen Frontend- und Backend-Teams auf. So können beide Teams unabhängig voneinander an ihren Komponenten arbeiten, sie entwickeln und testen.

• Tests: Mock-API-Server erleichtern das Testen, einen entscheidenden Teil der Softwareentwicklung. Das Frontend-Team kann damit seine Features testen, ohne darauf zu warten, dass das Backend-Team eine voll funktionsfähige API entwickelt. Außerdem verhindern Mock-API-Server, dass eine echte API durch Testdaten verunreinigt wird, da alle Testaufrufe an den Mock-API-Server und nicht an die echte API gehen.

• Externe Komponenten: Mock-API-Server helfen auch dabei, externe Abhängigkeiten zu simulieren, wenn Sie Tools wie Storybook verwenden, um Frontend-Features zu präsentieren.

Best Practices für Mock-APIs

Wenn Sie einen Mock-API-Server erstellen, sollten Sie die folgenden Best Practices beachten:

• Eine Mock-API sollte dasselbe Schema und dieselben Schnittstellen wie die tatsächliche API unterstützen. So sind die Antworten realistischer.

• Wenn Ihre Anwendung externe Abhängigkeiten benötigt, sollte Ihre Mock-API diese ebenfalls simulieren.

• Eine Mock-API sollte die Weiterleitung von Anfragen unterstützen. So können Sie schrittweise von Mock-Antworten zu echten Antworten wechseln, sobald die echte API entwickelt wurde.

• Eine Mock-API sollte unerwartete Fehler, langsame Leistung und ungültige Benutzereingaben simulieren können. So stellen Sie sicher, dass Ihre Anwendungen mit diesen Szenarien richtig umgehen können.

Tools zum Mocken von APIs

Es gibt viele Tools, mit denen Sie Mock-API-Server erstellen können. Dazu gehören:

• Mock Service Worker (MSW): Mock Service Worker ist eine Bibliothek zum Mocken von APIs, die die Service Worker API nutzt. Mit dieser API kann MSW tatsächliche Anfragen abfangen und als Proxy-Server Mock-Antworten zurückgeben. Die Anfragen werden auf Netzwerkebene abgefangen, sodass Ihre Anwendung nicht erkennt, dass die Antworten von einer Mock-API stammen.

• Postman: Postman ist eine Plattform zum Erstellen, Verwenden, Testen und Dokumentieren von APIs. Mit Postman können Sie außerdem Mock-API-Server erstellen, die gespeicherte Mock-Daten zurückgeben. Postman gleicht die Konfiguration der Anfrage mit den gespeicherten Beispielen ab und antwortet mit den Daten, die am besten zur Konfiguration passen. Die interaktive grafische Benutzeroberfläche von Postman erleichtert die Einrichtung eines Postman-Mock-Servers.

• Mirage JS: Mirage JS ist eine Bibliothek zum Mocken von APIs, mit der Sie JavaScript-Anwendungen ohne Backend-Dienste entwickeln und testen können. Mit Mirage JS lassen sich dynamische Szenarien einfach erstellen, wodurch Ihre Mock-API realistischer wird. Dank der Möglichkeit, dynamische Szenarien zu erstellen, und der In-Memory-Datenbank bietet Mirage JS die größte Flexibilität beim Erstellen von Mock-API-Servern.

Einen Mock-API-Server mit Mirage JS erstellen

In diesem Abschnitt erfahren Sie, wie Sie mit Mirage JS einen einfachen Mock-API-Server erstellen.

Voraussetzungen

Bevor Sie beginnen, benötigen Sie Folgendes:

• Node.js Version 16 oder höher auf Ihrem System installiert.

• Die IDE Ihrer Wahl.

• Grundkenntnisse in React.js.

Wenn Sie die Schritte in Ihrem Editor nachvollziehen möchten, klonen Sie zunächst das GitHub-Repository des Tutorials.

Ihren Mock-Server einrichten

Führen Sie die folgenden Befehle in Ihrem Terminal aus, um die erforderlichen Abhängigkeiten zu installieren und Ihren Entwicklungsserver zu starten:

1npm install
2npm run start

Sie sollten ein sich drehendes Widget sehen, aber keine Funktionalität in der App. Der Grund: Ihre App versucht, Daten von einer API abzurufen, die noch nicht bereit ist. Um Ihren Entwicklungsprozess zu beschleunigen, erstellen Sie einen Mock-Server.

Erstellen Sie in Ihrem src-Verzeichnis eine Datei namens mock.js und fügen Sie den folgenden Codeblock hinzu:

1//mock.js
2import { createServer } from "miragejs";
3
4const createMockServer = function () {
5 let server = createServer();
6
7 return server;
8};
9
10export default createMockServer;

Im obigen Codeblock haben Sie createServer aus miragejs importiert. Diese Funktion startet einen Mirage-Server mit einem bestimmten Konfigurationsobjekt. Das Konfigurationsobjekt kann Informationen wie die verschiedenen Routen enthalten, die Ihr Server verarbeitet, eine Mock-In-Memory-Datenbank und einen Namespace.

Die Funktion createMockServer erstellt die Instanz und gibt sie zurück.

Eine Mock-In-Memory-Datenbank erstellen

Als Nächstes erstellen Sie mithilfe der Datenebene von Mirage eine einfache Mock-Datenbank, in der Daten gespeichert und abgerufen werden können.

Passen Sie Ihre Datei mock.js so an, dass sie dem folgenden Codeblock entspricht:

1//mock.js
2import { createServer, Model } from "miragejs";
3
4const createMockServer = function () {
5 let server = createServer({
6   models: {
7     todos: Model
8   },
9 });
10
11 return server;
12};
13
14export default createMockServer;

Im überarbeiteten Codeblock importieren Sie außerdem Model, die Basisdefinition für Mirage-Modelle, aus miragejs.

Anschließend haben Sie createServer ein Konfigurationsobjekt als Argument übergeben. Im Konfigurationsobjekt ist die Eigenschaft models auf ein Objekt gesetzt. Innerhalb des Objekts der Eigenschaft models ist todos auf model gesetzt. Dadurch wird Mirage angewiesen, eine leere todos-Collection in seiner In-Memory-Datenbank zu erstellen.

Eine In-Memory-Datenbank mit Daten befüllen

Als Nächstes fügen Sie mithilfe des Hooks seeds manuell Daten zur In-Memory-Datenbank hinzu. Mit dem Hook seeds können Sie Mirage mit einigen Anfangsdaten befüllen, sodass Ihre Mock-API beim ersten Start der Anwendung Daten zum Rendern hat.

Um Ihre Datenbank mit Anfangsdaten zu befüllen, fügen Sie den folgenden Codeblock unter der Eigenschaft models in Ihrem Konfigurationsobjekt für createServer hinzu:

1    //mock.js
2   seeds(server) {
3    server.create("todo", {
4      id: 1,
5      title: "Reach out to a friend",
6      completed: true,
7    });
8
9    server.create("todo", {
10      id: 2,
11      title: "Make breakfast",
12      completed: true,
13    });
14
15    server.create("todo", {
16      id: 3,
17      title: "Text John Doe",
18      completed: false,
19    });
20  },

Im obigen Codeblock haben Sie den Hook seeds zu Ihrem Konfigurationsobjekt hinzugefügt. Der Hook seeds erhält eine Instanz des Servers als Argument.

Anschließend haben Sie Daten zur In-Memory-Datenbank hinzugefügt, indem Sie die Methode create für die Serverinstanz aufgerufen haben. Die Methode create erhält zwei Argumente: den singularisierten Namen (z. B. wird „todos“ zu „todo“) der Collection, in der Sie die Daten speichern möchten, sowie die zu speichernden Daten.

Mock-Route-Handler definieren

Als Nächstes müssen Sie mithilfe des Hooks routes die Route-Handler definieren. Mit dem Hook routes können Sie für jeden verfügbaren Pfad und jede HTTP-Anfrage Route-Handler festlegen.

Fügen Sie den folgenden Codeblock direkt unter dem Hook seeds zum Konfigurationsobjekt von createServer hinzu, um die Route-Handler für Ihre API-Aufrufe hinzuzufügen:

1routes() {
2    this.namespace = "api/todos";
3
4    this.get("/", (schema, request) => {
5      return schema.todos.all().models
6    });
7  },

Im obigen Codeblock haben Sie den Hook routes verwendet, um einen globalen Namespace für alle Route-Handler (api/todos) festzulegen. So müssen Sie ihn nicht in jedem Route-Handler wiederholen.

Anschließend haben Sie mit der Methode get einen GET-Route-Handler definiert. Die Methode erhält einen Pfad und einen Callback. Im Callback erhält die App Zugriff auf das Argument schema, mit dem Sie auf Ihre In-Memory-Datenbank zugreifen, sowie auf das Argument request, über das Sie Zugriff auf den Anfrage-Body erhalten.

Schließlich haben Sie alle todos in Ihrer In-Memory-Datenbank zurückgegeben, indem Sie die Methode all für schema.todos aufgerufen haben. Auf das In-Memory-Modell können Sie zugreifen, indem Sie seinen Namen an das Argument schema anhängen. Die Methode all gibt ein Collection-Objekt mit den beiden Eigenschaften modelName und models zurück.

Die Eigenschaft modelName enthält den Namen Ihres Modells. Die Eigenschaft models ist ein Array mit Ihren vorab eingefügten Daten.

Definieren Sie den POST-Route-Handler, indem Sie den folgenden Code zu Ihrem Hook routes hinzufügen:

1  this.post("/new", (schema, request) => {
2       let attrs = JSON.parse(request.requestBody);
3       attrs.completed = false;
4
5       return schema.todos.create(attrs);
6   });

In der obigen Callback-Funktion rufen Sie den Anfrage-Body aus dem Request-Objekt ab und parsen ihn. Anschließend setzen Sie die Eigenschaft completed auf false, da neue Aufgaben standardmäßig nicht abgeschlossen sein sollen. Mirage weist jedem neuen Todo automatisch eine eindeutige id zu, indem die id des letzten Todos erhöht wird, das ursprünglich in die In-Memory-Datenbank eingefügt wurde. Schließlich haben Sie die Methode `create`` verwendet, um das neue Todo zur Datenbank hinzuzufügen.

Definieren Sie als Nächstes den PATCH-Route-Handler, indem Sie den folgenden Code zu Ihrem Hook routes hinzufügen:

1   this.patch("/:id", (schema, request) => {
2       let newAttrs = JSON.parse(request.requestBody);
3       let { id } = request.params;
4       let todo = schema.todos.find(id);
5       return todo.update(newAttrs);
6   });

In der obigen Callback-Funktion rufen Sie den Anfrage-Body aus dem Request-Objekt ab und parsen ihn. Anschließend extrahieren Sie die Eigenschaft id aus dem dem Anfrage-Body zugeordneten Objekt params. Mit der Methode find suchen Sie in Ihrer In-Memory-Datenbank nach einem Todo mit der passenden id. Schließlich aktualisieren Sie das Todo mithilfe der Methode update.

Definieren Sie den DELETE-Route-Handler, indem Sie den folgenden Code zu Ihrem Hook routes hinzufügen:

1  this.delete("/:id", (schema, request) => {
2       let { id } = request.params;
3       return schema.todos.find(id).destroy();
4   });

In dieser Funktion haben Sie die Eigenschaft id aus dem dem Anfrage-Body zugeordneten Objekt params extrahiert. Anschließend haben Sie mit der Methode find in Ihrer In-Memory-Datenbank nach einem Todo mit der passenden id gesucht und die Methode destroy aufgerufen, um es aus Ihrer In-Memory-Datenbank zu entfernen.

Ihr fertiger Mock-Server sollte wie folgt aussehen:

1import { createServer, Model } from "miragejs";
2
3const createMockServer = function () {
4 let server = createServer({
5   models: {
6     todos: Model,
7   },
8
9   seeds(server) {
10     server.create("todo", {
11       id: 1,
12       title: "Reach out to a friend",
13       completed: true,
14     });
15
16     server.create("todo", {
17       id: 2,
18       title: "Make breakfast",
19       completed: true,
20     });
21
22     server.create("todo", {
23       id: 3,
24       title: "Text John Doe",
25       completed: false,
26     });
27   },
28
29   routes() {
30     this.namespace = "api/todos";
31
32     this.get("/", (schema, request) => {
33       return schema.todos.all().models;
34     });
35
36     this.post("/new", (schema, request) => {
37       let attrs = JSON.parse(request.requestBody);
38       attrs.completed = false;
39
40       return schema.todos.create(attrs);
41     });
42
43     this.patch("/:id", (schema, request) => {
44       let newAttrs = JSON.parse(request.requestBody);
45       let id = request.params.id;
46       let todo = schema.todos.find(id);
47       return todo.update(newAttrs);
48     });
49
50     this.delete("/:id", (schema, request) => {
51       let id = request.params.id;
52       return schema.todos.find(id).destroy();
53     });
54   },
55 });
56
57 return server;
58};
59
60export default createMockServer;

Importieren Sie schließlich die Funktion createMockServer in Ihre Datei App.js und starten Sie Ihren Mock-Server, indem Sie die Funktion createMockServer in Ihrer Datei App.js aufrufen.

Zum Beispiel:

1//app.js
2import createMockServer from "./mock";
3
4createMockServer();

Wenn Sie Ihre React-Anwendung öffnen, sollte die To-do-App die vorab eingefügten Daten aus Ihrer Mock-API anzeigen.

Nun können Sie Ihre To-do-App genauso testen wie mit einer echten Backend-API.

Fazit zu Mock-API-Servern

In diesem Artikel haben Sie mehr über Mock-API-Server, ihre Bedeutung, Best Practices für ihre Erstellung und hilfreiche Tools erfahren. Außerdem haben Sie gelernt, wie Sie mit Mirage JS einen einfachen Mock-API-Server erstellen.

Wenn Sie Mock-API-Server in Ihren Entwicklungsprozess integrieren, beschleunigen Sie die Entwicklung und können unabhängig arbeiten – für einen besseren Workflow.