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

monwx1rj  于 2023-03-11  发布在  Jest
关注(0)|答案(1)|浏览(150)

我尝试使用模拟数据进行AG Grid测试,但找不到解决方案。我尝试了很多方法,并为此工作了几天。我尝试使用模拟数据填充网格以进行测试。使用react测试库和Jest。我尝试使用Jest模拟数据。fn(),jest.mock等。但我不能得到任何工作。下面是一个链接到代码。有更多的模拟数据,只是把一个日期显示什么文件我使用。任何帮助是感激的。
我正在尝试将mockData.js中的模拟数据呈现到AG Grid中进行测试。如果有人有任何建议或帮助,我将不胜感激。谢谢。
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",
}
nbnkbykc

nbnkbykc1#

UPDATE:一个更好的工作方法是用“waitFor” Package 期望,这样它将尝试多次Assert它,直到最终成功。

import { waitFor } from '@testing-library/react';

await waitFor(() => {
    expect(screen.getByText('Date')).toBeInTheDocument();
});

相关问题