賽普拉斯：在離線模式下測試 React 應用程序會導致測試掛起

Question

我正在測試使用create-react-app的 React 應用程序。 我覆蓋 App.js 文件以根據瀏覽器是否在線/離線顯示文本：

import { Offline, Online } from "react-detect-offline";

function App() {
  return (
    <div className="App">
      <Online>
        <p data-testid="online-text">online</p>
      </Online>
      <Offline>
        <p data-testid="offline-text">offline</p>
      </Offline>
    </div>
  );
}

export default App;

然后我運行npx cypress open並創建了以下測試文件：

/// <reference types="cypress" />

const goOffline = () => {
  cy.log("**go offline**")
    .then(() => {
      Cypress.automation("remote:debugger:protocol", {
        command: "Network.enable",
      });
    })
    .then(() => {
      Cypress.automation("remote:debugger:protocol", {
        command: "Network.emulateNetworkConditions",
        params: {
          offline: true,
          latency: -1,
          downloadThroughput: -1,
          uploadThroughput: -1,
        },
      });
    });
};

const goOnline = () => {
  cy.log("**go online**")
    .then(() => {
      Cypress.automation("remote:debugger:protocol", {
        command: "Network.emulateNetworkConditions",
        params: {
          offline: false,
          latency: -1,
          downloadThroughput: -1,
          uploadThroughput: -1,
        },
      });
    })
    .then(() => {
      Cypress.automation("remote:debugger:protocol", {
        command: "Network.disable",
      });
    });
};

describe("app", () => {
  it("should render online text when online", () => {
    goOnline();
    cy.get("[data-testid='online-text']").should("exist");
    goOnline();
  });

  it("should render offline text when offline", () => {
    goOffline();
    cy.get("[data-testid='offline-text']").should("exist");
    goOnline();
  });

  it("should not render online text when offline", () => {
    goOffline();
    cy.get("[data-testid='online-text']").should("not.exist");
    goOnline();
  });
});

這會根據本指南在離線模式下測試應用程序。 前 2 個測試按預期運行，但第 3 個測試陷入無限循環：

Answer 1

您使用的是哪個賽普拉斯版本？

脫機后，我遇到了類似的問題，Cypress 無法 go 聯機。 在尋找答案后偶然發現了這個原因https://github.com/cypress-io/cypress/issues/17723#issuecomment-906152925 。 最終，我能夠使用 Cypress 版本6.9.1而不是9.5.1讓我的代碼正常工作