Как я могу протестировать контент в ag-grid с помощью тестовой библиотеки?

Я пытаюсь написать несколько простых тестов, чтобы заголовки и данные, которые я хочу отображать, отображались должным образом. Я создал репозиторий - https://github.com/olore/ag-grid-testing-library для воспроизведения. Таблица выглядит так, как я и ожидал при открытии в браузере.

<AgGridReact
  columnDefs={ /* First 2 always findable, others never */
  [
    { field: "make" }, 
    { field: "model" }, 
    { field: "price" }, 
    { field: "color" },
  ]}
  rowData={
  [{ 
    make: "Toyota", 
    model: "Celica",
    price: "35000", 
    color: "blue" 
    }]
  }
  pagination={true}></AgGridReact>

И тесты

test('renders all the headers', async () => {
  const { getByText } = render(<GridExample />);
  expect(getByText("Make")).toBeInTheDocument();  // PASS
  expect(getByText("Model")).toBeInTheDocument(); // PASS
  expect(getByText("Price")).toBeInTheDocument(); // FAIL
  expect(getByText("Color")).toBeInTheDocument(); // FAIL
});

Локально доступны заголовки и данные первых двух столбцов, но ни один из других столбцов не отображается, как я вижу в выводе testing-library. Я использую --env=jsdom-fourteen в соответствии с рекомендациями других сообщений.

Как ни странно, для тестов не отображаются заголовки или данные, когда в codeandbox для этого репо, как и в случае с локальным, браузер выглядит корректно. https://codesandbox.io/s/gallant-framework-e54c7. Затем я попытался дождаться gridReady https://codesandbox.io/s/intelligent-minsky-wl17y, но это не имело значения.

РЕДАКТИРОВАТЬ: Также попытался напрямую вызвать функцию в onGridReady, та же проблема (первые 2 столбца проходят, вторые 2 терпят неудачу)

test('renders all the headers', async (done) => {
  let page;

  const onReady = () => {
    expect(page.getByText("Make")).toBeInTheDocument();  // PASS
    expect(page.getByText("Model")).toBeInTheDocument(); // PASS
    expect(page.getByText("Price")).toBeInTheDocument(); // FAIL
    expect(page.getByText("Color")).toBeInTheDocument(); // FAIL
    done();
  }
  page = render(<GridExample ready={onReady}/>);
});

person olore    schedule 19.09.2020    source источник
comment
Если вы добавите screen.debug() в свой тест, вы заметите, что Price и Color не отображаются в выводе, поэтому библиотека тестирования React не может их найти. Я не уверен, почему это так, потому что я не использую ag-grid. Прости ????   -  person kentcdodds    schedule 06.11.2020


Ответы (1)


ag-grid использует виртуализацию столбцов, так что кажется решение здесь состоит в том, чтобы отключить его с помощью атрибута suppressColumnVirtualisation элемента <AgGridReact>.

  <AgGridReact
        suppressColumnVirtualisation={true}
        ...

Бум! Все испытания проходят!

На самом деле, вероятно, было бы идеально подавить это только во время тестирования:

        suppressColumnVirtualisation={process.env.NODE_ENV === "test"}
person olore    schedule 08.11.2020
comment
Если только одно из полей не использует groupCellRenderer. Это я еще не взломал. - person olore; 30.11.2020