[Vuejs]-Intercept network request in Cypress component test

by

0👍

✅

My app was using AWS Cognito for user authentication and to be able to make a graphql call, user should be logged in. For component test, it needs a way to login programmatically.

Cypress has a guide on Amazon Cognito Authentication.

After adding loginByCognitoApi command, my test looks like below and working ok with mocked response:

// component.js
import Amplify, { Auth } from 'aws-amplify'
import awsmobile from '~/aws-exports'
Amplify.configure(awsmobile)
Cypress.Commands.add('loginByCognitoApi', (username, password) => {
...

// beforeEach
    cy.intercept('POST', graphqlUrl, (req) => {
      aliasGraphqlQuery(req, queryName)

      if (req.alias && req.alias === aliasName) {
        req.reply(responseMyQuery)
      }
    })
    cy.loginByCognitoApi(
      existingUser,
      existingUserPassword
    )

// my test
    cy.mount(MyComponent, {...})
    cy.get('[data-test=myField] button.mdi-pencil')
      .click() // api call gets responseMyQuery

Leave a comment