使用 useEffect 和 jest.useFakeTimer() 进行测试

Question

I'm trying to create simple refresher component here

Refresher.js

import { useEffect } from 'react';

const Refresher = ({ onRefresh }) => {
  useEffect(() => {
    const id = setInterval(onRefresh, 60000);
    return () => {
      clearInterval(id);
    };
  }, [onRefresh]);

  return null;
};

export default Refresher;

However, when i try to test it using jest.useFakeTimers() , somehow it's didn't work. The stub is not called even after jest.runOnlyPendingTimers()

import React from 'react';
import renderer from 'react-test-renderer';
import Refresher from '../Refresher';

describe('Refresher', () => {
  test('should refresh the result every 60 seconds', () => {
    jest.useFakeTimers();

    const onRefreshSpy = jest.fn();

    const refresher = renderer.create(<Refresher onRefresh={onRefreshSpy} />);

    expect(onRefreshSpy).not.toHaveBeenCalled();
    jest.runOnlyPendingTimers();
    refresher.update(); // Trying force update here

    expect(onRefreshSpy).toHaveBeenCalled();
  });
});

If not mistaken, the interval will not run if the component are not update, so i tried to use refresher.update() , but seems like it's not really work.

Anyone know how to fix the test here?

Answer 1

You just need to mock useLayoutEffect instead of useEffect. See issue here

describe('Refresher', () => {
  beforeAll(() => jest.spyOn(React, 'useEffect').mockImplementation(React.useLayoutEffect))
  test('should refresh the result every 60 seconds', () => {
    jest.useFakeTimers();
    const onRefreshSpy = jest.fn();
    const refresher = renderer.create(<Refresher onRefresh={onRefreshSpy} />);
    expect(onRefreshSpy).not.toHaveBeenCalled();
    jest.runOnlyPendingTimers();
    expect(onRefreshSpy).toHaveBeenCalled();
  });
});

Answer 2

You have better control with the modern fake timers.

import React from 'react';
import renderer from 'react-test-renderer';
import Refresher from '../Refresher';

describe('Refresher', () => {
  test('should refresh the result every 60 seconds', () => {
    jest.useFakeTimers('modern'); // default for Jest 27+

    const onRefreshSpy = jest.fn();

    const refresher = renderer.create(<Refresher onRefresh={onRefreshSpy} />);

    expect(onRefreshSpy).not.toHaveBeenCalled();

    jest.advanceTimersByTime(60000);
    expect(onRefreshSpy).toHaveBeenCalledTimes(1);

    jest.advanceTimersByTime(60000);
    expect(onRefreshSpy).toHaveBeenCalledTimes(2);
  });
});