Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Jest | Mock useState

Jest - mock useState

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

// 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()
})
})
// 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()
})
})
@DamengRandom
Copy link

DamengRandom commented Sep 27, 2022

how about 2 useState?

@natterstefan
Copy link
Author

natterstefan commented Sep 27, 2022

how about 2 useState?

Hi @DamengRandom,

can you elaborate on this in more detail, please?

@puelocesar
Copy link

puelocesar commented Sep 29, 2022

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.

@natterstefan
Copy link
Author

natterstefan commented Sep 30, 2022

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.

@DamengRandom
Copy link

DamengRandom commented Sep 30, 2022

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?

@natterstefan
Copy link
Author

natterstefan commented Sep 30, 2022

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.

@DamengRandom
Copy link

DamengRandom commented Oct 5, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment