Erreur Cypress : Délai expiré après 5 000 millisecondes avec `cy.wait()`... aucune demande n'a eu lieu

Question

J'ai décidé de créer une application React en utilisant Vite, Chakra-UI et TypeScript, et de la tester dans Cypress. L’objectif est d’en apprendre davantage sur certaines de ces technologies. Par coïncidence, c'était la première fois que j'utilisais Cypress.

Malheureusement, c'est quelque chose que j'ai rencontré lors des tests E2E .wait() 的问题。该错误具体如下：CypressError：5000ms后超时重试：cy.wait()超时等待5000ms对于路由的第一个请求：getGames。从未发生任何请求。 J'ai vu beaucoup de conseils sur le premier stubbing, puis sur l'attente de l'appel avant d'accéder à la page. Cependant, après de nombreuses tentatives, je n'arrive pas à faire en sorte que l'appel en attente n'expire pas. Ma dernière tentative a été d'intercepter l'appel beforeEach-ing avant l'appel de la fonction d'accès. Comme vous pouvez le voir sur l'image que j'ai téléchargée, l'interception semble s'enregistrer mais n'augmente jamais.

Quelqu'un a-t-il rencontré cette situation et a-t-il des solutions possibles ? Merci d'avance!

Console Cyprès :

J'ai un luminaire défini comme games.json qui contient les éléments suivants :

[
  {
    "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"
  );
});

Et mon fichier de test :

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

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

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

Answer 1

Tout d'abord, vous devez utiliser le bon protocole - https://api.rawg.io/api.

Deuxièmement, il n'y a rien avant https://api.rawg.io/api 之前没有任何内容，因此前面加通配符 **, il est donc incorrect d'ajouter le caractère générique ** devant.

Troisièmement, placez des caractères génériques avant ou après le séparateur de chemin /或//.

Enfin, ne soyez pas dedans before() 中放置拦截，因为它会在测试之间被清除。放入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)
  });
})