Mock network requests in Cypress - node.js

Question

I've been tearing my hair out over this for ages now - and I hope someone can help me :)
I've been trying to stub a network request in Cypress for ages now.
commands.js
Cypress.Commands.add('login', (
email = 'email',
password = 'pass'
) => {
cy.server();
cy.visit('url');
cy.get('input[name="username"').type(email);
cy.get('form').submit();
cy.get('input[name="password"').type(password);
cy.get('form').submit();
});
mock.js
describe('mock', function() {
it('user can login', function() {
cy.login();
cy.get('main[role="main"]');
cy.route('GET',
'**/getIncentives*',
{info: {}, results: {}}
).as('oppty');
cy.wait('#oppty');
});
});
Chrome dev tools request
Cypress request failed
Any help here would be really appreciated - I've been going crazy!
Thanks so much,
Ollie

Answer 1

Currently, Cypress cy.route can only stub network requests that use XHRs
Native HTML form elements don't use XMLHTTPRequest, hence you cannot use cy.route to stub it.
Most people don't run into this issue because using native HTML forms is not as common nowadays
Edit:
You are also waiting on the route, but haven't actually done anything in your test. Your test should look something like this:
cy.route('GET',
'**/getIncentives*',
{info: {}, results: {}}
).as('oppty');
// cypress code that would cause a network request.
cy.wait('#oppty');
Also, make sure the request is of type:XHR:

Answer 2

Cypress will only find the network request after it's been aliased. The code in your question indicated you're not doing an action that would cause a network request:
cy.route('GET',
'**/getIncentives*',
{info: {}, results: {}}
).as('oppty');
// cypress expected something to cause a network request here
cy.wait('#oppty');
You should either move the call to route earlier in the test, or move the code that causes the request after the call to route.

Answer 3

Also note that cy.route() may not work with server side rendering (apparently).
I've had this problem when using NextJs, and solved it by first calling some other page, then navigate on the client to the page I actually want to test.
Like so:
describe('test cy.route', function() {
it( 'test 1', () => {
cy.server();
cy.route({
method: 'GET',
url: /.*\/api\/someApiCall/,
response: { 'someApiResponse': 'ok' },
status: 200
} ).as('myRouteAlias');
// go to start page: first page is server side rendered. cy.route doesn't work.
cy.visit('/');
// go to page to be tested: client side, cy.route works then.
cy.get( `a[href="/pageToBeTested"` ).should('exist').click();
// wait for page loaded
cy.url().should('include', 'pageToBeTested' );
// do something that requests '/api/someApiCall'.
invokeFunctionThatDoesTheRequest();
// wait for the request
cy.wait('#myRouteAlias');
});
});