CODEWITHSUNDEEP
reactjsjestjsmockingjest-fetch-mock
Urvesh Nagda
Urvesh Nagda

Reputation: 19

JEST: after mocking response from API, the data is not set in component

Index.js

`

import React, {useEffect} from 'react'
import store from '../store_path'
import loadable from '@loadable/component'
import { apiCall } from './apiService_path'
import useTokenHook from 'hook_path'
const ChildComponent = loadable(() => import('../childComponent_path'))

export const ParentComponent = () => {
const token = useTokenHook()
const [data, setData] = useState({})
const [showChild, setShowChild] = useState(false)
const lang = store(state => state.lang)
const apiCall = store(state => state.apicall)

const myFn = async() => {
    const res = await apiCall();
    console.log('[RES DATA]: ', res)
    setData(res)
    setShowChild(true)
}

useEffect(() => { myFn() }, [])

return(
    <>
        {showChild ? <ChildComponent data={data} /> : 'No data found'}
    </>
)
}

`

Index.test.js

`

import {mockData} from '../mockdata_path'

jest.mock('./apiService_path', () => {
    apiCall: () => (mockData)
})

test('component to be defined', () => {
    render(<Component />)
})`

Now problem here is that mock service is returning the mock data and I can see that in the console. But the next line which is setter function is not getting covered in testcase

I tried mocking setter function but that also didn't worked. So not sure what's going wrong.

Upvotes: 1

Views: 211

Answers (0)

Related Questions