How to intercept and mock the response of an HTTP request with Cypress

#cypress #testing #automtion #e2e

Today, in “Pinches of Cypress”, learn how to mock the server's response

Sometimes we need to run automated tests in environments where we have no control over the data.

It would be useful in such situations if we could intercept the call to the server and then mock its answer with known data.

I have good news. With Cypress, you can achieve this easily.

I will present a simple example, but the idea is the same when working with more complex examples.

Imagine an application that allows the creation, reading, updating, and deletion of notes.

After logging into the application, the user is directed to their personal list of notes.

What to do if we do not have control over the number of existing notes for the test user in the production environment, for example?

After all, why not run tests in production, right? 😜

The test scenario is as follows. I want to test that only one element with the list-group-item class is displayed when there is no note in the list, and this element renders the button to create a new note.

Note: If there were more notes, each one would also be rendered in an element with the list-group-item class.

The test would be like this.

describe('Empty notes list', () => {
  beforeEach(() => {
    cy.intercept('GET', '**/notes', []).as('getNotes')
    cy.login()
    cy.wait('@getNotes')
  })

  it('renders only the button to add a new note', () => {
    cy.get('.list-group-item')
      .should('have.length', 1)
      .and('contain', 'Create new note)
  })
})

Notice that in the first line of the beforeEach function, I invoke cy.intercept passing as arguments the GET method, the '**/notes' route, and as an answer, an empty array ([]).

The return of the server when we make a GET request to the '**/notes' route is an array of notes, however, as we are mocking the response with an empty array ([]), this is what the frontend receives, and therefore, no notes are rendered.