Tengo un componente de botón que está oculto en <768px y se muestra en >768px

 import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; interface TestButtonProps { buttonLabel: string; } const MyButton = styled(Button)( ({theme: {breakpoints} }) => ({ display: 'none', [breakpoints.up('md')]: { display: 'block', } }) ) const TestButton = ({ buttonLabel } : TestButtonProps) => { return ( <div> <MyButton> {buttonLabel} </MyButton> </div> ) } export default TestButton;

Estoy tratando de usar React Testing Library para probar que este componente se muestra en> 768px (para que luego pueda agregar una prueba de evento de fuego)

 import { render, screen } from '@testing-library/react'; import TestButton from './test-button'; const mandatoryProps = { buttonLabel: 'Button Label', }; describe('MyBupaHelpDrawer', () => { it('it should render the button above md screensize', () => { render(<TestButton {...mandatoryProps} />); screen.getByRole('button', { name: 'Button Label'}); }); });

Sin embargo, la prueba está fallando.

TestingLibraryElementError: no se puede encontrar un elemento accesible con el rol "botón" y el nombre "Etiqueta de botón"

Parece que la primera regla de estilo "mostrar: ninguno" se selecciona, pero la regla de consulta de medios no.

También señaló que pasa la siguiente prueba:

 expect(window.innerWidth).toBe(1024);

También intenté renderizar condicionalmente el componente con reacción en función del tamaño de la pantalla, en lugar de modificar el atributo de visualización con css.

¿Cómo puedo modificar mi prueba para recoger la consulta de medios?

¿Debería abordar esto de una manera diferente?