3

Has anyone out there had any success in getting cy.tick() to work in cypress component tests. cy.clock() stops the time but tick will not move it forward in cypress component tests. If someone was able to get this working please give mean example .

And again this is in cypress component testing not e2n testing.
I've also added clock to a before() method.

Leopard Tanks
  • 161
  • 7
me-me
  • 5,139
  • 13
  • 50
  • 91

1 Answers1

5

You can find an example component LoadingIndicator plus test here set-timeout-example.

I ran the code in a new CRA application, and the test loading-indicator.cy.jsx passed.

One of the tests that uses cy.tick() is

it('should render loading indicator (mocks clock)', () => {
  cy.clock()
  mount(
    <LoadingIndicator isLoading={true}>
      <div>ahoy!</div>
    </LoadingIndicator>,
  )

  // force 2 seconds to pass instantly
  // and component's setTimeout to fire
  cy.tick(2010)

  cy.contains('loading...', 
    { timeout: 100 }               // fail if loader not displayed quickly
  ).should('be.visible')
})

Maybe your app does not use one of the supported native timer functions?

Fody
  • 23,754
  • 3
  • 20
  • 37
  • why do you need to use timeout: 100 in the cy.contains ? – me-me Mar 09 '23 at 02:12
  • That's from the Cypress example, I would say it's to demonstrate that within a short time (100 ms) of `cy.tick(2010)` occurring the app has rendered the loader. If it was left at default 4000 ms, it would not demonstrate the effect of the tick command. – Fody Mar 09 '23 at 02:45