From 11d8f0c375c8de8bb6011087ebc455190f61f5ef Mon Sep 17 00:00:00 2001 From: "Eyo O. Eyo" <7893459+eokoneyo@users.noreply.github.com> Date: Fri, 22 Nov 2024 12:13:46 +0100 Subject: [PATCH] [React18] Migrate test suites to account for testing library upgrades kibana-data-discovery,security-threat-hunting-investigations (#201150) This PR migrates test suites that use `renderHook` from the library `@testing-library/react-hooks` to adopt the equivalent and replacement of `renderHook` from the export that is now available from `@testing-library/react`. This work is required for the planned migration to react18. ## Context In this PR, usages of `waitForNextUpdate` that previously could have been destructured from `renderHook` are now been replaced with `waitFor` exported from `@testing-library/react`, furthermore `waitFor` that would also have been destructured from the same renderHook result is now been replaced with `waitFor` from the export of `@testing-library/react`. ***Why is `waitFor` a sufficient enough replacement for `waitForNextUpdate`, and better for testing values subject to async computations?*** WaitFor will retry the provided callback if an error is returned, till the configured timeout elapses. By default the retry interval is `50ms` with a timeout value of `1000ms` that effectively translates to at least 20 retries for assertions placed within waitFor. See https://testing-library.com/docs/dom-testing-library/api-async/#waitfor for more information. This however means that for person's writing tests, said person has to be explicit about expectations that describe the internal state of the hook being tested. This implies checking for instance when a react query hook is being rendered, there's an assertion that said hook isn't loading anymore. In this PR you'd notice that this pattern has been adopted, with most existing assertions following an invocation of `waitForNextUpdate` being placed within a `waitFor` invocation. In some cases the replacement is simply a `waitFor(() => new Promise((resolve) => resolve(null)))` (many thanks to @kapral18, for point out exactly why this works), where this suffices the assertions that follow aren't placed within a waitFor so this PR doesn't get larger than it needs to be. It's also worth pointing out this PR might also contain changes to test and application code to improve said existing test. ### What to do next? 1. Review the changes in this PR. 2. If you think the changes are correct, approve the PR. ## Any questions? If you have any questions or need help with this PR, please leave comments in this PR. --- .../hooks/use_comparison_cell_value.test.tsx | 3 +-- .../compare_documents/hooks/use_comparison_columns.test.tsx | 3 +-- .../compare_documents/hooks/use_comparison_css.test.ts | 2 +- .../compare_documents/hooks/use_comparison_fields.test.ts | 2 +- .../src/hooks/use_data_grid_columns.test.tsx | 2 +- .../src/hooks/use_data_grid_density.test.tsx | 2 +- .../src/hooks/use_full_screen_watcher.test.ts | 4 ++-- .../kbn-unified-data-table/src/hooks/use_row_height.test.tsx | 2 +- .../src/hooks/use_row_heights_options.test.ts | 2 +- .../src/hooks/use_selected_docs.test.ts | 2 +- 10 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.test.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.test.tsx index ff2b7c46616f0..bbbf1ddcbb309 100644 --- a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.test.tsx +++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_cell_value.test.tsx @@ -11,8 +11,7 @@ import { EuiDataGridCellValueElementProps, EuiDataGridSetCellProps } from '@elas import { buildDataTableRecord } from '@kbn/discover-utils'; import { generateEsHits, additionalFieldGroups } from '@kbn/discover-utils/src/__mocks__'; import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks'; -import { render, screen } from '@testing-library/react'; -import { renderHook } from '@testing-library/react-hooks'; +import { render, screen, renderHook } from '@testing-library/react'; import React from 'react'; import { ReactNode, useState } from 'react'; import { dataViewWithTimefieldMock } from '../../../../__mocks__/data_view_with_timefield'; diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx index ccf8368c95270..716db2f052277 100644 --- a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx +++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx @@ -13,9 +13,8 @@ import { FIELD_COLUMN_WIDTH, useComparisonColumns, } from './use_comparison_columns'; -import { renderHook } from '@testing-library/react-hooks'; import type { EuiDataGridColumn, EuiDataGridColumnActions } from '@elastic/eui'; -import { render, screen } from '@testing-library/react'; +import { render, screen, renderHook } from '@testing-library/react'; import React from 'react'; import userEvent from '@testing-library/user-event'; import { generateEsHits } from '@kbn/discover-utils/src/__mocks__'; diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.test.ts b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.test.ts index 36abc40a8d1cf..010edbecd8cfd 100644 --- a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.test.ts +++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_css.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { useComparisonCss } from './use_comparison_css'; describe('useComparisonCss', () => { diff --git a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.test.ts b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.test.ts index 7a73402ad6552..c92b15f6ce6be 100644 --- a/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.test.ts +++ b/packages/kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_fields.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { buildDataTableRecord } from '@kbn/discover-utils'; import { MAX_COMPARISON_FIELDS, diff --git a/packages/kbn-unified-data-table/src/hooks/use_data_grid_columns.test.tsx b/packages/kbn-unified-data-table/src/hooks/use_data_grid_columns.test.tsx index f034cb63287c8..31b1b42b7c6d0 100644 --- a/packages/kbn-unified-data-table/src/hooks/use_data_grid_columns.test.tsx +++ b/packages/kbn-unified-data-table/src/hooks/use_data_grid_columns.test.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { useColumns } from './use_data_grid_columns'; import { dataViewMock } from '@kbn/discover-utils/src/__mocks__'; import { configMock } from '../../__mocks__/config'; diff --git a/packages/kbn-unified-data-table/src/hooks/use_data_grid_density.test.tsx b/packages/kbn-unified-data-table/src/hooks/use_data_grid_density.test.tsx index b0563d0d33ea8..e105581b6d4cb 100644 --- a/packages/kbn-unified-data-table/src/hooks/use_data_grid_density.test.tsx +++ b/packages/kbn-unified-data-table/src/hooks/use_data_grid_density.test.tsx @@ -8,7 +8,7 @@ */ import type { Storage } from '@kbn/kibana-utils-plugin/public'; -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { useDataGridDensity } from './use_data_grid_density'; import { DATA_GRID_STYLE_EXPANDED, DataGridDensity } from '../constants'; diff --git a/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.test.ts b/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.test.ts index 3a7d94283ba0d..3736cdbd03f14 100644 --- a/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.test.ts +++ b/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { act, renderHook } from '@testing-library/react-hooks'; +import { renderHook, act } from '@testing-library/react'; import { EUI_DATA_GRID_FULL_SCREEN_CLASS, UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS, @@ -40,7 +40,7 @@ const nextTick = () => { return act(() => { return new Promise((resolve) => requestAnimationFrame(() => { - resolve(); + resolve(null); }) ); }); diff --git a/packages/kbn-unified-data-table/src/hooks/use_row_height.test.tsx b/packages/kbn-unified-data-table/src/hooks/use_row_height.test.tsx index ac8b6257aa14b..48c4ee4484e64 100644 --- a/packages/kbn-unified-data-table/src/hooks/use_row_height.test.tsx +++ b/packages/kbn-unified-data-table/src/hooks/use_row_height.test.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { createLocalStorageMock } from '../../__mocks__/local_storage_mock'; import { useRowHeight } from './use_row_height'; import { RowHeightMode } from '../components/row_height_settings'; diff --git a/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.test.ts b/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.test.ts index 33a7e98c4b8c4..052dc15c09a89 100644 --- a/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.test.ts +++ b/packages/kbn-unified-data-table/src/hooks/use_row_heights_options.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { useRowHeightsOptions } from './use_row_heights_options'; describe('useRowHeightsOptions', () => { diff --git a/packages/kbn-unified-data-table/src/hooks/use_selected_docs.test.ts b/packages/kbn-unified-data-table/src/hooks/use_selected_docs.test.ts index 3865e412bdcd2..f49c4f7f7b328 100644 --- a/packages/kbn-unified-data-table/src/hooks/use_selected_docs.test.ts +++ b/packages/kbn-unified-data-table/src/hooks/use_selected_docs.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { act, renderHook } from '@testing-library/react-hooks'; +import { renderHook, act } from '@testing-library/react'; import { buildDataTableRecord } from '@kbn/discover-utils'; import { useSelectedDocs } from './use_selected_docs'; import { generateEsHits } from '@kbn/discover-utils/src/__mocks__';