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()
  })
})

how about 2 useState?

how about 2 useState?

Hi @DamengRandom,

can you elaborate on this in more detail, please?

I think @DamengRandom's problem is similar to mine, if your component has more then one useState, this test is kind of useless, as you don't know which one was called.

I think @DamengRandom's problem is similar to mine, if your component has more then one useState, this test is kind of useless, as you don't know which one was called.

Ah, that's what @DamengRandom was talking about. Sorry, I guess I was thinking too complicated. 😅

Okay, so this is probably doable but not without flaws as discussed here on stackoverflow for instance.

Hi @natterstefan, when we have used 2 useState in one component, how can we do the unit test?

The example you have shown above only satisfies with 1 useState unit test if I am not mistaken, but sometime we do need to test 2 useState cases, right?

Hi @DamengRandom,

I think https://stackoverflow.com/a/71712376/1238150 or https://stackoverflow.com/a/65334852/1238150 might work, but I haven't tested it further. I suggest you look into it yourself as I am currently less able to deal with it. Sorry.

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