Testing stateful React hooks

Subject under test

import { useState } from 'react';

export function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);

  return [count, () => setCount(count + 1)];
}

Unit test

import { useCounter } from './Calculator';

const mockSetState = jest.fn();

jest.mock('react', () => ({
  useState: initial => [initial, mockSetState]
}));

test('Can increment from 1 to 2', () => {
  const [_, increment] = useCounter(1);

  increment();

  expect(mockSetState).toHaveBeenCalledWith(2);
});

How about
setState(prevState => ({ ...prevState, }))
?

Yeah What about class component How do I Change class setState ?

how mock many state in useState?

not working

 jest.spyOn(React, 'useState')
    .mockImplementationOnce(() => [false, () => null])
    .mockImplementationOnce(() => [true, () => null]) 

You may consider using renderHook (testing-library/react). I find it easy to use.

Here is the sample code:

const { result } = renderHook(() => {
      const [isOpen, setIsOpen] = useState(true)
      return { isOpen, setIsOpen }
    })

    const renderValue = await act(() => {
      return render(
        <ProductFormDialog
          isOpen={result.current.isOpen}
          setIsOpen={result.current.setIsOpen}
        />
      )
    })

    const displayValue = renderValue.getByTestId('header-container').textContent
    expect(displayValue).toEqual('Header')