Unsure how to utilize vi.advanceTimers with recursion

[CodyBontecou]

I'm attempting to test this function. I'm not entirely sure how to set this up using vitest.

Here's the function I'm attempting to test:

export const getNextMatchFromLoop = async () => {
  const nextMatchResponse = await getNextMatch()

  if (nextMatchResponse) {
    return nextMatchResponse
  }

  setTimeout(getNextMatchFromLoop, intervalTimes.fiveSeconds)
}

And here's my test, which passes:

describe('getNextMatchFromLoop error states', () => {
  const setTimeoutSpy = vi.spyOn(global, 'setTimeout')

  beforeAll(() =>  vi.useFakeTimers())
  afterAll(() => {
    vi.useRealTimers()
    setTimeoutSpy.mockReset()
  })

  it('should retry fetching the next match after a delay', async () => {
    await getNextMatchFromLoop()

    vi.advanceTimersByTime(intervalTimes.fiveSeconds)
    expect(setTimeoutSpy).toHaveBeenCalledTimes(1)
  })
})

The issue I'm running into is, I can't extend it with further timer advances like so:

  it('should retry fetching the next match after a delay', async () => {
    await getNextMatchFromLoop()

    vi.advanceTimersByTime(intervalTimes.fiveSeconds)
    expect(setTimeoutSpy).toHaveBeenCalledTimes(1)

    vi.advanceTimersByTime(intervalTimes.fiveSeconds)
    expect(setTimeoutSpy).toHaveBeenCalledTimes(2)
  })

I assumed this would pass due to the recursive nature of getNextMatchFromLoop, but it's not. Any ideas?

In this particular case, I am mocking const nextMatchResponse = await getNextMatch() using msw so that it will never be truthy and always hit the setTimeout recursive call.

[CodyBontecou]

Here's a reproduction: https://stackblitz.com/edit/vitest-dev-vitest-6xoabt?file=test%2Ftimeout.test.ts

[CodyBontecou]

Hmm, when adding additional lines of the following:

 vi.advanceTimersByTime(5000)

it seems to be limited to logging three times.

Sorry, could you clarify what you mean by that's what you suspected? Is vi.useFakeTimers overriding the vi.spyOn functionality?

[hi-ogawa]

Is vi.useFakeTimers overriding the vi.spyOn functionality?

Yeah, that seems like it from this https://stackblitz.com/edit/vitest-dev-vitest-npbdtq?file=test%2Ftimeout.test.ts

    setTimeout(() => {}, 1);
    expect(setTimeoutSpy.mock.calls).toMatchInlineSnapshot(`
      [
        [
          [Function],
          0,
        ],
      ]
    `);

    setTimeout(() => {}, 2);
    expect(setTimeoutSpy.mock.calls).toMatchInlineSnapshot(`
      [
        [
          [Function],
          0,
        ],
      ]
    `);

[hi-ogawa]

I also remembered fake timers does dummy call _global.setTimeout(NOOP, 0) https://github.com/sinonjs/fake-timers/blob/341203310225bf5cd3d7396b2fcf276c5e218347/src/fake-timers-src.js#L161, so this matches with my expectation.

I'm not sure what's the best way to test what you want. You could probably swap these two, but you might still end up something unexpected if fake timer does something internally with setTimeout:

 // -- not here
 // const setTimeoutSpy = vi.spyOn(global, 'setTimeout');
 let setTimeoutSpy;

  beforeAll(() => {
    vi.useFakeTimers();
    // ++ but here?
    setTimeoutSpy = vi.spyOn(global, 'setTimeout')
  });

[CodyBontecou]

Hmm, doing the following:

import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
import { getNextMatchFromLoop } from '../src/basic.js'

describe('recursive timeout', () => {
  let setTimeoutSpy

  beforeAll(() => {
    vi.useFakeTimers()
    setTimeoutSpy = vi.spyOn(global, 'setTimeout')
  })
  afterAll(() => {
    vi.useRealTimers()
  })

  afterAll(() => {
    setTimeoutSpy.mockReset()
  })

  it('should retry fetching the next match after a delay', async () => {
    await getNextMatchFromLoop()

    vi.advanceTimersByTime(5000)
    expect(setTimeoutSpy).toHaveBeenCalledTimes(1)

    vi.advanceTimersByTime(5000)
    expect(setTimeoutSpy).toHaveBeenCalledTimes(2)
  })
})

ends up running into the same issue.

My goal is to eventually test semi-complex timeout logic of this function:

export const getLolEsportsData = async (
  callback: (
    detailsResponse: ParticipantFetchResponse,
    windowResponse: Frame
  ) => void
) => {
  const nextMatch = await getNextMatchFromLoop()

  if (nextMatch) {
    const liveGame = await getLiveGameInterval(nextMatch)

    if (liveGame) {
      await getLiveGameDetailsInterval(
        liveGame,
        async (detailsResponse, windowsResponse, restartMainLoop) => {
          callback(detailsResponse, windowsResponse)
          if (restartMainLoop) {
            await getLolEsportsData(callback)
          }
        }
      )
    }
  }
}

getLolEsportsData will run at dynamic intervals based on the response of specific functions.

i.e.
getNextMatchFromLoop is every 5 seconds until a response,
getLiveGameInterval is every 10 seconds until a response,
getLiveGameDetailsInterval is every 5 seconds until a specific response value (finished) is returned.
Then the loop restarts and it's back at getNextMatchFromLoop.

I want to eventually add more complex interval logic (i.e. after 10 failures increase to 1 hour), but I was hoping to get this simple variation of the function in a testable state before moving forward.

[CodyBontecou]

I guess, is it safe to assume if the following passes, then the timeout is working as expected?

  it('should retry fetching the next match after a delay', async () => {
    await getNextMatchFromLoop()

    vi.advanceTimersByTime(intervalTimes.fiveSeconds)
    expect(setTimeoutSpy).toHaveBeenCalledTimes(1)
  })

I think I was just surprised by it not working with additional timer advances, making me think maybe there is an issue somewhere.