[Vuejs]-Timeout simulation not working with testing-library and useFakeTimers

by

0👍

✅

It works for me after calling advanceTimersByTime inside waitFor.

describe.only('Vue Component (mobile) 2', () => {
    beforeAll(() => {
      isMobile.mockImplementation(() => true)
    })

    beforeEach(() => {
      jest.useFakeTimers()
    })

    afterEach(() => {
      jest.runOnlyPendingTimers()
      jest.useRealTimers()
    })

    it('should render title after `props.delay` milliseconds', async () => {
      const { queryByTestId } = myRender({
        localVue: myMakeLocalVue(),
      })

      await waitFor(() => {
        jest.advanceTimersByTime(5001)
      })

      expect(queryByTestId('modal-testid')).toBeVisible()
    })
})

0👍

  1. remove this jest.spyOn(global, 'setTimeout'). jest will do it’s own magic with for this with useFakeTimers
  2. I suppose you can not use async and done callback in one test case. Which version of jest do you use?
  3. Add await localVue.$nextTick() after advanceTimersByTime to wait until Vue apply all the changes

Leave a comment