Как я могу протестировать содержимое в ag-grid с помощью testing-library?

#ag-grid #react-testing-library #ag-grid-react #testing-library

#ag-grid #реагировать-тестирование-библиотека #ag-grid-реагировать #testing-library

Вопрос:

Я пытаюсь написать несколько простых тестов, чтобы заголовки и данные, которые я хочу отобразить, отображались как ожидалось. Я создал репозиторий — 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
});

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

Как ни странно, для тестов не отображаются заголовки или данные, когда в codesandbox для этого репозитория, как и в случае с local, браузер выглядит корректно. 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}/>);
});

1. Если вы добавите a screen.debug() в свой тест, вы заметите, что Price они Color не отображаются в выходных данных, поэтому библиотека тестирования React не может их найти. Я не уверен, почему это так, потому что я не использую ag-grid. Извините 😬

Ответ №1:

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

   <AgGridReact
        suppressColumnVirtualisation={true}
        ...

Бум! Все тесты пройдены!

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

         suppressColumnVirtualisation={process.env.NODE_ENV === "test"}

Ответ №2:

Дополнение к ответу @olore.

Если вы используете источник данных на стороне сервера, убедитесь, что

Ваш макет-сервер отвечает ожидаемыми данными, а не ошибкой.
Вы используете асинхронный селектор в библиотеке тестирования, по крайней мере, для первой ячейки строки.

expect(await findByText('Price')).toBeInTheDocument();