Marie Cruz
Marie is a software tester and also a tech blogger at testingwithmarie.com where she talks about testing and test automation in general. Currently, she works as a Developer Advocate for k6.io
Mocking XHR requests with Cypress
Cypress lunch and learn recap
- Cypress functional testing ✅
- Cypress API testing ✅
- Cypress Visual testing with Applitools ✅
- Testing iframes with Cypress ✅
What is a Mock API?
- Imitation of the real API which sends expected responses to a request
- Requires great understanding of the real API so it can be imitated correctly
Real API
👍🏼 Tests the real behaviour
👍🏼 Catch performance issues
👍🏼 More confidence that critical paths are verified
👍🏼 Straightforward to test
API mocks
👍🏼 Speeds up development
👍🏼 Speeds up testing
👍🏼 Quicker to run
👍🏼 Simulate delays
👍🏼 Avoids flaky tests as results are deterministic
👍🏼 Simulate different scenarios easily and test different status codes
Real API
👎🏼 Slower to run
👎🏼 Requires a dedicated environment
👎🏼 Can cause flaky tests if the API is still in development mode
👎🏼 Makes application under test dependent on other services
API mocks
👎🏼 More effort to maintain
👎🏼 Bugs can be missed if mock API is not updated
Should I mock or should I not?
Consider a Hybrid Approach
Testing real API endpoints with Cypress
/// <reference types="cypress" />
describe('Todo API', () => {
it('returns a JSON data', () => {
cy.request('/todos')
.its('headers')
.its('content-type')
.should('include', 'application/json');
});
});
Let's mock API requests with Cypress!
Image Search App
What we did
- Introduced cy.server()
- Introduced cy.route()
- Mock a specific request
- Simulated scenarios where API is returning data or not
Additional Resources
Any questions?
Mocking XHR requests with Cypress
By Marie Cruz
Mocking XHR requests with Cypress
In this lunch and learn session, we'll look at how we can mock XHR requests with Cypress.
