Testing-Library 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，即使是第三个测试也开始通过。

-- UPDATE看起来是由于jest-setup.js中的导入导致的：

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

我正在导入离子v1，但它破坏了测试。

Answer 1

包装在act中触发某些东西的异步操作。

(() => { fireEvent.click() })；

可以尝试使用jest.useFakeTimers() and jest.runAllTimers()。

在测试jest.useFakeTimers()开始时和单击dispatched jest.runAllTimers()之后

如果没有效果，可以尝试

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