React.js测试（反应测试库）

Question

有人可以帮助我测试下面的组件吗？我正在使用testing-library / react库，遇到了困难。

export default function BodyCardConfirmacaoSeguranca({ email, celular }) {
    const [selectedCard, setSelectedCard] = useState(null);

    const handleSelectCard = (value) => {
        if (value === selectedCard) {
            setSelectedCard(null);
        } else {
            setSelectedCard(value);
        }
    };

    return (
        <>
            <CardEnvioCod
                data-testid="email"
                tipoEnvio="email"
                data={email}
                handleSelectCard={() => handleSelectCard('email')}
                selectedCard={selectedCard}
            />

            <CardEnvioCod
                data-testid="sms"
                tipoEnvio="sms"
                data={telefone(celular)}
                handleSelectCard={() => handleSelectCard('sms')}
                selectedCard={selectedCard}
            />
        </>
    );
}

我正在尝试这样的事情：

    it('', () => {
        const { findByTestId } = Render(
            <ThemeProvider theme={AppTheme}>
                <BodyCardConfirmacaoSeguranca />
            </ThemeProvider>,
        );

        const email = findByTestId('email');
        const sms = findByTestId('sms');

        fireEvent.change(email, { selectedCard: 'email' });
        fireEvent.change(sms, { selectedCard: 'sms' });
    });

我需要测试handleSelectCard函数及其在组件上的调用

下面的代码，尚未经过测试。它在中使用，我也可以在错误的地方进行测试吗？我迷路了

export default function CardEnvioCod({
    tipoEnvio,
    data,
    handleSelectCard,
    selectedCard,
}) {
    const classes = useStyles();

    const selected = selectedCard === tipoEnvio;

    const icon =
        tipoEnvio === TIPO_ENVIO.EMAIL ? (
            <EmailOutlined
                className={clsx(classes.icon, selected && classes.selected)}
            />
        ) : (
            <PhoneAndroidOutlinedIcon
                className={clsx(classes.icon, selected && classes.selected)}
            />
        );
    const text =
        tipoEnvio === TIPO_ENVIO.EMAIL
            ? 'Enviar por e-mail:'
            : 'Enviar por SMS:';

    useEffect(() => {}, []);

    return (
        <Grid container justify="center" className={classes.container}>
            <Grid
                item
                component={Paper}
                variant="outlined"
                lg={7}
                xs={12}
                square
                elevation={0}
                className={clsx(classes.root, selected && classes.selected)}
                onClick={handleSelectCard}
            >
                <Grid container justify="space-between" alignItems="center">
                    <Grid item lg={1} xs={2}>
                        <Icon>{icon}</Icon>
                    </Grid>
                    <Grid item xs={8}>
                        <Grid container justify="flex-start" direction="column">
                            <Typography
                                className={clsx(
                                    classes.titleCard,
                                    selected && classes.selected,
                                )}
                            >
                                {text}
                            </Typography>
                            <Typography
                                title={data}
                                className={classes.divData}
                            >
                                {data}
                            </Typography>
                        </Grid>
                    </Grid>
                    <Grid item lg={1} xs={2}>
                        <Grid container justify="flex-end">
                            {selected ? (
                                <CheckBoxIcon
                                    fontSize="large"
                                    cursor="pointer"
                                />
                            ) : (
                                <CheckBoxOutlineBlank
                                    color="primary"
                                    fontSize="large"
                                    cursor="pointer"
                                />
                            )}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>
    );
}