Cypress Error: Timed out after 5000 milliseconds with `cy.wait()` ...no request occurred

Question

I decided to build a React application using Vite, Chakra-UI and TypeScript, and test it in Cypress. The goal is to learn more about some of these technologies. Coincidentally, this was my first time using Cypress.

Unfortunately, I ran into a problem with testing .wait() in my E2E tests. The error is as follows: CypressError: Timeout and retry after 5000ms: cy.wait()Timeout waiting5000msFor the first request of the route: getGames. No request ever occurred. I've seen a lot of advice about first stubbing and then waiting for the call before accessing the page. However, after many attempts, I can't seem to get the waiting call to not timeout. My latest attempt was to intercept in the beforeEach-ing call before the access function call. As you can see from the image I uploaded, the intercept seems to register but never increases.

Has anyone encountered this situation and has a possible solution? Thank you in advance!

Cypress Console:

I have a fixture defined as games.json which contains the following:

[
  {
    "id": 1,
    "name": "The Witcher 3: Wild Hunt",
    "background_image": "https://media.rawg.io/media/crop/600/400/games/618/618c2031a07bbff6b4f611f10b6bcdbc.jpg",
    "parent_platforms": [
      { "id": 1, "name": "PC", "slug": "pc" },
      { "id": 2, "name": "PlayStation", "slug": "playstation" },
      { "id": 3, "name": "Xbox", "slug": "xbox" },
      { "id": 7, "name": "Nintendo", "slug": "nintendo" }
    ],
    "metacritic": "92"
  },
  {
    "id": 2,
    "name": "BioShock Infinite",
    "background_image": "https://media.rawg.io/media/crop/600/400/games/fc1/fc1307a2774506b5bd65d7e8424664a7.jpg",
    "parent_platforms": [
      { "id": 1, "name": "PC", "slug": "pc" },
      { "id": 2, "name": "PlayStation", "slug": "playstation" },
      { "id": 3, "name": "Xbox", "slug": "xbox" },
      { "id": 6, "name": "Linux", "slug": "linux" },
      { "id": 7, "name": "Nintendo", "slug": "nintendo" }
    ],
    "metacritic": "94"
  }
]

../support/commands.ts:

const baseURL = "**http://api.rawg.io/api*";

Cypress.Commands.add("landing", () => {
  cy.intercept("GET", `${baseURL}/games`, { fixture: "games.json" }).as(
    "getGames"
  );
});

And my test file:

describe("The Home Page", () => {
  before(() => {
    cy.landing();
  });

  beforeEach(() => {
    cy.visit("/");
  });

  it("successfully loads", () => {
    cy.wait("@getGames");
  });
});

Answer 1

First of all, you should use the correct protocol - https://api.rawg.io/api.

Secondly, https://api.rawg.io/api does not have any content before it, so it is incorrect to add the wildcard ** in front.

Third, place wildcard characters before or after the path separator / or //.

Finally, don't put interception in before() as it will be cleared between tests. Put in beforeEach()

describe("The Home Page", () => {
  beforeEach(() => {

    // these all work (use only one)
    cy.intercept('https://api.rawg.io/api/games?key=my-key-goes-here').as('games')
    cy.intercept('**/api/games?key=my-key-goes-here').as('games')
    cy.intercept('**/api/games?*').as('games')
    cy.intercept('**/api/*').as('games')
    cy.intercept('**//api.rawg.io/api/*').as('games')
    cy.intercept({pathname: '**/api/*'}).as('games')
    cy.intercept({pathname: '**/api/games'}).as('games')

    cy.visit("/");
  });

  it("successfully loads", () => {
    cy.wait("@games")
      .its('response.body.count')
      .should('be.gt', 900000)
  })

  it("successfully loads again", () => {
    cy.wait("@games")
      .its('response.body.count')
      .should('be.gt', 900000)
  });
})