Discussion on: Testing React Hook State Changes

[Piotr]

to make it work with useState we would have to mock it using jest while keeping rest of react intact. jest.requireActual can be used to achieve that

import React, { useState as useStateMock } from 'react';

jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn(),
}));

describe('Test', () => {
  const setState = jest.fn();

  beforeEach(() => {
    useStateMock.mockImplementation(init => [init, setState]);
  });

...

[Jonah Bolotin]

The following technique works well for me testing functional components with useState destructured. This is an adapted solution from that above because the mockImplementation above caused react-test-renderer tests to fail:

import * as React from 'react';

describe('Some message', () => {
    const setState = jest.fn();
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const useStateMock: any = (initState: any) => [initState, setState];

    afterEach(() => {
      jest.clearAllMocks();
    });

    it('Is a test where we want to mock useState', () => {
          jest.spyOn(React, 'useState').mockImplementation(useStateMock);
          const wrapper = shallow(<Component {...props} />);
          // trigger setState somehow
          expect(setState).toHaveBeenCalledTimes(1);
          // Other tests here
    });
});

This is typescript, but it should work just as well in JS if you remove the type annotations

[Fred-Reis]

works fine for me

[Brian Le]

Thanks @Jonah, It works

[Dhanvin Patel]

How can we test this type of case with jest and enzyme?
const [open, setOpen] = useState(false);
const handleClose = () => {
setOpen(!open);

}

this handleClose is an onClick event