reactjs - cy.tick() 在赛普拉斯测试中无法正常工作

Question

我正在测试 5 秒后出现超时屏幕：

describe('UI aggregates error/status', () => {
  beforeEach(() => {
    cy.clock();
    cy.visitHome();
  });

  describe('Detect timeout of backend status and trigger modal dialog.', () => {
    const TIMEOUT = 5000;
    it('reports a timeout if no status is received after 5 seconds', () => {
      sendStatus({ status: HEALTHY });
      cy.tick(TIMEOUT + 1);
      expectErrorScreen();
    });
  });
});

实际的应用程序代码可以正常工作。

export const handleStatusMessage = (message: MessageEvent): ThunkAction =>
  (dispatch: ThunkDispatch<{}, {}, any>, getState: () => AppState) => {
    const { status }: StatusMessage = JSON.parse(message.data);

    // clear the timer, that we set last time
    const oldTimer = getState().meta.statusTimer;
    if (oldTimer) clearTimeout(oldTimer);

    // start a new timer. if we don't receive a status within the timeout period,
    // this timer will finish and report a timeout.
    const newTimer = setTimeout(() => {
      dispatch(reportError('Timeout'));
    }, STATUS_TIMEOUT_MS);

    // report that we've received a status, replacing the old timer.
    dispatch(reportStatusReceived(newTimer));

    // handle actual status...

但是 cypress timer-mocking ( cy.tick()) 不起作用——测试失败，并且在他们超时后没有找到他们正在寻找的元素，我的超时屏幕出现了（因为应用程序超时时间比我猜的 cypress 自己的超时时间长）。

我已经cy.tick()在其他测试中成功使用过，所以我知道我用对了：

    describe('successful request', () => {
      beforeEach(() => {
        cy.clock();
        // ... other setup ...
      });

      describe('request timed out (no WS response after 5 secs)', () => {
        it('shows a timeout error when the HTTP request succeeds but a WS verification is not received', () => {
          cy.tick(5000);
          cy.contains('Timed out');
        });
      });
    });

笔记：

我今天写了有问题的测试。赛普拉斯今天也表现得非常非常烦人，在测试运行后异常被锁定（在赛普拉斯旋转中加载指标但测试被冻结，或不重新加载，和/或我无法与赛普拉斯 UI 交互） ，这包括一个问题，当我运行大量测试时，它会在运行中间冻结。所以我不知道这是否与它有关。虽然我只能运行那些有效的滴答测试（我上面的第三个片段）describe.only并且有效，但我再次可以确认它cy.tick有时有效。

标签： reactjscypress