reactjs 周期时钟和周期刻度不使用分割代码

3yhwsihp 于 2023-05-22 发布在 React

关注(0)|答案(1)|浏览(136)

假设我在React.js项目中有一个setInterval，它是从15秒到0秒的倒计时。然而，我想在e2 e测试中使这个过程更快，因为15秒可能是60，120甚至240秒。
所以，这段代码是有效的：

describe('Test timer', () => {

  before(() => {
    cy.clock()
    cy.visit('http://localhost:3000')
  })

  it('Displays timer, pass 15 seconds, does not display timer', () => {
    cy.get('div [data-cy=counterText]').should('have.text', '15');
    cy.tick(15000);
    cy.get('div [data-cy=counterText]').should('have.text', '0');
  })
})

但是在项目中，我通常会像这样分割一些代码：

describe('Test timer', () => {

  before(() => {
    cy.clock()
  })

  it('Visit site', () => {
    cy.visit('http://localhost:3000')
  })

  it('displays timer', () => {
    cy.get('div [data-cy=counterText]').should('have.text', '15');
  })

  it('does not display timer', () => {
    cy.tick(15000);
    cy.get('div [data-cy=counterText]').should('have.text', '0');
  })
})

问题是，上面的代码给了我以下错误消息：

cy.tick() cannot be called without first calling cy.clock()

我已经尝试将cy.clock()移动到不同的位置，但没有成功，所以问题是：在上面的用例中，我应该把cy.clock()放在哪里？
我用的是Cypress 8.X以防万一
先谢谢你了！

reactjs

来源：https://stackoverflow.com/questions/70702941/cy-clock-and-cy-tick-not-working-with-split-code

1条答案

按热度按时间

2wnc66cl1#

您必须保留时钟示例，因为（我认为）测试之间的清除会影响您所期望的模式。
您还需要关闭tick上的日志记录，因为日志记录代码中有一个错误。（没有深入讨论这个问题）。

describe('Test timer', () => {

  let clock
  before(() => {
    cy.clock().then(c => clock = c)
  })

  it('Visit site', () => {
    cy.visit('http://localhost:3000')
  })

  it('displays timer', () => {
    cy.get('div [data-cy=counterText]').should('have.text', '15');
  })

  it('does not display timer', () => {
    clock.tick(15000, {log: false});
    cy.get('div [data-cy=counterText]').should('have.text', '0');
  })
})

简单的测试app

<div>
  <div id="counter" data-cy="counterText">15</div>
</div>
<script>
  let intervalID = setInterval(() => {
    const div = document.getElementById('counter')
    const newText = +div.innerText - 1
    console.log(`setting ${newText}`)
    div.innerText = newText
    if (newText < 1) {
      clearInterval(intervalID)
    }
  }, 1000)
</script>

赞(0）回复(0）举报 2023-05-22

我来回答

reactjs 周期时钟和周期刻度不使用分割代码

1条答案

相关问题

热门标签

最新问答