javascript / expert
Snippet
Unit-Testing von AbortSignal-Abbruchgrenzen in React-Formularverarbeitungs-Handlern
Das Testen asynchroner Nebenläufigkeitssteuerung in benutzerdefinierten React-Hooks erfordert die Überprüfung, dass vorherige AbortController-Instanzen ihre Abbruchsignale auslösen, wenn sie überholt werden. Dieses Muster isoliert Network Race Conditions in Komponententreibern durch direkte Prüfung des Signalzustands.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { renderHook, act } from '@testing-library/react';import { useCancellableSubmit } from './useCancellableSubmit';test('cancels active pending controller when concurrent submit triggers', async () => {const mockApi = jest.fn((signal) => new Promise((_, reject) => {signal.addEventListener('abort', () => reject(new DOMException('Aborted', 'AbortError')));}));const { result } = renderHook(() => useCancellableSubmit(mockApi));act(() => { result.current.submit({ id: 1 }); });act(() => { result.current.submit({ id: 2 }); });const firstSignal = mockApi.mock.calls[0][0];expect(firstSignal.aborted).toBe(true);expect(mockApi).toHaveBeenCalledTimes(2);});
react
Erklärung
1
const mockApi = jest.fn((signal) => new Promise((_, reject) => {
Erstellt eine Mock-API-Funktion, die ein AbortSignal-Argument akzeptiert, um den Abbruch einer ausstehenden HTTP-Verbindung zu simulieren.
2
signal.addEventListener('abort', () => reject(new DOMException('Aborted', 'AbortError')));
Registriert einen Abort-Event-Listener im ausstehenden Promise, um das Abbruchverhalten der nativen Fetch-Anforderung zu simulieren.
3
act(() => { result.current.submit({ id: 1 }); });
Löst die erste asynchrone Formularübermittlungsaktion aus, um den initialen AbortController zu instanziieren.
4
expect(firstSignal.aborted).toBe(true);
Bestätigt, dass das Signal der ersten Anfrage bei Ausführung des zweiten Aufrufs in den abgebrochenen Zustand versetzt wurde.