Snippet

Testing Controlled Hook State Reductions Using renderHook and act

Custom React hooks encapsulate stateful control flow that must be validated in isolation. Using renderHook mounts the hook in an ephemeral test container, while wrapping trigger functions in act ensures all asynchronous state batches and DOM side effects settle before assertions run.

snippet.js

javascript

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

Breakdown

setCount((curr) => (curr < max ? curr + 1 : curr));

Applies boundary control logic to prevent state values from exceeding the maximum limit.

const { result } = renderHook(() => useBoundedStepCounter(0, 2, 1));

Mounts the hook in a virtual testing component and exposes a mutable result ref.

act(() => { result.current.increment(); });

Dispatches hook state actions within the act boundary to flush all pending React state updates.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Testing Controlled Hook State Reductions Using renderHook and act

Related