赛普拉斯：在离线模式下测试 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让我的代码正常工作