Ralat Cypress: Tamat masa selepas 5000 milisaat dengan `cy.wait()` ...tiada permintaan berlaku

Question

Saya memutuskan untuk membina aplikasi React menggunakan Vite, Chakra-UI dan TypeScript, dan mengujinya dalam Cypress. Matlamatnya adalah untuk mengetahui lebih lanjut tentang beberapa teknologi ini. Secara kebetulan, ini adalah kali pertama saya menggunakan Cypress.

Malangnya ini adalah sesuatu yang saya temui dalam ujian E2E .wait() 的问题。该错误具体如下：CypressError：5000ms后超时重试：cy.wait()超时等待5000ms对于路由的第一个请求：getGames。从未发生任何请求。 Saya telah melihat banyak nasihat tentang stub pertama dan kemudian menunggu panggilan sebelum mengakses halaman. Walau bagaimanapun, selepas banyak percubaan, saya nampaknya tidak dapat menerima panggilan menunggu untuk tidak tamat masa. Percubaan terbaru saya ialah memintas dalam panggilan beforeEach-ing sebelum panggilan fungsi akses. Seperti yang anda boleh lihat dari imej yang saya muat naik, pintasan seolah-olah mendaftar tetapi tidak pernah meningkat.

Adakah sesiapa yang menghadapi situasi ini dan mempunyai penyelesaian yang mungkin? Terima kasih terlebih dahulu!

Konsol Cypress:

Saya mempunyai lekapan yang ditakrifkan sebagai games.json yang mengandungi perkara berikut:

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

Dan fail ujian saya:

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

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

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

Answer 1

Pertama sekali, anda harus menggunakan protokol yang betul - https://api.rawg.io/api.

Kedua, tiada apa-apa sebelum ini https://api.rawg.io/api 之前没有任何内容，因此前面加通配符 **, jadi adalah tidak betul untuk menambah aksara kad bebas ** di hadapannya.

Ketiga, letakkan aksara kad bebas sebelum atau selepas pemisah laluan /或//.

Akhir sekali, jangan masuk 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)
  });
})