Mock a function called in a React component with jest

Question

I have a React component which calls an external API. I'm try to unit test this component, but I didn't understand how I can mock the function with jest and "fake" the result.

Component:

import { getWeather } from '../../service/WeatherService'
import {useState, useEffect} from 'react'

export default function Weather() {

...

 useEffect(() => {
        getWeather().then((res) => { // function which calls the external API
...
}

can you please post your answer which solved your issue. Iam also facing similar issue — Kousalya, Mar 08 '22 at 14:58

score -1 · Answer 1 · answered Aug 10 '21 at 23:08

-1

See https://stackoverflow.com/a/43090261/5798347

You can mock the function like below, which will change the implementation of this function that will be used when you run your tests:

jest.mock('../../service/WeatherService', () => ({
  getWeather: jest.fn() /* Insert Mock Implementation here */
}))

answered Aug 10 '21 at 23:08

timmeinerzhagen

772
7
10

Do you have any link where I can understand better the mock implementation and how I can return the mocked result? – arthur-sh Aug 11 '21 at 19:44
Actually here it is even easier, since you don't need to mock a whole object but only need the fuction https://jestjs.io/docs/mock-functions#mock-implementations – timmeinerzhagen Aug 12 '21 at 08:05
I already tried this and a lot of another solutions. Do you think the fact I'm using single-spa changes anything? – arthur-sh Aug 12 '21 at 20:43
That shouldn't change anything since you're probably only testing the single file / React component – timmeinerzhagen Aug 12 '21 at 21:18
Just fixed it. It was a little mistake I didn't see. Thank you for the help. – arthur-sh Aug 12 '21 at 21:31

Mock a function called in a React component with jest

1 Answers1