packages/hooks/useControlled.test.ts

   1 import { act, renderHook } from '@testing-library/react-hooks';
   2
   3 import useControlled from './useControlled';
   4
   5 describe('useControlled()', () => {
   6     it('initializes with its passed value', () => {
   7         const initial = 0;
   8
   9         const hook = renderHook(() => useControlled(initial));
  10
  11         const [state] = hook.result.current;
  12
  13         expect(state).toBe(initial);
  14     });
  15
  16     it('ignores setState if a value from the outside is passed into it', () => {
  17         const initial = 0;
  18
  19         const hook = renderHook(() => useControlled(initial));
  20
  21         act(() => {
  22             const [, setState] = hook.result.current;
  23
  24             setState(1);
  25         });
  26
  27         const [state] = hook.result.current;
  28
  29         expect(state).toBe(initial);
  30     });
  31
  32     it('behaves like useState if no value is passed to it', () => {
  33         const initial = undefined as undefined | number;
  34
  35         const hook = renderHook(() => useControlled(initial, 0));
  36
  37         const [stateOne] = hook.result.current;
  38
  39         expect(stateOne).toBe(0);
  40
  41         act(() => {
  42             const [, setState] = hook.result.current;
  43
  44             setState(1);
  45         });
  46
  47         const [stateTwo] = hook.result.current;
  48
  49         expect(stateTwo).toBe(1);
  50     });
  51
  52     it('propagates values passed from the outside when they update', () => {
  53         const hook = renderHook(({ initial }) => useControlled(initial), { initialProps: { initial: 0 } });
  54
  55         hook.rerender({ initial: 1 });
  56
  57         const [state] = hook.result.current;
  58
  59         expect(state).toBe(1);
  60     });
  61
  62     it('switches from uncontrolled to controlled if initially no value is passed but later is', () => {
  63         const hook = renderHook(({ initial }) => useControlled(initial), {
  64             initialProps: { initial: undefined as undefined | number },
  65         });
  66
  67         act(() => {
  68             const [, setState] = hook.result.current;
  69
  70             setState(1);
  71         });
  72
  73         hook.rerender({ initial: 2 });
  74
  75         const [stateTwo] = hook.result.current;
  76
  77         expect(stateTwo).toBe(2);
  78
  79         act(() => {
  80             const [, setState] = hook.result.current;
  81
  82             setState(3);
  83         });
  84
  85         const [stateThree] = hook.result.current;
  86
  87         expect(stateThree).toBe(2);
  88     });
  89 });