0
465
ViewsTypeError: Cannot read properties of undefined (reading 'then') - while Mocking Fetch call in Jest
This is the file containing the fetch call, which just sends some locally stored json file.
// eslint-disable-next-line import/prefer-default-export
export const get = () => {
// eslint-disable-next-line no-undef
return fetch('data/posts.json').then((res) => res.json());
};
My test where I mock the fetch method and Promise.resolve a mock array.
import { get } from './posts';
const mockData = [
{
"id": "ig-1",
"accountId": "IG",
"accountIcon": "/images/ig-icon.svg",
"accountName": "IG account",
"accountImageInitial": "J",
"imageUrl": "/images/social_logo.png",
"caption": "test",
"timestamp": 1635510651638
},
{
"id": "fb-1",
"accountId": "FB",
"accountIcon": "/images/fb-icon.svg",
"accountName": "FB account",
"accountImageInitial": "J",
"imageUrl": "/images/social_logo.png",
"caption": "test",
"timestamp": 1635510051638
}
];
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve(mockData)
})
);
describe('The posts API controller', () => {
test('get() returns expected default payload', async () => {
const result = await get();
expect(fetch).toHaveBeenCalledTimes(1);
expect(result).toBeTruthy();
});
});
Error
TypeError: Cannot read properties of undefined (reading 'then')
TypeError: Cannot read properties of undefined (reading 'then')
2 | export const get = () => {
3 | // eslint-disable-next-line no-undef
> 4 | return fetch('data/posts.json').then((res) => res.json());
| ^
5 | };
Unsure as to why I'm getting this error, as it appears that I have mocked fetch correctly?
·
Juan Pablo Isaza
1 answers
Answer question0
I would suggest just to return the res.json(), which you are actually already doing implicitly.
Also, after .then() it's good practice to have .catch() in case you encounter an error during fetching.
So, try following.
export const get = () => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json()) // this is an implicit return
.catch((err) => console.log(err));
};
or using async/await
const get = async () => {
try {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
return res.json();
} catch (error) {
console.log(error);
}
};
·
Juan Pablo Isaza
Report
Answer question