reactjs 即使在使用fakeTimer和runAllTimers后,也未在单元测试中调用setTimeout回调

sc4hvdpw  于 2022-12-29  发布在  React
关注(0)|答案(1)|浏览(89)

我不明白为什么在使用jest. runAllTimers后,在我的单元测试中没有调用传递给setTimeout的回调。调用了useEffect,但没有调用超时回调,也没有根据Istanbul代码覆盖率报告进行覆盖。
实现方式大致如下:
React组件:

const MyComponent = () => {
    const [timer, setTimer] = useState(5);
    useEffect(() => {
        const timeout = setTimeout(() => {
            console.log('***** Timer Ran!!! *********');
            if(timer <= 5 && timer > 0) setTimer(timer - 1);
            else {
                return () => clearTimeout(timeout);
            }
        }, 1000);
    }, [timer]);

    <>
        // some JSX
    </>
};

试验:

jest.useFakeTimers(); // at top of file

it('should run code inside useEffect', () => {
    const startBtn = screen.getByTestId('start-btn');
    expect(startBtn).toBeEnabled();
    // more code
    jest.runAllTimers();
});

注意:我试过在waitFor和act中 Package jest.runAllTimers,但没有效果。

2guxujil

2guxujil1#

当我用act Package 组件的呈现时,我的问题得到了解决。
样本代码:

...
jest.useFakeTimers(); 
...

describe('Test Component', () => {
  beforeEach(async () => {
    await act(async () => {
      render(<MyComponent />);
    });

    await act(async () => {
      jest.runAllTimers();
    });
  });

  afterEach(() => {
    jest.resetAllMocks();
  });

  it('should check if ...', async () => {
    // tests
  });
});

相关问题