Cypress use clock between each test without visit again

I have a component which will call api every 20 seconds(setInterval)

and I wanna test if the api return different result, what will my component show.

I try to speed up the setInterval with cy.clock and cy.tick , but it only works in the first test.

there is my code:

// 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
  })
})

I try to add cy.clock in 'test2' before I call cy.tick(20000) , and there has no error but still not working.(I dunno why but API doesn't be called)

I try the answer here:
https://stackoverflow.com/questions/70702941/cy-clock-and-cy-tick-not-working-with-split-code

but get error: Cannot read properties of null (reading 'details')

I wondering it's cuz Cypress will automatically call restore between tests.

clock need to be called before setInterval, that's might be the reason I add a new clock and doesn't work.

is there any way to use the same clock function without visit the page again?

edit:

I've tried the two answer below but still not working

the clock stop at 1000 and doesn't change to 2000

I'm using Vue3 and Cypress v12.11.0 with chrome v113

there is my testing code:
it looks very noraml when I visit the page without cypress

// test.vue
<template>
  <div data-test="number">{{number}}</div>
</template>

<script lang="ts" setup>
import {onMounted,ref,} from 'vue'

var number = ref(0)
onMounted(()=>{
  setInterval(() => {
    number.value += 1
  }, 1000)
})
</script>

// 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')
})
})

there is the error:

If you want to apply cy.clock() for both tests, change before() to beforeEach(). This runs the code inside before each test.

Here is a full test showing the options.

Isolated tests:

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')
  })
})

Non-isolated tests:

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')
  })
})

This is the test page (simple counter):

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

I created a new project which is only have Vue, Vite and Cypress.
this code works well.

after checking all setting in my old project, there is no weird setting.<br>
also I find that it works well when the first time runing npx cypress open.

finally I solved it by use clock after checking page is loaded.

describe('clock and interval test - with test isolation off', 
{testIsolation: false}, () => {
before(()=>{
cy.visit('http://localhost:3000/#/index/dashboardview2').then(()=>{
expect(cy.get('[data-test="number"]').should('be.visible'))
})
})
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) // finally works
cy.get('[data-test="number"]').should('have.text', '2')
})
})

I guess that's cuz my project will check something first when you try to visit page(like token or sth), it takes time to do that.

so I need to check the number is visible before I use clock.

thx for everyone!