Cypress cy.tick() 第二次调用时不转发时间

如何解决Cypress cy.tick() 第二次调用时不转发时间

我一直在阅读有关 cy.clock 的文档并将其用于组件测试设置。但我似乎在这里做错了

 it.only('shows an estimate on when it is ready (fulfilled)',() => {
    const Now = new Date()
    cy.clock(Now)

    mount(
      <ResizeWrapper>
        <CartProvider>
          <PaymentSucceededMessage />
        </CartProvider>
      </ResizeWrapper>
    )

    // Time left
    cy.contains('10 min',{ matchCase: false }).should('be.visible')
    cy.tick(1000 /*ms*/ * 60 /*sec*/ * 1 /*min*/ + 300 /*ms*/)
    cy.contains('9 min',{ matchCase: false }).should('be.visible')
    // ? Something breaks here ?
    cy.tick(1000 /*ms*/ * 60 /*sec*/ * 1 /*min*/ + 300 /*ms*/)
    cy.contains('8 min',{ matchCase: false }).should('be.visible') // FIXME: The test does not work but the real life version does
  })

实现（目前）是这样的

  const [minutesLeft,minutesLeftSet] = React.useState<number>(10)


  React.useEffect(() => {
    let timer
    if (minutesLeft > 0) {
      timer = setTimeout(() => {
        console.log(new Date())
        minutesLeftSet((minutesLeft) => minutesLeft - 1)
      },1000 /*ms*/ * 60 /*sec*/ * 1 /*min*/)
    }

    return () => {
      if (timer) clearTimeout(timer)
    }
  },[minutesLeft])

控制台只显示 1 个打印的 new Date()...?

解决方法

我认为出于同样的原因，您经常需要使用 useState setter 的回调形式，例如 minutesLeftSet((minutesLeft) => minutesLeft - 1)，您还需要在测试中进行节拍以允许 React 钩子进行处理。

所以，这有效

const now = new Date()
cy.clock(now)

mount(
  <ResizeWrapper>
    <CartProvider>
      <PaymentSucceededMessage />
    </CartProvider>
  </ResizeWrapper>
)

// Time left
cy.contains('10 min',{ matchCase: false }).should('be.visible')

cy.tick(1000 /*ms*/ * 60 /*sec*/ * 1 /*min*/ + 300 /*ms*/)
cy.wait(0)                                                      // yield to React hooks
cy.contains('9 min',{ matchCase: false }).should('be.visible')

cy.tick(1000 /*ms*/ * 60 /*sec*/ * 1 /*min*/ + 300 /*ms*/)
cy.wait(0)                                                      // yield to React hooks
cy.contains('8 min',{ matchCase: false }).should('be.visible')