I have a component that utilizes the Material-UI DataGrid component:

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>
  );
}

I need to test that the props are being passed into the component correctly. I currently have tests as such:

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)
});

Whenever I run the test with the jest.fn version of mocking @mui/x-data-grid, I am promted with the following error.

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

How can I prevent this error while mocking the DataGrid component like so?

Note: I know that mocking the DataGrid component is not the ideal method, but in this specific scenario, I need to ensure the props are correct and nothing more.