how to test api calls using fetch?
See original GitHub issueI’m having a hard time understanding below behaviour and would appreciate any help to pointing me into the right direction.
I have a generic class for my api calls:
class Api {
static ack(param1, param2) {
return fetch(process.env.REACT_APP_ACK_URL + param1 + '/' + param2, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
.then((response) => {
if(response.ok) {
return response.json();
} else {
console.log('ack failed', response.statusText)
}
})
.catch((ex) => {
throw new Error('fetch failed' + ex)
});
}
}
in my Api.test.js I have a following code
import Api from './Api';
describe("Api", function () {
beforeEach(function() {
window.fetch = jest.fn().mockImplementation(() => Promise.resolve({ok: true, Id: '123'}));
});
it("ack", function () {
Api.ack('foo', 'bar').then(response => {
console.log(response); //< this is never printed
expect(response.Id).toBe(1); //< always pass / gets ignored?
});
});
});
regardless of what I set the response.Id in Promise.resolve({ok: true, Id: '123'})
expect(response.Id).toBe(1)
or expect(response.Id).toBe('abc')
always pass
Issue Analytics
- State:
- Created 7 years ago
- Reactions:19
- Comments:11 (4 by maintainers)
Top Results From Across the Web
Using the Fetch API - MDN Web Docs
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses.
Read more >Using and Testing the Fetch API - DEV Community
Displaying all GoT books. This guide is about writing code that uses the Fetch API in React and TypeScript and how to write...
Read more >Fetch API – How to Make a GET Request and POST Request ...
fetch () is a mechanism that lets you make simple AJAX (Asynchronous JavaScript and XML) calls with JavaScript. Asynchronous means that you can ......
Read more >Learn to use fetch() in API call Easily ! - CODERSERA
Today we are going to explore the fetch function in API calls and get to know about different methods (such as GET, POST,...
Read more >How To Mock Fetch in Jest | Leigh Halliday
Making HTTP requests in tests isn't a great idea in most situations... it can slow your tests down, is unreliable, and the API...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@gaearon you rock dude, thanks so much 😃 I ended up changing the mockImplementation as per below and using async/await
Api.test.js
results in :
can this be considered as good practice for testing promises returned by fetch in jest?
By the way I noticed you don’t return Promise from the test. The runner can’t know to wait for the promise to finish in this case.
Have you tried returning Promise or using async await? See the async tutorial.