How to stub an incoming http request (response) with cypress

Question

How can I stub a response of a HTTP request?

Let me explain it with my code I have now:

Cypress.Commands.add("FakeLoginWithMsal", (userId) => {
   
    cy.intercept('**/oauth2/v2.0/token', (req) => {
        
        req.reply({
            token_type: "Bearer",
            expires_in: 3795,
            access_token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJS"
            })

        req.continue((res) => {

        })
    })

With this code I am trying to stub the response for the following request:

But it still gives the following error, where I can understand the stub did not work:

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

I've tried already different intercept methods of cypress but I couldn't get worked.

---

I even can't intercept the /token endpoint with the following:

   cy.intercept({
    method: 'POST',
    url: 'https://login.microsoftonline.com/xx-xx-xx-xx-/oauth2/v2.0/token',
}).as('apiCheck')

---

Update: @Fody Thankyou vey much (again) for you respond. Actually I am trying to stub all the MSAL endpoints. It is not a testscript, but a login command.

Here it is:

Cypress.Commands.add("FakeLoginWithMsal", (userId) => {
    cy.intercept('GET', '**/authorize', { fixture: 'authorizeStub.json' })
    cy.intercept('GET', '**/v2.0/.well-known/openid-configuration', { fixture: 'openidConfigurationStub.json' })

cy.request({
    method: 'POST',
    url: 'https://login.microsoftonline.com/xxxxx/oauth2/v2.0/token',
    body: {
        grant_type: "password",
        client_id: "xxxxxxxxxxxxx",
        client_secret: "xxxxxxxxxxx",
        scope: "api://xxxxxxxxxxxxxx/Cp.Use",
        username: "xxx@xxxx.com",
        password: "xxxxx",
    },
    form: true,
}).then(response => {
    cy.log(JSON.stringify(response))
    cy.intercept('response', { fixture: 'tokenStub.json' })

    })

These are 3 endpoints, namely:

GET: /authorize (stubbed with a fixture)

GET: /openid-configuration (stubbed with a fixture)

Post: /token --> This POST has a response and there inside is the accesstoken. This response I need to stub.

And I guess that this response is a "incoming HTTP request" (see attachments). This incoming http response is exactly what I want to stub in a fixture.

Answer 1

I'm not sure without seeing the whole test, but are you are issuing the POST to microsoftonline from within the test using cy.request() ?

If so, you can't use cy.intercept() to catch it, only requests from the app will be caught.

But you can append a .then() to the cy.request() to wait for the response.

cy.request({
  method: 'POST',
  url: 'https://login.microsoftonline.com/.../oauth2/v2.0/token',
})
.then(response => {
  // handle response
  
})

---

Also in this code req.reply() and req.continue() you are both stubbing (with reply) and continuing to the server (with continue), which are opposite actions. You would only want to do one or the other.

cy.intercept('**/oauth2/v2.0/token', (req) => {
        
  req.reply({
    token_type: "Bearer",
    expires_in: 3795,
    access_token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJS"
  })

  req.continue((res) => {

  })
})