javascript / intermediate
Snippet
Testen von kontrollierten Hook-Zustandsänderungen mit renderHook und act
Eigene React-Hooks kapseln zustandsbehafteten Kontrollfluss, der isoliert getestet werden muss. renderHook bindet den Hook in einen temporären Test-Container ein, während das Umschließen der Trigger-Aktionen mit act sicherstellt, dass alle Zustandsänderungen vollständig verarbeitet sind, bevor Assertions ausgeführt werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { renderHook, act } from '@testing-library/react';import { useState, useCallback } from 'react';function useBoundedStepCounter(min, max, initial = 0) {const [count, setCount] = useState(initial);const increment = useCallback(() => {setCount((curr) => (curr < max ? curr + 1 : curr));}, [max]);return { count, increment };}describe('useBoundedStepCounter', () => {it('does not increment count beyond maximum boundary', () => {const { result } = renderHook(() => useBoundedStepCounter(0, 2, 1));act(() => {result.current.increment();result.current.increment();});expect(result.current.count).toBe(2);});});
react
Erklärung
1
setCount((curr) => (curr < max ? curr + 1 : curr));
Wendet Grenzwert-Logik an, um zu verhindern, dass der State-Wert das Maximum überschreitet.
2
const { result } = renderHook(() => useBoundedStepCounter(0, 2, 1));
Rendert den Hook in einer virtuellen Test-Umgebung und stellt ein veränderliches result-Objekt bereit.
3
act(() => { result.current.increment(); });
Führt Hook-Aktionen innerhalb der act-Grenze aus, um alle anstehenden React-State-Updates sofort zu verarbeiten.