赛普拉斯：在离线模式下测试 React 应用程序会导致测试挂起

Question

I am testing a React application created using create-react-app . I overwrite the App.js file to display text depending on whether the browser is online/offline:

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;

I then run npx cypress open and created the following test file:

/// <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();
  });
});

This tests the app in offline mode according to this guide . The first 2 tests run as expected but the 3rd test gets stuck in an infinite loop:

Answer 1

What Cypress version are you using?

I had a similar issue when after going Offline, Cypress couldn't go Online. After looking for an answer stumbled upon this reason https://github.com/cypress-io/cypress/issues/17723#issuecomment-906152925 . Eventually, I was able to get my code working using Cypress version 6.9.1 and not 9.5.1