Testing React State with Hooks, Jest, and Enzyme

FunctionalComponent.jsx

import React from 'react';

const TestComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <h3>{count}</h3>
    <span>
      <button id="count-up" type="button" onClick={() => setCount(count + 1)}>Count Up</button>
      <button id="count-down" type="button" onClick={() => setCount(count - 1)}>Count Down</button>
      <button id="zero-count" type="button" onClick={() => setCount(0)}>Zero</button>
    </span>
  );
}

export default TestComponent;

FunctionalComponent.test.jsx

import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import TestComponent from './FunctionalComponent';

Enzyme.configure({ adapter: new Adapter() });

describe('<TestComponent />', () => {
  let wrapper;
  const setState = jest.fn();
  const useStateSpy = jest.spyOn(React, 'useState')
  useStateSpy.mockImplementation((init) => [init, setState]);

  beforeEach(() => {
    wrapper = Enzyme.shallow(<TestComponent />);
  });

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

  describe('Count Up', () => {
    it('calls setCount with count + 1', () => {
      wrapper.find('#count-up').props().onClick();
      expect(setState).toHaveBeenCalledWith(1);
    });
  });

  describe('Count Down', () => {
    it('calls setCount with count - 1', () => {
      wrapper.find('#count-down').props().onClick();
      expect(setState).toHaveBeenCalledWith(-1);
    });
  });

  describe('Zero', () => {
    it('calls setCount with 0', () => {
      wrapper.find('#zero-count').props().onClick();
      expect(setState).toHaveBeenCalledWith(0);
    });
  });
});

awesome! thanks for sharing.

in case if someone comes here from search engine results and still having issues with their implementation code:

You MUST use React.useState inside your functional component code!

DON'T do this:

import React, { useState ...}  from 'react';

...

const [count, setCount] = useState(0);

...

DO THIS instead:

import React from 'react';

...

const [count, setCount] = React.useState(0);

and the above example will work!

@pavlobu How we can mock multiple states?

@pavlobu thank you so much!!!
I was about to get crazy

@pavlobu thanks

Thank you!! @pavlobu @adiveygives

Thanks!
Anyone knows why does react/jest behaves this way. In some repositories I am able to do:

import React from 'react';
const mockSetState = jest.fn();
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: (initial) => [initial, mockSetState],
}));

and later

expect(mockSetState).toHaveBeenCalledWith(0);

However in some repos I cannot?