title: Understanding cypress clock() and tick()
body: <p>I've created this simple React app in order to understand how <a href="https://docs.cypress.io/api/commands/clock.html#Syntax" rel="nofollow noreferrer">Cypress clocks</a> work:</p>
  <pre><code>
  function App() {
    const inputRef = useRef();
    useEffect(()=&gt;{
      setTimeout(()=&gt;inputRef.current.value = &quot;foo&quot;,20000)
    },[])
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;input ref={inputRef} type=&quot;text&quot; data-cy=&quot;my-input&quot;/&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>Basically, the app waits 20 seconds and then sets the input value to &quot;foo&quot;.</p>
  <p>I'm trying to assert this logic using a Cypress clock:</p>
  <pre><code>describe(&quot;My Input&quot;,()=&gt;{
      beforeEach(()=&gt;{
          cy.visit('/')
      })
  
      it(&quot;should get a value of foo after 20 seconds&quot;,()=&gt;{
          cy.clock()
          cy.tick(20000);
          cy.get('[data-cy=my-input]').should('have.value','foo');
      })
  })
  </code></pre>
  <p>I've tried multiple things like calling <code>cy.clock()</code> inside the <code>beforeEach</code> clause an using the yielded <code>clock</code> in the assertion: <code>cy.clock().then(clock =&gt; clock.tick(20000))</code> but nothing seems to work.</p>
  <p>What am I missing here?</p>