javascript / intermediate
Snippet
Testen von Custom-Hook-Zustandsübergängen mit renderHook
Das isolierte Testen von benutzerdefinierten React-Hooks erfordert renderHook aus der React Testing Library. Alle Zustandsaktualisierungen im Test müssen in act() gewrappt werden, damit React alle Effekte und Zustandsänderungen synchron verarbeitet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { renderHook, act } from '@testing-library/react';import { useState, useCallback } from 'react';function useCounter(initialValue = 0) {const [count, setCount] = useState(initialValue);const increment = useCallback(() => setCount((prev) => prev + 1), []);return { count, increment };}describe('useCounter', () => {it('increments count correctly on action', () => {const { result } = renderHook(() => useCounter(5));expect(result.current.count).toBe(5);act(() => {result.current.increment();});expect(result.current.count).toBe(6);});});
react
Erklärung
1
import { renderHook, act } from '@testing-library/react';
Importiert Werkzeuge zum Testen des Hook-Lebenszyklus und zum Kapseln von Zustandsänderungen.
2
const { result } = renderHook(() => useCounter(5));
Rendert den Hook in einer isolierten Testumgebung und stellt Rückgabewerte im result-Objekt bereit.
3
act(() => { result.current.increment(); });
Führt die statusändernde Funktion innerhalb der act-Grenze aus, um Updates sofort anzuwenden.
4
expect(result.current.count).toBe(6);
Prüft, ob der interne Zählerzustand den aktualisierten primitiven Wert aufweist.