Jest | Mock useState

README.md

Jest - mock useState

When using import React, { useState } from 'react' in your components, this is how you can mock useState with jest.

index.test.js

// source: https://dev.to/ppciesiolkiewicz/comment/i708
import React, { useState as useStateMock } from 'react'
import { mount } from 'enzyme'

// Header uses `useState`
import { Header } from '..'

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

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

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

  it('renders', () => {
    const wrapper = mount(
      <Header />
    )
    expect(setState).toHaveBeenCalledTimes(1)
    expect(wrapper).toBeTruthy()
  })
})

index.test.tsx

// source: https://dev.to/ppciesiolkiewicz/comment/i708
import React, { useState as useStateMock } from 'react'
import { mount } from 'enzyme'

// Header uses `useState`
import { Header } from '..'

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

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

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

  it('renders', () => {
    const wrapper = mount(
      <Header />
    )
    expect(setState).toHaveBeenCalledTimes(1)
    expect(wrapper).toBeTruthy()
  })
})

Thank for help man 👍, I will give it a try.

I can confirm that the second link from @natterstefan works for me. Don't forget the

.mockImplementation((x) => [x, () => null]); // ensures that the rest are unaffected

part to ensure all useState mocked in case you forget one