Reputation: 2999

Cypress not matching routes

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?

Upvotes: 4

Answers (5)

Zujaj Misbah Khan

Reputation: 809

In addition to @Maccurt's solution and after reading Glob-Pattern-Matching-URLs , I would suggest you use the Digital Ocean's Glob Tool to test your URL. Once you're confident that the glob-pattern works exactly as you expected, simply copy it like this:

// Matches the URL with HTTP methods(POST, GET, PUT, PATCH & DELETE) and invokes the response to be empty
cy.intercept({ url: '**/user/create-user/*' }, [])

P.S : cy.route no longer exists!

Upvotes: 0

Greg Van Gorp

Reputation: 801

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,
});

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

is what worked for me.

Upvotes: 3

Jonathan Tuzman

Reputation: 13262

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
      },
    })
  });

Upvotes: 0

marrs

Reputation: 71

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.

Upvotes: 6