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 ?
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
}