question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stubing response headers with cy.intercept doesn't work

See original GitHub issue

Current behavior

I recently upgraded to 6.3 and tried to use the cy.intercept API. So I followed this article for stubbing a response

According to the test runner and the network tab, the fetch request get caught and is stubbed but in my app code the header is not there in the code.

Capture d’écran 2021-01-20 à 17 38 39 Capture d’écran 2021-01-20 à 17 39 00

I’ve created a repo to reproduce the bug but here is a quick piece of code of how I’m intercepting the request :

// index.spec.js
  it("", () => {
    cy.intercept("/toto", {
      statusCode: 200,
      body: "Toto",
      headers: {
        foo: "bar",
      },
    }).as("fetchToto");

    cy.visit("/");

    cy.wait("@fetchToto");

    cy.contains("The header was found");
  });
// index.js
const testFetching = async () => {
  const response = await fetch("https://adomainthatdoesntexist.com/toto");
  const text = await response.text();

  const expectedHeader = response.headers.get("foo");

  console.log("expectedHeader", expectedHeader, text);

  if (expectedHeader === "bar") {
    const div = document.createElement("div");
    div.innerText = "The header was found";

    document.body.appendChild(div);
  }
};

testFetching();

Desired behavior

I expect to be able to stub the response headers.

Test code to reproduce

I created a repo to reproduce the bug : https://github.com/TomPradat/cypress-response-stub-headers-not-working

To run the test:

  • yarn install && yarn start
  • yarn cypress:open

Versions

I’m using Chrome 88, cypress 6.3.0 (latest right now), OSX 10.15.7

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:14 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
flotwigcommented, Mar 25, 2021

@TomPradat this looks like it will not work, since foo is not in access-control-expose-headers, it will not exist in Response.headers: https://stackoverflow.com/a/54928828/3474615

How’s this work for you?

// index.spec.js
  it("", () => {
    cy.intercept("/toto", {
      statusCode: 200,
      body: "Toto",
      headers: {
        foo: "bar",
        'access-control-expose-headers': 'foo'
      },
    }).as("fetchToto");

    cy.visit("/");

    cy.wait("@fetchToto");

    cy.contains("The header was found");
  });
1reaction
TomPradatcommented, Mar 31, 2021

Yeap I’m confirming it works with the access-control-expose-headers, I totally missed that 👍

I’m closing this issue as a consequence

Read more comments on GitHub >

github_iconTop Results From Across the Web

intercept - Cypress Documentation
Dynamically stubbing a response. You can use the req.reply() function to dynamically control the response to a request. cy.
Read more >
Cypress cy.intercept Problems - Gleb Bahmutov
The command cy.intercept can match requests using a substring, a minimatch, or a regular expression. By default, it intercepts requests matching ...
Read more >
cy.intercept() not stubbing API in Cypress - Stack Overflow
If an object with no StaticResponse keys is passed, it will be sent as a JSON response body. StaticResponse keys are { fixture?:...
Read more >
A Practical Guide to Intercepting Network Requests in Cypress
intercept () command is the capability to modify the API response. This is especially useful for testing for larger amounts of data. You...
Read more >
Cypress - intercept Spy and stub network requests responses.
cy. intercept does not make a request, but rather "listens" to requests that occur on the network layer. If we "ask" Cypress to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found