Cypress: Route response mock failing for AWS Cognito

[kleky]

Current behavior:

When mocking out the authentication process for a user login with AWS Cognito, the POST is not being captured.

Desired behavior:

The POST is captured and mock response returned.

Test code to reproduce

Create user pool in cognito
wire up an app and authenticate using node package aws-sdk and amazon-cognito-identity-js

const user = new CognitoUser({...});
user.authenticateUser(new AuthenticationDetails({...}, callback...)

https://github.com/amazon-archives/amazon-cognito-identity-js/blob/6b87f1a30a998072b4d98facb49dcaf8780d15b0/lib/CognitoUser.js#L242

https://github.com/amazon-archives/amazon-cognito-identity-js/blob/6b87f1a30a998072b4d98facb49dcaf8780d15b0/lib/CognitoUserPool.js#L69

cy.server();
    cy.route({
      method: "POST",
      url: "cognito-idp.eu-west-2.amazonaws.com/",
      response: {
        ChallengeName: "PASSWORD_VERIFIER",
        ChallengeParameters: {
          SALT: "...",
          SECRET_BLOCK: "...",
          SRP_B: "...",
          USERNAME: "i.Jones",
          USER_ID_FOR_SRP: "i.Jones"
        }
      }}).as("verifier");

Versions

Cypress - 4.1.0, operating system mac od 10.15.3 (catalina), browser test running in chrome 80

[jennifer-shehane]

@kleky Can you explain a bit more about what "the POST is not being captured" means?

Are you seeing an error in Cypress? Is something functionally not working from the mocked response? Is the route displaying in the Command Log in Cypress? Have you inspected the Network panel?

[jennifer-shehane]

Unfortunately we have to close this issue as there is not enough information to reproduce the problem. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please comment in this issue with a reproducible example, answering the questions above and we will consider reopening the issue.

[prrraveen]

I am having the same issue. The post request is not logging in cypress left panel but it is getting tracked in the netwok tab in chrome developer tool.
Other http requests are getting recorded in the cypress left panel. Its the issue only with aws congnito api.

[kleky]

I am having the same issue. The post request is not logging in cypress left panel but it is getting tracked in the netwok tab in chrome developer tool.
Other http requests are getting recorded in the cypress left panel. Its the issue only with aws congnito api.

Hi. I think they updated the docs recently stating that fetch requests are not supported. Cognitio uses a fetch request I believe, which is why its not caught. I've not tried to use the workaround, but would love to hear about it if you try.

[boraita]

I'm having the same issue, and I would like to know how to mock it, because I'm trying to log in and I tried can't mock it.
Even I tried delete the fetch as cypress give us here: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window-fetch
Or
Use a library to intercept the call.

[kleky]

Yeah me too, sadly I've had to resort to logging in for real. You could do the http POST of the login data, rather than using a UI form, which will speed things up.

[prrraveen]

@kleky could you please share an example code for this.

[prrraveen]

I followed this example to pollyfill the fetch api with xhr request.

I was able to log the amplify Auth.login post request using this code

describe('Test the login feature', () => {

  let polyfill

  // grab fetch polyfill from remote URL, could be also from a local package
  before(() => {
    const polyfillUrl = 'https://unpkg.com/unfetch/dist/unfetch.umd.js'

    cy.request(polyfillUrl)
      .then((response) => {
        polyfill = response.body
      })
  })

  // all calls will be done via XHR after we load polyfill
  // so we can spy on them using cy.route

  beforeEach(function () {

    cy.server()
    cy.route('POST','https://cognito-idp.us-east-2.amazonaws.com/').as('userLogin')

    // We use cy.visit({onBeforeLoad: ...}) to delete native fetch and load polyfill code instead
    cy.visit('/login', {
      onBeforeLoad(win) {
        delete win.fetch
        // since the application code does not ship with a polyfill
        // load a polyfilled "fetch" from the test
        win.eval(polyfill)
        win.fetch = win.unfetch
      },
    })
  })

  const userName = 'example'
  const pw = 'pass'

  it('try login', () => {
    cy
      .get('.user-name')
      .type(userName)
      .should('have.value', userName)

    cy
      .get('.password')
      .type(pw + '{enter}')

    cy.wait('@userLogin')
  })

})

[shadrech]

Nice @prrraveen . You mention getting polyfill from local package. How would someone go about doing this? I've tried this and it doesn't seem to work

const polyfill = require('../../../../node_modules/unfetch/dist/unfetch.umd.js');
  cy.visit(url, {
    onBeforeLoad(win: any) {
      delete win.fetch;
      // since the application code does not ship with a polyfill
      // load a polyfilled "fetch" from the test
      console.log(polyfill);
      win.eval(polyfill.slice(1));
      win.fetch = win.unfetch;
    }
  });