将数据模拟到 AG-Grid 中并使用 React 测试库/Jest 进行测试

Question

我正在尝试使用 AG Grid 的模拟数据进行测试，但找不到解决方案。我已经尝试了很多东西，并且已经为此工作了好几天。我正在尝试使用模拟数据填充网格以进行测试。使用 React 测试库和 Jest。我试过用 jest.fn()、jest.mock 等模拟数据，但我什么都做不了。下面是代码的链接。 Mock数据比较多，放一个日期就可以看出我用的是什么文件。任何帮助表示赞赏。

我正在尝试将 mockData.js 中的模拟数据渲染到 AG 网格中进行测试。如果有人有任何指示或帮助，我将不胜感激。谢谢。

https://plnkr.co/edit/1CPNNNuPyaj7hgSe

const GridExample = () => {
  const containerStyle = { width: '100%', height: '100%' };

  const [rowData, setRowData] = useState([
    { date: '12/12/2022  3:00PM' },
    { date: '10/31/2022  7:00PM' },
    { date: '10/30/2022  7:00AM' },
    { date: '10/1/2022  8:00AM' },
    { date: '8/31/2022  4:59PM' },
  ]);
  const [columnDefs, setColumnDefs] = useState([
    { field: 'date' },
  ]);


  return (
    <div style={containerStyle}>
      <div style={containerStyle} className="ag-theme-alpine">
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
        ></AgGridReact>
      </div>
    </div>
  );
};

render(<GridExample></GridExample>, document.querySelector('#root'));

// 还有更多测试，测试行数据但没有显示模拟数据。 // 我试过 jest.fn()、jest.mock 等

  const waitForGridToBeInTheDOM = () => waitFor(() => {
    expect(document.querySelector('.ag-root-wrapper')).toBeInTheDocument();
  });

  const waitForDataToHaveLoaded = () => waitFor(() => {
    expect(document.querySelector('.ag-overlay-no-rows-center')).toBeNull();
  });

describe('date Tests', function () {
   beforeEach(async function () {
    render(<GridExample />);

    await waitForGridToBeInTheDOM();
    await waitForDataToHaveLoaded();
  });

  test('should render date grid', function () {
  });
  test('should expect date grid to render with Date column', async function () {
    expect(screen.getByText('Date')).toBeInTheDocument();
  });
};

// 模拟文件 mockDate.js

const mockDataTest = {
  date: "01/01/2022 12:00PM",
  date: "08/07/2022 9:00PM",
  date: "10/01/2022 10:00PM",
}

Answer 1

我也在为此苦苦挣扎。我没有成功尝试等待与您相同的功能。此时我强制测试休眠 100 毫秒并且它起作用了。我相信有更好的方法可以实现这一目标。但由于这是我目前唯一呈现整个 AgGridReact 的测试。我觉得还行

打字稿：

const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
await sleep(100);