尝试在 Jest 中模拟 setInterval()，使用 jest.useFakeTimers()，未按预期工作，断言导致类型匹配器错误

Question

I've read all the posts on here and Jest documentation as well, but I seem to be still doing something wrong. Im writing unit tests for a service which is using a global setInterval() function. When I write the test, I keep getting the following error:

expect(received).toHaveBeenCalledTimes(expected)

    Matcher error: received value must be a mock or spy function

    Received has type:  function
    Received has value: [Function anonymous]

      40 |
      41 |     expect(smartlook).toHaveBeenCalledTimes(2);
    > 42 |     expect(setInterval).toHaveBeenCalledTimes(1);
         |                         ^
      43 |   });
      44 | });

Here is the function:

/**
 * trackSmartlook
 */
function trackSmartlook( eventType: string, eventName: string, properties = false ): void {
  if (window.smartlook) {
    window.smartlook.apply([eventType, eventName, properties]);
  } else {
    const checkSmartlookLoaded = setInterval(() => {
      if (window.smartlook) {
        window.smartlook.apply([eventType, eventName, properties]);
        clearInterval(checkSmartlookLoaded);
      }
    }, 1000);
  }
}

export default trackSmartlook;

And here is the test file:

import trackSmartlook from 'Services/app/SmartlookService';

const eventType      = 'track';
const eventName      = 'event name';

/**
 * Mocking window.smartlook
 */
Object.defineProperty(window, 'smartlook', {
  value   : jest.fn().mockImplementation(),
});

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

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

/**
 * Test SmartlookService
 */
describe('test SmartlookService', () => {
  it ('trackSmartlook calls setInterval and call window.smartlook twice', () => {
    const smartlook = jest.spyOn(window,'smartlook').mockImplementation();
    smartlook.mockReturnValue(undefined);

    trackSmartlook(eventName, eventType);

    jest.advanceTimersByTime(1001);

    expect(smartlook).toHaveBeenCalledTimes(2);
    expect(setInterval).toHaveBeenCalledTimes(1);
  });
});

Ive tried everything that is suggested in Jest documentation. Ie jest.spyOn(global,'setInterval'), jest.useFakeTimers('legacy') etc, but still i'm getting the same outcome. Any suggestions would be appreciated. Jest version 27.0.1

Answer 1

尝试使用jest.useFakeTimers('legacy')

Answer 2

I have this example, maybe help you. Using jest version 27.5.1 ("jest": "^27.5.1").

import { shallowMount } from "@vue/test-utils";
import ProgressBar from '../ProgressBar.vue'

describe('ProgressBar.vue', () => {
  // Function to run before each test.
  beforeEach(() => {
    jest.useFakeTimers('legacy') // Replaces global timer functions. legacy to works setInterval return value mocks.
  })
  
  test('clears timer when finish is called', () => {
    jest.spyOn(window, 'clearInterval') // Spies on the clearInterval function.
    
    setInterval.mockReturnValue(123) // Configures setInterval to return 123.

    const wrapper = shallowMount(ProgressBar)
    wrapper.vm.start() // Calls start to start the timer.
    wrapper.vm.finish() // Calls clearInterval function.

    // Asserts that the clearInterval mock was called with the value returned from setInterval.
    expect(window.clearInterval).toHaveBeenCalledWith(123)
  })
})

ProgressBar.vue:

<template>
  <div
    :class="{hidden: hidden}"
    :style="{width: percent + '%'}"
  >

  </div>
</template>

<script>
export default {
  data() {
    return {
      hidden: true,
      percent: 0
    }
  },
  methods: {
    start() {
      this.percent = 0
      this.hidden = false

      this.timer = setInterval(() => {
        this.percent++
      }, 100)
    },
    finish() {
      this.hidden = true
      this.percent = 100

      clearInterval(this.timer)
    }
  }
}
</script>