CODEWITHSUNDEEP
javascripttestingstubbingcypress
vages
vages

Reputation: 348

Cypress stubbing seems to yield response from actual server

Trying out Cypress in an existing project, I am having problems with stubbing responses for routes. The concept is explained in this documentation article: https://docs.cypress.io/api/commands/route.html#Without-Stubbing.

Here is a minimal non-working example. I am trying to get an empty object as the response body: 

describe('The new event page', () => {

  it('responds with the stub', () => {
    cy.server();
    cy.route('/dummypath', {});
    cy.request('GET', '/dummypath');
  });

});

The stubbed route clearly shows up in the GUI:

Picture showing the routes registered in the Cypress GUI

But the response is a 404:

Server responds with a 404

... with the following body:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /dummypath</pre>
</body>

I think the 404 response is sent by my actual server instead of the cy.server(). The actual server is running on localhost:3000, which I have specified as the baseUrl in my: cypress.json-file.

Has anyone seen anything similar? Have I overlooked any obvious errors in my code?

PS: When I change the port number to some other, unused port, the error changes to a network error (this should perhaps be expected). 

 CypressError: cy.request() failed trying to load:

http://localhost:3002/dummypath

We attempted to make an http request to this URL but the request failed without a response.

We received this error at the network level:

  > Error: connect ECONNREFUSED 127.0.0.1:3002

-----------------------------------------------------------

The request we sent was:

Method: GET
URL: http://localhost:3002/dummypath

-----------------------------------------------------------

Common situations why this would fail:
  - you don't have internet access
  - you forgot to run / boot your web server
  - your web server isn't accessible
  - you have weird network configuration settings on your computer

Upvotes: 0

Views: 3334

Answers (1)

Jennifer Shehane
Jennifer Shehane

Reputation: 6905

cy.request() makes an actual HTTP request to the url specified. This command should be used in cases where you do not want to load your actual application. Maybe you want to check an endpoint on your server, for example.

cy.route() is used to work with HTTP requests made within the application you are testing.

If you want to stub a response to an HTTP request that is being made within your application under test, you likely want to use a combination of cy.route() and .wait(). For example, to ensure that when we visit our application, a GET request is made by our application to /dummypath and that the response to this request is our stubbed {}, we would write:

describe('The new event page', () => {

  it('responds with the stub', () => {
    cy.server();
    cy.route('/dummypath', {}).as('getDummy');
    cy.visit('http://localhost:3002');         // the url to visit in your app
    cy.wait('@getDummy').its('responseBody')
      .should('be.an', 'object')
      .and('be.empty');
  });

});

Upvotes: 2

Related Questions