[解決済み] cypressのclock()とtick()を理解する

質問

私は、以下のような簡単なReactアプリを作成しました。 サイプレスクロック が動作します。

function App() {
  const inputRef = useRef();
  useEffect(()=>{
    setTimeout(()=>inputRef.current.value = "foo",20000)
  },[])
  return (
    <div className="App">
      <input ref={inputRef} type="text" data-cy="my-input"/>
    </div>
  );
}

基本的には、20秒待ってから入力値を"foo"に設定します。

このロジックをCypressのクロックを使ってアサートしようとしています。

describe("My Input",()=>{
    beforeEach(()=>{
        cy.visit('/')
    })

    it("should get a value of foo after 20 seconds",()=>{
        cy.clock()
        cy.tick(20000);
        cy.get('[data-cy=my-input]').should('have.value','foo');
    })
})

を呼び出すなど、複数のことを試してみました。 cy.clock() の内部で beforeEach 節で、生成された clock をアサーションに含めることができます。 cy.clock().then(clock => clock.tick(20000)) が、何も動作しないようです。

何が足りないのでしょうか？

解決方法は？

というわけで、結局、テストは clock() の呼び出しを before のコールバックです。

before(()=>{
        cy.clock();
        cy.visit('/')
    })

    it("should get a value of foo after 20 seconds",()=>{
        cy.get('[data-cy=my-input]')
        cy.tick(20000);
        cy.get('[data-cy=my-input]').should('have.value','foo');
    })

の中で同じことをする理由はよくわかりません。 beforeEach は同じ効果が得られません。