Die Schönheit von MSW

Warum wir MSW lieben

Als wir damals versuchten, ein neues Projekt zu erstellen, dachten wir über die Möglichkeit nach, nicht so stark vom Backend abhängig zu sein. Unsere Idee war, Mocks für die aktuelle Arbeit des Backends zu erhalten und dann parallel fortzufahren. Dieser Ansatz würde es uns ermöglichen, die erforderlichen Daten bereitzuhalten, wenn das Backend seine Arbeit abgeschlossen hat, sodass wir keine Änderungen vornehmen müssten. Sobald das Backend bereitgestellt war, konnten wir die Mocks im Entwicklungsserver einfach deaktivieren und zu den echten Endpunkten wechseln.

Ich bin sicher, dass es viele Tools gibt, mit denen Sie Mocks erstellen und diese später durch echte Endpunkte ersetzen können. Wir haben jedoch eine tolle Lösung gefunden: Mock Service Worker (MSW).

Was ist Hausmüll?

MSW ist ein leistungsstarkes Tool, mit dem Sie Netzwerkanfragen abfangen und simulieren können. Es funktioniert sowohl auf der Client- als auch auf der Serverseite und ist daher unglaublich vielseitig. Mit MSW können Sie realistische Modelle für Ihre API-Endpunkte erstellen und so Ihre Anwendung entwickeln und testen, ohne auf das eigentliche Backend angewiesen zu sein.

Vorteile der Verwendung von Hausmüll

Lokale Entwicklung

MSW hilft dabei, während der lokalen Entwicklung zahlreiche Aufrufe des Backends zu vermeiden. Dies reduziert die Belastung der Backend-Dienste und beschleunigt den Entwicklungsprozess. Hier ist ein Beispiel dafür, wie Sie MSW für die lokale Entwicklung einrichten können:

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers =
  [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ];

// src/mocks/browser.js
import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker =
  setupWorker(
    ...handlers,
  );

// src/index.js
if (
  process.env
    .NODE_ENV ===
  'development'
) {
  const {
    worker,
  } = require('./mocks/browser');
  worker.start();
}

QS-Tests

MSW unterstützt QA-Teams beim Testen der Benutzeroberfläche, ohne tatsächliche Aufrufe an das Backend zu tätigen. Dies ist besonders nützlich, wenn das Backend instabil ist oder stark weiterentwickelt wird. QA-Ingenieure können mit vordefinierten Scheindaten arbeiten und so sicherstellen, dass das Frontend wie erwartet funktioniert.

Automatisierte Tests

Für automatisierte Tests vermeidet MSW die Notwendigkeit, jeden Anruf manuell abzufangen. Mit einer Grundkonfiguration können Sie Antworten für verschiedene Szenarien simulieren, wodurch Ihre Tests zuverlässiger und einfacher zu schreiben sind. Hier ist ein Beispiel für die Einrichtung von MSW in einer Testumgebung:

// src/mocks/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server =
  setupServer(
    ...handlers,
  );

// src/setupTests.js
import { server } from './mocks/server';

beforeAll(() =>
  server.listen(),
);
afterEach(() =>
  server.resetHandlers(),
);
afterAll(() =>
  server.close(),
);

Umgang mit Handlern

Sie können Ihre Handler organisieren, indem Sie sie in separaten Dateien gruppieren und nach Bedarf kombinieren. Zum Beispiel:

// src/mocks/handlers.js
import { userHandlers } from './user';
import { productHandlers } from './product';

export const handlers =
  [
    ...userHandlers,
    ...productHandlers,
  ];

Jeder Handler kann zu Testzwecken mehrere Szenarien haben. Hier ist ein Beispiel für die Definition und Verwendung von Szenarien:

Szenarien in Handlern

Ein Szenario ist ein vordefinierter Satz von Antworten, die verschiedene Bedingungen simulieren, wie z. B. Erfolgs- oder Fehlerzustände. Dadurch können Sie ganz einfach zwischen verschiedenen Scheinantworten wechseln.

// src/mocks/user.js
import { rest } from 'msw';

const USER_URL =
  'http://pii.dev.localhost:3200/api/v1/userV2/current';

const scenarios = {
  success: [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ],
  error: [
    http.get(
      USER_URL,
      () => {
        return HttpResponse.json(
          {
            error:
              'Unauthorized',
          },
          {
            status: 401,
          },
        );
      },
    ),
  ],
};

const scenarioName =
  new URLSearchParams(
    window.location.search,
  ).get(
    'scenario',
  ) || 'success';
export const userHandlers =
  scenarios[
    scenarioName
  ] || [];

Erläuterung der Szenarien

Szenarien ermöglichen Ihnen das einfache Testen verschiedener Bedingungen, denen Ihre Anwendung begegnen könnte. Durch Ändern des Szenario-Abfrageparameters in der URL können Sie unterschiedliche Antworten simulieren, ohne den Code zu ändern.

Um beispielsweise das Erfolgsszenario zu testen, navigieren Sie zu:

http://yourapp.localhost/?scenario=success

Und zum Fehlerszenario:

http://yourapp.localhost/?scenario=error

Mit diesem Ansatz können Sie dynamisch zwischen verschiedenen Scheinantworten wechseln und so Ihren Entwicklungs- und Testprozess flexibler und effizienter gestalten.

---

Durch die Verwendung von MSW haben wir eine nahtlose Möglichkeit, Scheindaten und API-Antworten sowohl in Entwicklungs- als auch in Testumgebungen zu verarbeiten. Dadurch können wir uns auf die Entwicklung von Funktionen und das Schreiben von Tests konzentrieren, ohne uns Gedanken über die Verfügbarkeit oder Stabilität des Backends machen zu müssen. Mit MSW können wir sicher realistische Scheinszenarien erstellen und sicherstellen, dass unsere Anwendung korrekt funktioniert, bevor wir sie in das echte Backend integrieren.

Ich entdecke immer noch, wie MSW funktioniert. Wenn Sie bessere Lösungen haben, teilen Sie mir diese bitte gerne mit.

Wenn Sie die Best Practices überprüfen möchten, schauen Sie sich gerne die Dokumentation an.

Das obige ist der detaillierte Inhalt vonDie Schönheit von MSW. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!