DEV Community

Discussion on: Testing React Hook State Changes

 
ppciesiolkiewicz profile image
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]);
  });

...
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
jbolotin profile image
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
    });
});
Enter fullscreen mode Exit fullscreen mode

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

Thread Thread
 
fredreis profile image
Fred-Reis

works fine for me

Thread Thread
 
brianle10680751 profile image
Brian Le

Thanks @Jonah, It works

Thread Thread
 
dhanvinarc profile image
Dhanvin Patel • Edited

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

}
Enter fullscreen mode Exit fullscreen mode

this handleClose is an onClick event