Cypress 在每次测试之间使用时钟，无需再次访问

Question

我有一个组件每 20 秒调用 api(setInterval)

我想测试 api 如果返回不同的结果，我的组件会显示什么。

cy.clock我尝试使用和加速 setInterval cy.tick，但它仅在第一次测试中有效。

这是我的代码：

// test.cy.ts

before(()=>{
  cy.clock(0,['setInterval'])
  cy.visit('my component url')
})
describe('test clock',()=>{
  it('test1',()=>{
    cy.tick(20000) // work
    // call API successfully
  })
  it('test2',()=>{
    cy.tick(20000) // error, you need to call cy.clock before calling cy.tick
  })
})

我尝试在调用之前在“test2”中添加 cy.clock cy.tick(20000)，没有错误，但仍然无法正常工作。（我不知道为什么，但 API 没有被调用）

我在这里尝试答案： cy.clock and cy.tick not work with split code

但出现错误：无法读取 null 的属性（读取“详细信息”）

我想知道这是因为 Cypress 会restore在测试之间自动调用。

时钟需要在 setInterval 之前调用，这可能是我添加新时钟但不起作用的原因。

有没有什么方法可以使用相同的时钟功能而无需再次访问该页面？

---

编辑：

我已经尝试了下面的两个答案但仍然不起作用

时钟停在 1000 并且不会更改为 2000

我正在使用 Vue3 和 Cypress v12.11.0 以及 chrome v113

这是我的测试代码：当我访问没有 cypress 的页面时，它看起来非常正常

// test.cy.ts

before(()=>{
  cy.clock(0,['setInterval'])
  cy.visit('my component url')
})
describe('test clock',()=>{
  it('test1',()=>{
    cy.tick(20000) // work
    // call API successfully
  })
  it('test2',()=>{
    cy.tick(20000) // error, you need to call cy.clock before calling cy.tick
  })
})

// test1.cy.ts
describe('test clock', () => {
  beforeEach(() => {
    cy.clock(0, ['setInterval']);
    cy.visit('http://localhost:3000/#/index/dashboardview2');
  });

  it('test1', () => {
    cy.get('[data-test="number"]').should('have.text', '0')
    cy.tick(1000); // Work
    cy.get('[data-test="number"]').should('have.text', '1')
  });

  it('test2', () => {
    cy.get('[data-test="number"]').should('have.text', '1')
    cy.tick(1000); // doesn't work
    cy.get('[data-test="number"]').should('have.text', '2')
  });
});

// test2.cy.ts
describe('clock and interval test - with test isolation off', 
  {testIsolation: false}, () => {

  before(() => {
    cy.visit('http://localhost:3000/#/index/dashboardview2')  // timer continues between tests
  })
  beforeEach(() => {
    cy.clock()
  })
  it('ticks 1 second', () => {
    cy.get('[data-test="number"]').should('have.text', '0')
    cy.tick(1000)
    cy.get('[data-test="number"]').should('have.text', '1')
  })
  it('ticks 2 seconds', () => {
    cy.get('[data-test="number"]').should('have.text', '1')
    cy.tick(1000)
    cy.get('[data-test="number"]').should('have.text', '2')
  })
})

有错误：

Answer 1

如果您想同时申请cy.clock()这两项测试，请更改before()为beforeEach()。这会在每次测试之前运行内部代码。

这是显示选项的完整测试。

隔离测试：

describe('clock and interval test - with test isolation on', 
  {testIsolation: true}, () => {

  beforeEach(() => {
    cy.clock()
    cy.visit('/')  // timer reset each visit
  })
  it('ticks 1 second', () => {
    cy.get('div').should('have.text', '0')
    cy.tick(1000)
    cy.get('div').should('have.text', '1')
  })
  it('ticks 1 seconds', () => {
    cy.get('div').should('have.text', '0')
    cy.tick(1000)
    cy.get('div').should('have.text', '1')
  })
})

非隔离测试：

describe('clock and interval test - with test isolation off', 
  {testIsolation: false}, () => {

  before(() => {
    cy.visit('/')  // timer continues between tests
  })
  beforeEach(() => {
    cy.clock()
  })
  it('ticks 1 second', () => {
    cy.get('div').should('have.text', '0')
    cy.tick(1000)
    cy.get('div').should('have.text', '1')
  })
  it('ticks 2 seconds', () => {
    cy.get('div').should('have.text', '1')
    cy.tick(1000)
    cy.get('div').should('have.text', '2')
  })
})

这是测试页（简单计数器）：

<div>0</div>
<script>
  setInterval(() => {
    const div = document.querySelector('div')
    div.innerText = +div.innerText +1
  }, 1000)
</script>