Javascript 如何等到动画结束后再测试点击回调

我已经创建了一个Reaction组件，当单击该组件时会执行动画，在动画结束后会运行回调.我想使用Jest和Reaction测试库测试此功能.这是我的组件:

export const Valuable = ({ onClick }) => {
  const [isClicked, setIsClicked] = useState(false);
  const handleClick = () => {
    setIsClicked(true);
  };
  const handleAnimationEnd = () => {
    setIsClicked(false);
    onClick();
  };

  return (
    <div
      className={isClicked ? 'animate-valuable ' : ''}
      onClick={handleClick}
      onAnimationEnd={handleAnimationEnd}
      data-testid="valuable-container"
    >
      ...
    </div>
  );
};

测试:

describe('Valuable', () => {
  const valuableProps = {
    onClick: jest.fn(),
  };
  beforeEach(() => {
    render(<Valuable {...valuableProps} />);
  });

  it('should execute on click callback', () => {
    expect(valuableProps.onClick).not.toHaveBeenCalled();
    const container = screen.getByTestId('valuable-container');
    expect(container).toBeInTheDocument();
    fireEvent.click(container);
    expect(valuableProps.onClick).toBeCalledTimes(1);
    fireEvent.click(container);
    fireEvent.click(container);
    expect(valuableProps.onClick).toBeCalledTimes(3);
  });
});

这是我收到的错误

  ● Valuable › should execute on click callback

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0