React Testing library queries can’t find last column in MUI’s Datagrid

I am trying to run some tests using React Testing Library/Jest to check if the edit and delete buttons that you can find in each row of the datagrid are working properly.

I am using the latest version of Material-UI‘s datagrid package. For each column, I have set flex and a minimum width so that the columns can grow as the window size grows but never be smaller than the minimum width.

I do not know the default window size that Jest uses for tests but for some reason, the last column “Actions” can’t be found by React Testing library queries. This means that you would probably have to scroll horizontally to see the last column.

I have disabled virtualization in the Datagrid component so that all rows and columns that are hidden should be visible. I have also tried setting global.innerWidth to a big value to see if all columns would be rendered. So far, nothing has worked.

Has anyone had the same issue or know what the solution would be for this issue?

Here is an image of how the Datagrid component looks:
Datagrid component

Here is the code of the component in question:

import { useCallback, useEffect, useRef, useState, useContext } from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { Box } from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import axios, { AxiosResponse } from 'axios';
import { useNavigate } from 'react-router-dom';

import TableTooltip from '../../components/Tooltip/Tooltip';
import { AppContext } from '../../context/provider';
import { ApiResult } from '../../api/ApiResultInterface';
import { ApiService } from '../../api/ApiSevice';
import { AlertActionTypes } from '../../context/alert/alert.action.types';
import DeleteItemModal from '../DeleteItemModal/DeleteItemModal';
import { classes, Root } from './ModelsTable.styles';

type Model = {
  id: string;
  companyName: string;
  modelName: string;
};

type Item = { company: string; id: string };

const ModelsTable = () => {
  const [models, setModels] = useState<Model[]>([]);
  const [open, setOpen] = useState(false);
  const [item, setItem] = useState<Item>({ company: '', id: '' });

  const navigate = useNavigate();
  const { dispatch } = useContext(AppContext);

  // Used to not update state if component is unmounted before data fetch is complete
  let _isMounted = useRef(true);

  const setAlert = useCallback(
    (msg: string, status: number) => {
      dispatch({
        type: AlertActionTypes.SetAlertMessage,
        payload: new ApiResult(msg, status),
      });
      dispatch({ type: AlertActionTypes.OpenAlertMessage, payload: true });
    },
    [dispatch]
  );

  const fetchModels = useCallback(async () => {
    try {
      const response: AxiosResponse<Model[]> = await ApiService.getAllModels();

      // Do nothing if component has unmounted while fetching data
      if (!_isMounted.current) {
        return;
      }

      setModels(response.data);
    } catch (err) {
      if (axios.isAxiosError(err) && err.response) {
        const status = err.response.status;
        const error = err.response.data;

        setAlert(error.message, status);
      } else if (err instanceof Error) {
        setAlert(err.message, 400);
      }
    }
  }, [setAlert]);

  const deleteModel = async (company: string, id: string) => {
    try {
      let deletionResponse: AxiosResponse<{
        message: string;
      }> = await ApiService.deleteModel(company, id);
      const modelsResponse: AxiosResponse<Model[]> =
        await ApiService.getAllModels();

      // Do nothing if component has unmounted while fetching data
      if (!_isMounted.current) {
        return;
      }

      setModels(modelsResponse.data);
      setAlert(deletionResponse.data.message, deletionResponse.status);
    } catch (err) {
      if (axios.isAxiosError(err) && err.response) {
        const status = err.response.status;
        const error = err.response.data;

        setAlert(error.message, status);
      } else if (err instanceof Error) {
        setAlert(err.message, 400);
      }
    }
  };

  useEffect(() => {
    return () => {
      _isMounted.current = false;
    };
  }, []);

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

  // Table columns
  const columns: GridColDef[] = [
    {
      field: 'id',
      headerName: 'Id',
      description: 'Id',
      headerAlign: 'center',
      align: 'center',
      minWidth: 100,
      flex: 2,
      renderCell: (cellParams) => {
        const value = cellParams.value ? (cellParams.value as string) : '';

        return (
          <TableTooltip title={value}>
            <div className={classes.cellText}>{cellParams.value}</div>
          </TableTooltip>
        );
      },
      renderHeader: (headerParams) => {
        return (
          <TableTooltip title={headerParams.colDef.description as string}>
            <div className={classes.cellText}>
              {headerParams.colDef.description}
            </div>
          </TableTooltip>
        );
      },
    },
    {
      field: 'modelName',
      description: 'Model',
      headerName: 'Model',
      headerAlign: 'center',
      align: 'center',
      minWidth: 100,
      flex: 2,
      renderCell: (cellParams) => {
        const value = cellParams.value ? (cellParams.value as string) : '';

        return (
          <TableTooltip title={value}>
            <div className={classes.cellText}>{cellParams.value}</div>
          </TableTooltip>
        );
      },
      renderHeader: (headerParams) => {
        return (
          <TableTooltip title={headerParams.colDef.description as string}>
            <div className={classes.cellText}>
              {headerParams.colDef.description}
            </div>
          </TableTooltip>
        );
      },
    },
    {
      field: 'companyName',
      description: 'Company',
      headerName: 'Company',
      headerAlign: 'center',
      align: 'center',
      minWidth: 100,
      flex: 2,
      renderCell: (cellParams) => {
        const value = cellParams.value ? (cellParams.value as string) : '';

        return (
          <TableTooltip title={value}>
            <div className={classes.cellText}>{cellParams.value}</div>
          </TableTooltip>
        );
      },
      renderHeader: (headerParams) => {
        return (
          <TableTooltip title={headerParams.colDef.description as string}>
            <div className={classes.cellText}>
              {headerParams.colDef.description}
            </div>
          </TableTooltip>
        );
      },
    },
    {
      field: 'actions',
      description: 'Actions',
      headerClassName: 'last-column-header',
      headerName: 'Actions',
      headerAlign: 'center',
      align: 'center',
      hideSortIcons: true,
      disableColumnMenu: true,
      minWidth: 100,
      flex: 1,
      renderCell: (cellParams) => {
        // Get model's id and company from the other columns of the row
        const id = cellParams.getValue(cellParams.id, 'id')?.toString() || '';
        const company =
          cellParams.getValue(cellParams.id, 'companyName')?.toString() || '';

        return (
          <div className={classes.statusCell}>
            <div className={classes.statusContainer}>
              <EditIcon
                className={classes.editButton}
                onClick={() =>
                  navigate(`/dashboard/update-model/${company}/${id}`)
                }
              />
              <DeleteOutlineIcon
                className={classes.deleteButton}
                color="secondary"
                onClick={() => {
                  setItem({ company, id });
                  setOpen(true);
                }}
              />
            </div>
          </div>
        );
      },
      renderHeader: (headerParams) => {
        return (
          <TableTooltip title={headerParams.colDef.description as string}>
            <div className={classes.cellText}>
              {headerParams.colDef.description}
            </div>
          </TableTooltip>
        );
      },
    },
  ];

  return (
    <Root>
      <h1 className={classes.tableTitle}>Models</h1>
      <Box boxShadow={3} className={classes.modelsTableContainer}>
        <DataGrid
          rows={models}
          loading={models.length === 0}
          columns={columns}
          className={classes.modelsTable}
          checkboxSelection={false}
        />
      </Box>
      <DeleteItemModal
        open={open}
        item={item}
        setOpen={setOpen}
        setItem={setItem}
        deleteItem={deleteModel}
      />
    </Root>
  );
};

export default ModelsTable;