Como interceptar e mockar a resposta de uma requisição HTTP com Cypress

Hoje em “pitadas de Cypress”, aprenda como mockar a resposta do servidor

As vezes precisamos rodar testes automatizados em ambientes os quais não temos controle sobre os dados.

Em tais situações, seria útil se pudéssemos interceptar a chamada ao servidor, e então mockar sua resposta, com dados conhecidos.

Tenho uma boa notícia. Com Cypress você pode atingir isso facilmente.

Irei apresentar um exemplo simples, mas a idéia é a mesma quando trabalhando com exemplos mais complexos.

Imaginemos uma aplicação que permite a criação, leitura, atualização e deleção de anotações.

Após logar na aplicação, o usuário é direcionado para sua lista pessoal de anotações.

O que fazer caso não tenhamos controle sobre a quantidade de anotações existentes para o usuário utilizado para os testes, por exemplo, em um ambiente de produção?

Pois afinal, porquê não rodar testes em produção, certo? 😜

O cenário de teste é o seguinte. Quero testar que quando não há nenhuma anotação na listagem para o usuário logado, somente um elemento com a classe list-group-item é exibido, o qual renderiza o botão para adicionar uma nova anotação.

Obs.: Caso houvesem mais anotações, cada uma seria também renderizada em uma elemnto com a classe list-group-item.

O teste seria assim.

describe('Lista de anotações vazia', () => {
  beforeEach(() => {
    cy.intercept('GET', '**/notes', []).as('getNotes')
    cy.login()
    cy.wait('@getNotes')
  })

  it('renderiza somente o botão para adicionar uma nova anotação', () => {
    cy.get('.list-group-item')
      .should('have.length', 1)
      .and('contain', 'Criar nova anotação')
  })
})

Perceba que na primeira linha do beforeEach invoco o cy.intercept passando como argumentos o método GET, o endereço  '**/notes', e como resposta, um array vazio ([]).

O retorno do servidor quando fazemos uma requisição do tipo GET para o endereço '**/notes' é um array de anotações, porém, como estamos mockando a resposta com um array vazio ([]), é isso que o frontend recebe, e portanto, nenhuma anotação é renderizada.

É isso aí!

O que está achando da série “pitadas de Cypress“?

Aguardo teu feedback.

Este foi foi traduzido para inglês e pode ser encontrado no DEV Community.

Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy.