reactjs - 测试库 React 在异步后不会触发点击

Question

我正在尝试用 Jest 编写一个测试。
当fireEvent.click在异步之后出现 it它不会触发该功能。
这正是描述问题的几行代码胜过数百个单词的确切情况。在下面的代码片段中，除了测试本身的名称之外，第二个和第三个测试完全相同(复制和粘贴)。

import {render, screen, waitFor, fireEvent} from '@testing-library/react';
import React from 'react';

const Component = ({asyncClick, syncClick}) => {
    function onClick(){
        console.log('clicked');
        syncClick();
        setTimeout(() => {
            asyncClick();
        }, 50);
    }
    return <div data-testid="toBeClick" onClick={onClick}>

    </div>;
}

describe('a test', function(){
    it('element exists', function(){
        render(<Component/>);
        let el = screen.getByTestId('toBeClick');
        expect(el).toBeInTheDocument();
    });

    it('element Click', async function(){
        let syncClick = jest.fn();
        let asyncClick = jest.fn();
        render(<Component asyncClick={asyncClick} syncClick={syncClick} />);
        let el = screen.getByTestId('toBeClick');
        fireEvent.click(el);
        expect(syncClick).toHaveBeenCalledTimes(1);
        await waitFor(() => {
            expect(asyncClick).toHaveBeenCalledTimes(1);
        });

    });

    it('element Click / 2', async function(){
        let syncClick = jest.fn();
        let asyncClick = jest.fn();
        render(<Component asyncClick={asyncClick} syncClick={syncClick} />);
        let el = screen.getByTestId('toBeClick');
        fireEvent.click(el);
        expect(syncClick).toHaveBeenCalledTimes(1);
        await waitFor(() => {
            expect(asyncClick).toHaveBeenCalledTimes(1);
        });

    });

})

第二次测试通过。第三次测试失败。为什么？
作为旁注，删除 async/await和 waitFor从第二次测试开始，就连第三次测试也开始通过了。
- 更新
看起来失败是由于 jest-setup.js 中的导入:

require('ionic/js/ionic.js');

我正在导入 Ionic v1，它破坏了测试。

Answer 1

将触发某些内容的异步操作包装在 act 中.

act(() => {
  fireEvent.click()
});

可以尝试使用 jest.useFakeTimers() and jest.runAllTimers() .
开始测试 jest.useFakeTimers() 点击后发送 jest.runAllTimers()
如果没有任何效果可以尝试

await new Promise(resolve => setTimeout(resolve, 0));