Tengo un componente que utiliza el componente Material-UI DataGrid :

MyComponent.js

 import { DataGrid } from '@mui/x-data-grid'; const rows = [ { id: 1, col1: 'Hello', col2: 'World' }, { id: 2, col1: 'MUI', col2: 'is Amazing' }, ]; const columns = [ { field: 'col1', headerName: 'Column 1', width: 150 }, { field: 'col2', headerName: 'Column 2', width: 150 }, ]; export default function MyComponent() { return ( <div> <DataGrid rows={rows} columns={columns} /> </div> ); }

Necesito probar que los accesorios se pasan correctamente al componente. Actualmente tengo pruebas como tales:

MyComponent.test.js

 import { render, screen } from '@testing-library/react'; import { DataGrid } from '@mui/x-data-grid'; import MyComponent from './MyComponent'; jest.mock('@mui/x-data-grid', () => ({ // This works DataGrid: () => <div data-testid="mock-datagrid" /> // This doesn't work :( DataGrid: jest.fn(() => <div data-testid="mock-datagrid" />) })); describe('<MyComponent />', () => { beforeEach(() => { render(<MyComponent />); }); it('renders the datagrid', () => { expect(screen.getByTestId('mock-datagrid')).toBeInTheDocument(); }); // Other tests will assert against DataGrid.mock (for example, checking rows and columns props) });

Cada vez que ejecuto la prueba con la versión jest.fn de burlarse de @mui/x-data-grid , aparece el siguiente error.

 Error: mockConstructor(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

¿Cómo puedo evitar este error mientras me burlo del componente DataGrid de esa manera?

Nota: sé que burlarse del componente DataGrid no es el método ideal, pero en este escenario específico, debo asegurarme de que los accesorios sean correctos y nada más.