Cypress: Question: Mocking external API with cy.server/cy.route

[CollinEstes]

The application we are testing with cypress makes API calls to a standalone API. So locally we have our API running on port 3000, but the application we are testing is running on 8080.

We are looking to stub our (some but not all) API requests that our app makes to "http://localhost:3000/..." but seems like we are only able to stub requests to "http://localhost:8080" which is where cy.visit() points.

Any way to do this currently? Or is it possible to have cy.server() accept a host option or something along those lines?

[brian-mann]

I believe this already works.

We have tests around this behavior here: https://github.com/cypress-io/cypress/blob/develop/packages/driver/test/cypress/integration/commands/xhr_spec.coffee#L349-L378

Can you post your test code?

[CollinEstes]

cy.visit(url)
cy.clearExportControlWarning() // the first click you see in the screenshot
cy.server()
cy.route('http://localhost:3000/api/search/artifacts?artifactType=GCAR', [{artifactName: 'fizzbuzz', artifactType: "GCAR"}])

cy.get('.search')
  .click()

That click on our search button here calls the API route we are mocking there on cy.route(). url here is http://localhost:9999

Here is a screenshot of what I see:

After the click there I would expect to see the stub.

I don't see what I've seen in your demos which shows the stub:

Test sure does look like it should work, so guessing I'm just wrong on the syntax here...

[jennifer-shehane]

Is the route you've defined expecting a GET method to the url? If not, you need to define the method in the route definition.

[CollinEstes]

@jennifer-shehane Yes that is a GET method, I also tried it with the full {options} syntax as well and had the same result.

[brian-mann]

I think the problem is that you are routing too late.

I can look at the command log and see that the XHR's are happening before the cy.get('.search').

At that point the XHR has already gone out, and there was no routing for it. So it was not stubbed. Move your cy.route to before you visit and they will automatically be applied to all subsequent page loads.

[CollinEstes]

So changed to:

it('should search and select a gcar', () => {
  cy.server()
  cy.route('http://localhost:3000/api/search/artifacts?artifactType=GCAR', [{artifactName: 'fizzbuzz', artifactType: "GCAR"}])

  cy.visit(url)

  cy.clearExportControlWarning()

  cy.get('.search')
    .click()
})

Still same behavior, not hitting stub.

[CollinEstes]

Also should mention we are using fetch...

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

[brian-mann]

We've opened an issue to document this better: https://github.com/cypress-io/cypress-documentation/issues/238

[benpolinsky]

404 on the above recipe, FYI. Here's the link:

https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/stubbing-spying__window-fetch/cypress/integration/spy-stub-clock-spec.js

[arun290636]

Cypress is not capturing XHR calls on page load . My application is running on post 3000.

below request is not capturing request highlighted in red:

:

I cant see XHR request when i run tests.

[arun290636]

@jennifer-sheha can you please help on above?