How to mock useState using Jest?

Question

I am using Jest and react-testing-library in React application. I have to test following scenario -

 function Parent () { const [country, setCountry] = useState(true) return ( <Child setCountry={setCountry} /> ) } function Child () { const handleValueClear = () => { setCountry(false) const data = { id : 'IND', name : 'India' } dispatch(handleCountryDetails(data)) } return ( <div> <button onclick={handleValueClear}>Click me</button> </div> ) }

How to mock and test useState in jest ?

Answer 1

Your component

import React from 'react'

function Parent () {
    const [country, setCountry] = React.useState(true)

    return (
        <Child setCountry={setCountry} />
    )
}

function Child () {    
    const handleValueClear = () => {
        setCountry(false)
        const data = {
            id : 'IND',
            name : 'India'
        }
        dispatch(handleCountryDetails(data))
    }
    return (
        <div>
            <button onclick={handleValueClear}>Click me</button>
        </div>
    )
}

Jest file for Parent

test('useState mock', () => {
   const initialState = true

   React.useState = jest.fn().mockReturnValue([initialState , {}])
   
   const wrapper = shallow(<Parent />)

   // In this point your state set and you can test the rest
}