如何用Jest+React测试组件的回调参数及getVoteText返回值？

• 点击按钮时，onClick={() => onConfirmVote(number)}中传递的参数是否正确；
• getVoteText函数返回的值是否符合预期。

我的组件代码 #

function CandidateList({ data }: IProps) {
    const { convertToCurrency, convertToPercentage } = useNumberConversion();

    const getVoteText = useCallback(
        (total: number, percentage: number) => `${convertToCurrency(total)} (${convertToPercentage(percentage)})`,
        [convertToCurrency, convertToPercentage]
    );

    return (
        <ListGroup data-testid='candidate-list-component'>
            {data.map(({ onConfirmVote, avatar, number, votesConfirmed, hasVoted }) => (
                <ListGroup.Item key={`${number}`} as='li' className='d-flex flex-wrap gap-2 align-items-center'>
                    <div className='d-flex justify-content-between align-items-center w-100'>
                        <div className='d-flex flex-wrap align-items-center gap-2'>
                            <Avatar alt={`候选人 #${number}`} src={avatar} />
                            <h5 className='fw-bold mb-0'>#{number}</h5>
                        </div>

                        <div className='mt-1 d-flex flex-wrap align-items-center gap-2'>
                            <span className='mb-1'>票数：</span>

                            <Badge bg='primary' pill style={{ width: '155px' }} data-testid='badge-vote-value-component'>
                                {getVoteText(votesConfirmed.total, votesConfirmed.totalPercentage)}
                            </Badge>
                        </div>
                    </div>

                    <Button className='w-100' variant='success' onClick={() => onConfirmVote(number)} disabled={hasVoted}>
                        确认投票
                    </Button>
                </ListGroup.Item>
            ))}
        </ListGroup>
    );
}

我的测试代码 #

describe('[候选人列表] - 测试确认投票按钮组件', () => {
    test('点击确认投票按钮应正常工作！', () => {
        render(<CandidateList data={MOCKED_DATA} />);

        const confirmVoteButton = screen.getAllByRole('button');

        confirmVoteButton.forEach(button => {
            console.log(button);
            expect(fireEvent.click(button)).toBe(true);
        });
    });
});

内容的提问来源于stack exchange，提问作者THIAGO DE BONIS