Quiero probar el componente modal, pero hay un error al definir el botón de cancelar, solo se muestra si no es móvil.

isMobile es una variable que es un valor booleano de hook - useBreakpoint (hook de la biblioteca de diseño de hormigas).

No sé cómo burlarme de ese valor, o cómo hacer clic en ese botón.

Nota: si elimino la verificación de isMobile, el botón hace clic bien :)

 import React from 'react' import {Grid, Typography} from 'antd' import {Button} from '@/components/Button' import {Modal} from '@/components/Modal' import translations from './translations' import {ConfirmationModalProps} from './props' const {Text} = Typography const {useBreakpoint} = Grid export const ConfirmationModal = ({visible, onClose, children}: ConfirmationModalProps) => { const screens = useBreakpoint() const isMobile = screens.xs return ( <Modal title={translations().chargeConfirmation} visible={visible} onOk={onClose} onCancel={onClose} footer={[ !isMobile && ( <Button role={'cancel-button'} type={'ghost'} key={'cancel'} onClick={onClose}> { translations().cancel } </Button> ), <Button type={'primary'} key={'charge'} onClick={onClose}> { translations().confirm } </Button> ]} > <Text>{translations().confirmationText(children)}</Text> </Modal> ) } describe('ConfirmationModal', () => { it('should should the children and close button', async () => { const onClose = jest.fn() jest.mock('antd/es/grid/hooks/useBreakpoint', () => ({ xs: false })) render(<ConfirmationModal onClose={onClose} visible={true}>100</ConfirmationModal>) const child = screen.getByText('Are you sure you want to charge 100') expect(child).toBeTruthy() expect(screen.queryByTestId('cancel')).toBeDefined() await waitFor(() => screen.queryByTestId('cancel')) fireEvent.click(screen.queryByRole('cancel-button')) expect(onClose).toHaveBeenCalledTimes(1) }) })

Los errores son:

1. Error: no se puede activar un evento de "clic". Proporcione un elemento DOM.
2. No se puede encontrar un elemento accesible con el rol "botón de cancelación"

Dependiendo del selector queryByRole o getByRole.

¿Qué está mal?