Cypress not matching routes

Question

I am trying to write a cypress test that emulates a slow API, so after reading some documentation I came up with this:

before(function() {
    cy.server({delay: 5000});
});

beforeEach(() => {
    cy.route({
        method: "GET",
        url: "**/api/**"
    });
    cy.visit("http://localhost:9000");
});

That should add a 5 second delay to all requests to API, right?

The issue I am seeing is that it is not matching to any requests even through there are plenty of calls to */api/*. The cypress GUI does however see the route... it is just not matching.

What could be the cause of this?

user_2068830 · Answer

If you put in the entire route, as it appears in the cypress log, you will probably find that it works.

It seems like the look-ahead globbing isn't implemented very well by minimatch. It delimits fine on the / char but not so well on ? or #, so if you're trying to accommodate query strings, this is probably where you're coming unstuck.

You can use Cypress.minimatch in the console to see what's going on. More info on how to do this in the docs.

Cypress will also accept regexes. Something like /\/api\// should work for you.

user_3056382 · Answer

For me, my pattern was correct for my POST request but the issue was I wasn't overriding the default response. I was just hoping the API would return a 500 error, but unless I specified a response, it called through to the real API endpoint. The documentation says the default response is an empty object, but for some reason it's calling through unless I provide a value. Once I provided the response, the Cypress GUI displayed that it was properly stubbing out the call.

Changing this from:

cy.route({
    method: "POST",
    url: /my-endpoint/,
    status: 500,
});

to

cy.route({
    method: "POST",
    url: /my-endpoint/,
    response: {},
    status: 500,
});

is what worked for me.

Changing this from:

cy.route({
    method: "POST",
    url: /my-endpoint/,
    status: 500,
});

to

cy.route({
    method: "POST",
    url: /my-endpoint/,
    response: {},
    status: 500,
});

is what worked for me.

user_6826164 · Answer

Are you making a direct XHR request, or are you using fetch? Cypress network stubbing/mocking only works with actual XHR requests (fetch is its own type of request).

There's an open issue (3+ years old) about this, and buried in there is a great link to some solutions, including this one below, which works brilliantly.

EDIT: Alternatively, you could use axios for your HTTP requests, which sends actual XHR requests instead of fetch requests, so no Cypress config is needed. I think the resulting code is cleaner as well.

  let polyfill;

  // grab fetch polyfill from remote URL, could be also from a local package
  before(() => {
    const polyfillUrl = 'https://unpkg.com/unfetch/dist/unfetch.umd.js'
    cy.request(polyfillUrl)
      .then((response) => {
        polyfill = response.body
      })
  })

  beforeEach(() => {
    cy.visit('/', {
      onBeforeLoad (win) {
        delete win.fetch
        // since the application code does not ship with a polyfill
        // load a polyfilled "fetch" from the test
        win.eval(polyfill)
        win.fetch = win.unfetch
      },
    })
  });

user_2178421 · Answer

I am assuming your matcher is not working and your request does not say (XHR STUB)

If you are using the GUI, you should see a request that will look like this

(XHR) GET 200 /YOUR_API/YOUR_ROUTE

copy that (/YOUR_API/YOUR_ROUTE) and it should match

if should say (XHR STUB) after you stub it

Cypress not matching routes

4 Answers