0Pricing
React Academy · Lektion

Asynchrone UIs und API-Aufrufe mit MSW testen

Simulieren Sie HTTP-Anfragen mit Mock Service Worker, um Components zu testen, die Daten abrufen.

Asynchrone UIs und API-Aufrufe mit MSW testen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Mock Service Worker?

MSW fängt HTTP-Anfragen auf Netzwerkebene ab, und zwar mithilfe eines Service Workers (Browser) oder eines http-Interceptors (Node). So können Sie APIs simulieren, ohne Ihren Anwendungscode anzupassen.

MSW installieren

Installieren Sie MSW und richten Sie den Node-Interceptor für Jest/Vitest-Tests ein.

// npm install msw --save-dev

// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([{ id: 1, name: 'Alice' }]);
  }),
];

Mock-Server einrichten

Erstellen Sie eine setupServer-Instanz mit Ihren Handlern und rufen Sie vor den Tests server.listen(), nach jedem Test server.resetHandlers() und nach allen Tests server.close() auf.

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

const server = setupServer(...handlers);

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

Eine Komponente testen, die Daten abruft

Rendern Sie die Komponente, die einen Abruf auslöst. MSW fängt die Anfrage ab und gibt Mock-Daten zurück. Prüfen Sie, was der Benutzer nach dem Laden der Daten sieht.

test('shows user list after fetch', async () => {
  render(<UserList />);
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

findBy-Queries für asynchrone UI

findBy-Queries geben ein Promise zurück, das aufgelöst wird, sobald das Element erscheint (standardmäßig nach höchstens 1 Sekunde). Verwenden Sie sie für Inhalte, die nach asynchronen Vorgängen erscheinen.

// findByText waits for the element to appear
const username = await screen.findByText('Alice');
expect(username).toBeInTheDocument();

// waitFor wraps assertions that need to wait
await waitFor(() => {
  expect(screen.getByText('3 users')).toBeInTheDocument();
});

Handler pro Test überschreiben

Verwenden Sie server.use() innerhalb eines Tests, um einen einmaligen Handler hinzuzufügen, der für diesen Test den Standard-Handler überschreibt.

test('shows error on API failure', async () => {
  server.use(
    http.get('/api/users', () => {
      return HttpResponse.json({ message: 'Server error' }, { status: 500 });
    })
  );

  render(<UserList />);
  expect(await screen.findByText('Failed to load users')).toBeInTheDocument();
});

Ladezustände testen

Prüfen Sie den Ladeindikator direkt nach dem Rendern (synchron), bevor die asynchronen Daten eintreffen.

test('shows loading state initially', () => {
  render(<UserList />);
  expect(screen.getByRole('progressbar')).toBeInTheDocument();
  // or
  expect(screen.getByText('Loading...')).toBeInTheDocument();
});

POST-Anfragen testen

Definieren Sie einen POST-Handler, der den Request-Body validiert und eine erstellte Ressource zurückgibt. Überprüfen Sie, dass die Komponente den Erfolgsstatus widerspiegelt.

server.use(
  http.post('/api/users', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: 2, ...body }, { status: 201 });
  })
);

test('creates a user', async () => {
  const user = userEvent.setup();
  render(<NewUserForm />);
  await user.type(screen.getByLabelText('Name'), 'Bob');
  await user.click(screen.getByRole('button', { name: /create/i }));
  expect(await screen.findByText('User created!')).toBeInTheDocument();
});

Netzwerkverzögerungen für realistische Tests

Fügen Sie Handlern künstliche Verzögerungen hinzu, um die Loading-UI gründlicher zu testen, und verwenden Sie dafür das Dienstprogramm delay von MSW.

import { delay } from 'msw';

http.get('/api/users', async () => {
  await delay(200);
  return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})

Testen mit React Query

Umschließen Sie die Komponente für jeden Test mit einem neuen QueryClientProvider, um zu verhindern, dass State zwischen Tests weitergegeben wird.

function renderWithQuery(ui: React.ReactElement) {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });
  return render(
    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
  );
}

Request-Daten überprüfen

Verwenden Sie innerhalb eines Handlers einen Request-Spy, um zu überprüfen, ob die Anwendung den korrekten Request-Body oder die korrekten Header gesendet hat.

let capturedBody: unknown;

server.use(
  http.post('/api/login', async ({ request }) => {
    capturedBody = await request.json();
    return HttpResponse.json({ token: 'abc' });
  })
);

test('sends credentials to API', async () => {
  // ... submit form ...
  expect(capturedBody).toEqual({ email: 'a@b.com', password: 'pass' });
});

MSW im Browser für die Entwicklung

MSW funktioniert während der Entwicklung auch im Browser. Führen Sie npx msw init public/ aus, um den Service Worker zu installieren, und importieren Sie Ihre Handler in main.tsx, um während der lokalen Entwicklung eine Mock-API zu verwenden.

Kurzer Check

Welchen Abfragetyp von RTL sollten Sie verwenden, um Inhalte zu überprüfen, die erscheinen, nachdem ein API-Aufruf abgeschlossen ist?

Zusammenfassung

MSW fängt echte HTTP-Requests ab und macht Tests realistisch, ohne einen laufenden Server anzusprechen. Verwenden Sie server.use(), um Handler pro Test zu überschreiben, findBy für asynchrone Überprüfungen, und umschließen Sie React-Query-Tests mit einem neuen QueryClientProvider.

Häufig gestellte Fragen

Ist die Lektion „Asynchrone UIs und API-Aufrufe mit MSW testen“ kostenlos?

Ja — der vollständige Text von „Asynchrone UIs und API-Aufrufe mit MSW testen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Asynchrone UIs und API-Aufrufe mit MSW testen“?

Simulieren Sie HTTP-Anfragen mit Mock Service Worker, um Components zu testen, die Daten abrufen. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Asynchrone UIs und API-Aufrufe mit MSW testen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Integrationstests mit React Testing Library
  2. Asynchrone UIs und API-Aufrufe mit MSW testen
  3. Erste Schritte mit Playwright für React
  4. Formulare und Benutzerabläufe von Anfang bis Ende testen
← Zurück zu React Academy