diff --git a/plugins/bitrise/src/components/BitriseBuildDetailsDialog/BitriseBuildDetailsDialog.test.tsx b/plugins/bitrise/src/components/BitriseBuildDetailsDialog/BitriseBuildDetailsDialog.test.tsx index 7992e08f37..e283448b36 100644 --- a/plugins/bitrise/src/components/BitriseBuildDetailsDialog/BitriseBuildDetailsDialog.test.tsx +++ b/plugins/bitrise/src/components/BitriseBuildDetailsDialog/BitriseBuildDetailsDialog.test.tsx @@ -15,9 +15,10 @@ */ import React from 'react'; -import { render } from '@testing-library/react'; +import { act, render } from '@testing-library/react'; import { BitriseBuildDetailsDialog } from './BitriseBuildDetailsDialog'; import { BitriseBuildResult } from '../../api/bitriseApi.model'; +import userEvent from '@testing-library/user-event'; jest.mock('../BitriseArtifactsComponent', () => ({ BitriseArtifactsComponent: (_props: { build: string }) => <>VISIBLE>, @@ -48,7 +49,7 @@ describe('BitriseArtifactsComponent', () => { expect(rendered.queryByText('VISIBLE')).not.toBeInTheDocument(); - btn.click(); + await act(() => userEvent.click(btn)); expect(rendered.getByText('VISIBLE')).toBeInTheDocument(); }); diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.test.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.test.tsx index 36f1217c37..45566528bc 100644 --- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.test.tsx +++ b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.test.tsx @@ -18,7 +18,7 @@ import { configApiRef, errorApiRef } from '@backstage/core-plugin-api'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { TestApiProvider, MockConfigApi } from '@backstage/test-utils'; import { TextField } from '@material-ui/core'; -import { act, render, screen } from '@testing-library/react'; +import { act, render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { AnalyzeResult, catalogImportApiRef } from '../../api'; @@ -101,36 +101,36 @@ describe('', () => { it('renders without exploding', async () => { catalogApi.getEntities.mockReturnValue(Promise.resolve({ items: [] })); - await act(async () => { - render( - { - return ( - <> - - - - - > - ); - }} - />, - { - wrapper: Wrapper, - }, - ); + render( + { + return ( + <> + + + + + > + ); + }} + />, + { + wrapper: Wrapper, + }, + ); - const title = await screen.findByText('My title'); - const description = await screen.findByText('body', { - selector: 'strong', - }); - expect(title).toBeInTheDocument(); - expect(title).toBeVisible(); - expect(description).toBeInTheDocument(); - expect(description).toBeVisible(); + await act(async () => {}); + + const title = await screen.findByText('My title'); + const description = await screen.findByText('body', { + selector: 'strong', }); + expect(title).toBeInTheDocument(); + expect(title).toBeVisible(); + expect(description).toBeInTheDocument(); + expect(description).toBeVisible(); }); it('should submit created PR', async () => { @@ -142,39 +142,38 @@ describe('', () => { }), ); - await act(async () => { - render( - { - return ( - <> - - - - - > - ); - }} - />, - { - wrapper: Wrapper, - }, - ); + render( + { + return ( + <> + + + + + > + ); + }} + />, + { + wrapper: Wrapper, + }, + ); + await act(async () => {}); - await userEvent.type(await screen.findByLabelText('name'), '-changed'); - await userEvent.type(await screen.findByLabelText('owner'), '-changed'); - await userEvent.click(screen.getByRole('button', { name: /Create PR/i })); - }); + await userEvent.type(await screen.findByLabelText('name'), '-changed'); + await userEvent.type(await screen.findByLabelText('owner'), '-changed'); + await userEvent.click(screen.getByRole('button', { name: /Create PR/i })); expect(catalogImportApi.submitPullRequest).toHaveBeenCalledTimes(1); expect(catalogImportApi.submitPullRequest.mock.calls[0]).toMatchObject([ @@ -226,31 +225,30 @@ spec: new Error('some error'), ); - await act(async () => { - render( - { - return ( - <> - - - - - > - ); - }} - />, - { - wrapper: Wrapper, - }, - ); + render( + { + return ( + <> + + + + + > + ); + }} + />, + { + wrapper: Wrapper, + }, + ); + await act(async () => {}); - await userEvent.click( - await screen.findByRole('button', { name: /Create PR/i }), - ); - }); + await userEvent.click( + await screen.findByRole('button', { name: /Create PR/i }), + ); expect(screen.getByText('some error')).toBeInTheDocument(); expect(catalogImportApi.submitPullRequest).toHaveBeenCalledTimes(1); @@ -273,30 +271,27 @@ spec: }), ); - await act(async () => { - render( - , - { - wrapper: Wrapper, - }, - ); + render( + , + { + wrapper: Wrapper, + }, + ); + await act(async () => {}); + + await waitFor(() => { + expect(catalogApi.getEntities).toHaveBeenCalledTimes(1); }); - expect(catalogApi.getEntities).toHaveBeenCalledTimes(1); expect(renderFormFieldsFn).toHaveBeenCalled(); expect(renderFormFieldsFn.mock.calls[0][0]).toMatchObject({ - groups: [], - groupsLoading: true, + groups: ['my-group'], + groupsLoading: false, }); - expect( - renderFormFieldsFn.mock.calls[ - renderFormFieldsFn.mock.calls.length - 1 - ][0], - ).toMatchObject({ groups: ['my-group'], groupsLoading: false }); }); describe('generateEntities', () => { diff --git a/plugins/catalog-import/src/components/useImportState.test.tsx b/plugins/catalog-import/src/components/useImportState.test.tsx index 2345b2d696..dc2cb30f6f 100644 --- a/plugins/catalog-import/src/components/useImportState.test.tsx +++ b/plugins/catalog-import/src/components/useImportState.test.tsx @@ -73,7 +73,6 @@ describe('useImportState', () => { describe('onAnalysis & onPrepare & onReview & onReset', () => { it('should work', async () => { const { result } = renderHook(() => useImportState()); - await cleanup(); expect(result.current).toMatchObject({ activeFlow: 'unknown', @@ -148,7 +147,6 @@ describe('useImportState', () => { it('should work skipped', async () => { const { result } = renderHook(() => useImportState()); - await cleanup(); expect(result.current).toMatchObject({ activeFlow: 'unknown', @@ -198,7 +196,6 @@ describe('useImportState', () => { it('should ignore on invalid state', async () => { const { result } = renderHook(() => useImportState()); - await cleanup(); // state 'analyze' act(() => { @@ -264,7 +261,6 @@ describe('useImportState', () => { describe('onGoBack', () => { it('should work', async () => { const { result } = renderHook(() => useImportState()); - await cleanup(); expect(result.current.activeStepNumber).toBe(0); expect(result.current.onGoBack).toBeUndefined(); @@ -303,7 +299,6 @@ describe('useImportState', () => { it('should work for skipped', async () => { const { result } = renderHook(() => useImportState()); - await cleanup(); expect(result.current.activeStepNumber).toBe(0); expect(result.current.onGoBack).toBeUndefined(); @@ -329,7 +324,6 @@ describe('useImportState', () => { describe('should consider prepareNotRepeatable', () => { it('as true', async () => { const { result } = renderHook(() => useImportState()); - await cleanup(); expect(result.current.onGoBack).toBeUndefined(); @@ -351,7 +345,6 @@ describe('useImportState', () => { it('as false', async () => { const { result } = renderHook(() => useImportState()); - await cleanup(); expect(result.current.onGoBack).toBeUndefined(); diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx index 38edb9b064..32e66dc578 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx @@ -179,9 +179,7 @@ describe('', () => { , ); await waitFor(() => - expect(updateFilters).toHaveBeenLastCalledWith({ - options: undefined, - }), + expect(screen.getByTestId('options-picker-expand')).toBeInTheDocument(), ); fireEvent.click(screen.getByTestId('options-picker-expand')); diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx index 19554f18b7..de40f90c55 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx @@ -74,9 +74,10 @@ describe('', () => { , ); - await waitFor(() => expect(catalogApi.getEntityFacets).toHaveBeenCalled()); - expect(updateFilters).toHaveBeenLastCalledWith({ - lifecycles: new EntityLifecycleFilter(['experimental']), + await waitFor(() => { + expect(updateFilters).toHaveBeenLastCalledWith({ + lifecycles: new EntityLifecycleFilter(['experimental']), + }); }); }); @@ -119,9 +120,10 @@ describe('', () => { , ); - await waitFor(() => expect(catalogApi.getEntityFacets).toHaveBeenCalled()); - expect(updateFilters).toHaveBeenLastCalledWith({ - lifecycles: new EntityLifecycleFilter(['production']), + await waitFor(() => { + expect(updateFilters).toHaveBeenLastCalledWith({ + lifecycles: new EntityLifecycleFilter(['production']), + }); }); fireEvent.click(screen.getByTestId('lifecycles-picker-expand')); expect(screen.getByLabelText('production')).toBeChecked(); @@ -147,9 +149,10 @@ describe('', () => { , ); - await waitFor(() => expect(catalogApi.getEntityFacets).toHaveBeenCalled()); - expect(updateFilters).toHaveBeenLastCalledWith({ - lifecycles: new EntityLifecycleFilter(['experimental']), + await waitFor(() => { + expect(updateFilters).toHaveBeenLastCalledWith({ + lifecycles: new EntityLifecycleFilter(['experimental']), + }); }); rendered.rerender( @@ -210,9 +213,10 @@ describe('', () => { , ); - await waitFor(() => expect(catalogApi.getEntityFacets).toHaveBeenCalled()); - expect(updateFilters).toHaveBeenLastCalledWith({ - lifecycles: new EntityLifecycleFilter(['production']), + await waitFor(() => { + expect(updateFilters).toHaveBeenLastCalledWith({ + lifecycles: new EntityLifecycleFilter(['production']), + }); }); }); }); diff --git a/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.test.tsx b/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.test.tsx index 7dd13620c7..c4b5e64c9d 100644 --- a/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.test.tsx @@ -113,9 +113,7 @@ describe('', () => { , ); await waitFor(() => - expect(updateFilters).toHaveBeenLastCalledWith({ - namespace: undefined, - }), + expect(screen.getByTestId('namespace-picker-expand')).toBeInTheDocument(), ); fireEvent.click(screen.getByTestId('namespace-picker-expand')); diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx index f665ca6c00..85a477801a 100644 --- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx +++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx @@ -49,7 +49,7 @@ const apis = TestApiRegistry.from([catalogApiRef, catalogApi]); describe('', () => { it('renders all owners', async () => { - renderInTestApp( + await renderInTestApp( s1 diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx index bfaa689190..917ece047c 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx @@ -14,7 +14,13 @@ * limitations under the License. */ -import { fireEvent, render, waitFor, screen } from '@testing-library/react'; +import { + fireEvent, + render, + waitFor, + screen, + act, +} from '@testing-library/react'; import React from 'react'; import { MockEntityListContextProvider } from '../../testUtils/providers'; import { EntityTagFilter } from '../../filters'; @@ -127,9 +133,7 @@ describe('', () => { , ); await waitFor(() => - expect(updateFilters).toHaveBeenLastCalledWith({ - tags: undefined, - }), + expect(screen.getByTestId('tags-picker-expand')).toBeInTheDocument(), ); fireEvent.click(screen.getByTestId('tags-picker-expand')); @@ -218,13 +222,16 @@ describe('', () => { , ); await waitFor(() => - expect(updateFilters).toHaveBeenLastCalledWith({ - tags: new EntityTagFilter(['tag1']), - }), + expect(screen.getByTestId('tags-picker-expand')).toBeInTheDocument(), ); - fireEvent.click(screen.getByTestId('tags-picker-expand')); - fireEvent.click(screen.getByLabelText('tag2')); - expect(screen.getByLabelText('tag2')).toBeChecked(); + + await act(async () => { + fireEvent.click(screen.getByTestId('tags-picker-expand')); + }); + await act(async () => { + fireEvent.click(screen.getByLabelText('tag2')); + }); + expect(updateFilters).toHaveBeenLastCalledWith({ tags: new EntityTagFilter(['tag1', 'tag2']), }); diff --git a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx index d9998b0ca5..aebdd6b9c2 100644 --- a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx +++ b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx @@ -19,7 +19,7 @@ import { AsyncEntityProvider, EntityProvider, } from '@backstage/plugin-catalog-react'; -import { render, screen, waitFor } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import React, { useEffect } from 'react'; import { isKind } from './conditions'; import { EntitySwitch } from './EntitySwitch'; @@ -517,9 +517,7 @@ describe('EntitySwitch', () => { , ); - await waitFor(() => expect(shouldRender).toHaveBeenCalled()); - - expect(screen.getByText('C')).toBeInTheDocument(); + await expect(screen.findByText('C')).resolves.toBeInTheDocument(); expect(screen.queryByText('A')).not.toBeInTheDocument(); expect(screen.queryByText('B')).not.toBeInTheDocument(); }); diff --git a/plugins/git-release-manager/src/features/Features.test.tsx b/plugins/git-release-manager/src/features/Features.test.tsx index f3a70c2bda..abde878648 100644 --- a/plugins/git-release-manager/src/features/Features.test.tsx +++ b/plugins/git-release-manager/src/features/Features.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { render, act, waitFor } from '@testing-library/react'; +import { render, waitFor } from '@testing-library/react'; import { Features } from './Features'; import { mockCalverProject } from '../test-helpers/test-helpers'; @@ -49,9 +49,7 @@ describe('Features', () => { />, ); - await act(async () => { - await waitFor(() => getByTestId(TEST_IDS.info.info)); - }); + await waitFor(() => getByTestId(TEST_IDS.info.info)); expect(getByTestId(TEST_IDS.info.info)).toMatchInlineSnapshot(` { "icon": "failure", "message": Something went wrong - + { "icon": "failure", "message": Something went wrong - + ', () => { }); const renderSubject = async (props: any = {}) => { - renderInTestApp( + await renderInTestApp( ', () => { act(() => { fireEvent.click(rendered.getByRole('button')); + }); + act(() => { fireEvent.click(rendered.getByTestId('mock-playlist-edit-dialog')); }); @@ -128,6 +130,8 @@ describe('', () => { act(() => { fireEvent.click(rendered.getByRole('button')); + }); + act(() => { fireEvent.click(rendered.getByTestId('mock-playlist-edit-dialog')); }); diff --git a/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.test.tsx b/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.test.tsx index b9da819baa..eaf00cbde1 100644 --- a/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.test.tsx +++ b/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.test.tsx @@ -78,7 +78,9 @@ describe('', () => { }, }, ); + }); + act(() => { fireEvent.input( getByRole( rendered.getByTestId('edit-dialog-description-input'), @@ -90,17 +92,25 @@ describe('', () => { }, }, ); + }); + act(() => { fireEvent.mouseDown( getByRole(rendered.getByTestId('edit-dialog-owner-select'), 'button'), ); + }); + act(() => { fireEvent.click(rendered.getByText('test-owner')); + }); + act(() => { fireEvent.click( getByRole(rendered.getByTestId('edit-dialog-public-option'), 'radio'), ); + }); + act(() => { fireEvent.click(rendered.getByTestId('edit-dialog-save-button')); }); diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.test.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.test.tsx index 60be071baf..480ac038f2 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.test.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.test.tsx @@ -192,6 +192,8 @@ describe('PlaylistHeader', () => { act(() => { fireEvent.click(rendered.getByTestId('header-action-menu')); + }); + act(() => { fireEvent.click( rendered .getAllByTestId('header-action-item') @@ -224,11 +226,15 @@ describe('PlaylistHeader', () => { act(() => { fireEvent.click(rendered.getByTestId('header-action-menu')); + }); + act(() => { fireEvent.click( rendered .getAllByTestId('header-action-item') .find(e => e.innerHTML.includes('Delete Playlist'))!, ); + }); + act(() => { fireEvent.click(rendered.getByTestId('delete-playlist-dialog-button')); }); diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistPage.test.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistPage.test.tsx index 73bd6980e9..ef9b6d060b 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistPage.test.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistPage.test.tsx @@ -109,8 +109,8 @@ describe('PlaylistPage', () => { act(() => { fireEvent.click(rendered.getByTestId('playlist-page-follow-button')); - testPlaylist.isFollowing = true; }); + testPlaylist.isFollowing = true; await waitFor(() => { expect(playlistApi.followPlaylist).toHaveBeenCalledWith('id1'); @@ -124,8 +124,8 @@ describe('PlaylistPage', () => { act(() => { fireEvent.click(rendered.getByTestId('playlist-page-follow-button')); - testPlaylist.isFollowing = false; }); + testPlaylist.isFollowing = false; await waitFor(() => { expect(playlistApi.unfollowPlaylist).toHaveBeenCalledWith('id1'); diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx index 24126152ed..34243e232d 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx @@ -273,12 +273,12 @@ describe('Stepper', () => { />, ); - await act(async () => { - await fireEvent.click(getByRole('button', { name: 'Review' })); - - expect(getByRole('progressbar')).toBeInTheDocument(); - expect(getByRole('button', { name: 'Review' })).toBeDisabled(); + act(() => { + fireEvent.click(getByRole('button', { name: 'Review' })); }); + + expect(getByRole('progressbar')).toBeInTheDocument(); + expect(getByRole('button', { name: 'Review' })).toBeDisabled(); }); it('should transform default error message', async () => { diff --git a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx index ce6e342809..f3a6a99c42 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx @@ -20,6 +20,7 @@ import { TemplateCategoryPicker } from './TemplateCategoryPicker'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { alertApiRef } from '@backstage/core-plugin-api'; import { fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; jest.mock('@backstage/plugin-catalog-react', () => ({ useEntityTypeFilter: jest.fn(), @@ -91,7 +92,7 @@ describe('TemplateCategoryPicker', () => { ); const openButton = getByRole('button', { name: 'Open' }); - openButton.click(); + await userEvent.click(openButton); expect(getByRole('checkbox', { name: 'Foo' })).toBeInTheDocument(); expect(getByRole('checkbox', { name: 'Bar' })).toBeInTheDocument(); diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.test.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.test.tsx index a402e078a8..af2e4dc886 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.test.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.test.tsx @@ -22,6 +22,8 @@ import { import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils'; import { ApiProvider } from '@backstage/core-app-api'; import { rootRouteRef } from '../../routes'; +import { userEvent } from '@testing-library/user-event'; +import { act } from 'react-dom/test-utils'; const scaffolderApiMock: jest.Mocked = { scaffold: jest.fn(), @@ -261,7 +263,7 @@ describe('TemplatePage', () => { expect(rendered.queryByText('nested prop b')).not.toBeInTheDocument(); expect(rendered.queryByText('number')).not.toBeInTheDocument(); - objectChip.click(); + await act(() => userEvent.click(objectChip)); expect(rendered.queryByText('nested prop a')).toBeInTheDocument(); expect(rendered.queryByText('string')).toBeInTheDocument(); @@ -323,7 +325,7 @@ describe('TemplatePage', () => { expect(rendered.queryByText('nested prop b')).not.toBeInTheDocument(); expect(rendered.queryByText('nested object c')).not.toBeInTheDocument(); - objectChip.click(); + await act(() => userEvent.click(objectChip)); expect(rendered.queryByText('nested object a')).toBeInTheDocument(); expect(rendered.queryByText('nested prop b')).toBeInTheDocument(); @@ -331,7 +333,7 @@ describe('TemplatePage', () => { const allObjectChips = rendered.getAllByText('object'); expect(allObjectChips.length).toBe(2); - allObjectChips[1].click(); + await act(() => userEvent.click(allObjectChips[1])); expect(rendered.queryByText('nested object a')).toBeInTheDocument(); expect(rendered.queryByText('nested prop b')).toBeInTheDocument(); @@ -374,7 +376,7 @@ describe('TemplatePage', () => { expect(rendered.queryByText('No schema defined')).not.toBeInTheDocument(); - objectChip.click(); + await act(() => userEvent.click(objectChip)); expect(rendered.queryByText('No schema defined')).toBeInTheDocument(); }); @@ -471,7 +473,7 @@ describe('TemplatePage', () => { expect(rendered.queryByText('nested object a')).not.toBeInTheDocument(); expect(rendered.queryByText('nested prop b')).not.toBeInTheDocument(); - objectChip.click(); + await act(() => userEvent.click(objectChip)); expect(rendered.queryByText('nested object a')).toBeInTheDocument(); expect(rendered.queryByText('nested prop b')).toBeInTheDocument(); diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx index c2d8d3a2a4..36cdbec088 100644 --- a/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx +++ b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx @@ -16,7 +16,7 @@ import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; -import { screen } from '@testing-library/react'; +import { act, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React, { ReactNode, useEffect } from 'react'; import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react'; @@ -90,10 +90,10 @@ describe('DryRunResultsView', () => { expect(screen.queryByText('Foo Message')).not.toBeInTheDocument(); expect(screen.queryByText('Foo Link')).not.toBeInTheDocument(); - await userEvent.click(screen.getByText('Log')); + await act(() => userEvent.click(screen.getByText('Log'))); expect(screen.getByText('Foo Message')).toBeInTheDocument(); - await userEvent.click(screen.getByText('Output')); + await act(() => userEvent.click(screen.getByText('Output'))); expect(screen.getByText('Foo Link')).toBeInTheDocument(); }); }); diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx index e95f7fa856..3bb1140852 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.Autocomplete.test.tsx @@ -15,7 +15,7 @@ */ import { MockConfigApi, TestApiProvider } from '@backstage/test-utils'; -import { screen, render, waitFor, within } from '@testing-library/react'; +import { screen, render, waitFor, within, act } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; @@ -364,7 +364,7 @@ describe('SearchFilter.Autocomplete', () => { }); // Blur the field and only one tag should be shown with a +1. - input.blur(); + await act(() => userEvent.tab()); expect( screen.queryByRole('button', { name: values[0] }), ).not.toBeInTheDocument(); diff --git a/plugins/splunk-on-call/src/components/Incident/Incidents.test.tsx b/plugins/splunk-on-call/src/components/Incident/Incidents.test.tsx index 665dd3281c..9b8d5feb97 100644 --- a/plugins/splunk-on-call/src/components/Incident/Incidents.test.tsx +++ b/plugins/splunk-on-call/src/components/Incident/Incidents.test.tsx @@ -34,8 +34,12 @@ const apis = TestApiRegistry.from( ); describe('Incidents', () => { + beforeEach(() => { + jest.useFakeTimers(); + }); afterEach(() => { jest.resetAllMocks(); + jest.useRealTimers(); }); it('Renders an empty state when there are no incidents', async () => { @@ -47,13 +51,10 @@ describe('Incidents', () => { , ); - await waitFor(() => !screen.queryByTestId('progress')); - await waitFor( - () => - expect( - screen.getByText('Nice! No incidents found!'), - ).toBeInTheDocument(), - { timeout: 2000 }, + jest.advanceTimersByTime(2000); + await waitFor(() => expect(screen.queryByTestId('progress')).toBe(null)); + await waitFor(() => + expect(screen.getByText('Nice! No incidents found!')).toBeInTheDocument(), ); }); @@ -66,15 +67,14 @@ describe('Incidents', () => { , ); - await waitFor(() => !screen.queryByTestId('progress')); - await waitFor( - () => - expect( - screen.getByText('user', { - exact: false, - }), - ).toBeInTheDocument(), - { timeout: 2000 }, + jest.advanceTimersByTime(2000); + await waitFor(() => expect(screen.queryByTestId('progress')).toBe(null)); + await waitFor(() => + expect( + screen.getByText('user', { + exact: false, + }), + ).toBeInTheDocument(), ); expect(screen.getByText('test-incident')).toBeInTheDocument(); expect(screen.getByTitle('Acknowledged')).toBeInTheDocument(); @@ -93,15 +93,14 @@ describe('Incidents', () => { , ); - await waitFor(() => !screen.queryByTestId('progress')); - await waitFor( - () => - expect( - screen.getByText('user', { - exact: false, - }), - ).toBeInTheDocument(), - { timeout: 2000 }, + jest.advanceTimersByTime(2000); + await waitFor(() => expect(screen.queryByTestId('progress')).toBe(null)); + await waitFor(() => + expect( + screen.getByText('user', { + exact: false, + }), + ).toBeInTheDocument(), ); expect(screen.getByText('test-incident')).toBeInTheDocument(); expect(screen.getByLabelText('Status warning')).toBeInTheDocument(); @@ -127,15 +126,14 @@ describe('Incidents', () => { , ); - await waitFor(() => !screen.queryByTestId('progress')); - await waitFor( - () => - expect( - screen.getByText( - 'Error encountered while fetching information. Error occurred', - ), - ).toBeInTheDocument(), - { timeout: 2000 }, + jest.advanceTimersByTime(2000); + await waitFor(() => expect(screen.queryByTestId('progress')).toBe(null)); + await waitFor(() => + expect( + screen.getByText( + 'Error encountered while fetching information. Error occurred', + ), + ).toBeInTheDocument(), ); }); }); diff --git a/plugins/techdocs-addons-test-utils/src/test-utils.tsx b/plugins/techdocs-addons-test-utils/src/test-utils.tsx index 1a921437b1..865e8c0d3b 100644 --- a/plugins/techdocs-addons-test-utils/src/test-utils.tsx +++ b/plugins/techdocs-addons-test-utils/src/test-utils.tsx @@ -19,7 +19,6 @@ import React, { ReactElement } from 'react'; // Shadow DOM support for the simple and complete DOM testing utilities // https://github.com/testing-library/dom-testing-library/issues/742#issuecomment-674987855 import { screen } from 'testing-library__dom'; -import { renderToStaticMarkup } from 'react-dom/server'; import { Route } from 'react-router-dom'; import { act, render } from '@testing-library/react'; @@ -39,6 +38,13 @@ import { catalogPlugin } from '@backstage/plugin-catalog'; import { searchApiRef } from '@backstage/plugin-search-react'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; +// Since React 18 react-dom/server eagerly uses TextEncoder, so lazy load and make it available globally first +if (!global.TextEncoder) { + global.TextEncoder = require('util').TextEncoder; +} +const { renderToStaticMarkup } = + require('react-dom/server') as typeof import('react-dom/server'); + const techdocsApi = { getTechDocsMetadata: jest.fn(), getEntityMetadata: jest.fn(), diff --git a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx index afdac63a99..85253f54ef 100644 --- a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx @@ -20,6 +20,8 @@ import { TechDocsBuildLogs, TechDocsBuildLogsDrawerContent, } from './TechDocsBuildLogs'; +import { userEvent } from '@testing-library/user-event'; +import { act } from 'react-dom/test-utils'; // The inside needs mocking to render in jsdom jest.mock('react-virtualized-auto-sizer', () => ({ @@ -38,7 +40,7 @@ describe('', () => { it('should open drawer', async () => { const rendered = await renderInTestApp(); - rendered.getByText(/Show Build Logs/i).click(); + await act(() => userEvent.click(rendered.getByText(/Show Build Logs/i))); expect(rendered.getByText(/Build Details/i)).toBeInTheDocument(); }); }); diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx index e11b7b6e81..f732afd31d 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import React from 'react'; -import { act } from '@testing-library/react'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; @@ -150,31 +149,25 @@ describe('', () => { }); it('should render a techdocs reader page with children', async () => { - await act(async () => { - const rendered = await renderInTestApp( - - - techdocs reader page - - , - { - mountedRoutes, - }, - ); - expect( - rendered.container.querySelector('header'), - ).not.toBeInTheDocument(); - expect( - rendered.container.querySelector('article'), - ).not.toBeInTheDocument(); - expect(rendered.getByText('techdocs reader page')).toBeInTheDocument(); - }); + const rendered = await renderInTestApp( + + + techdocs reader page + + , + { + mountedRoutes, + }, + ); + expect(rendered.container.querySelector('header')).not.toBeInTheDocument(); + expect(rendered.container.querySelector('article')).not.toBeInTheDocument(); + expect(rendered.getByText('techdocs reader page')).toBeInTheDocument(); }); it('should render techdocs reader page with addons', async () => { @@ -183,56 +176,52 @@ describe('', () => { const namespace = 'test-namespace'; const kind = 'test'; - await act(async () => { - const rendered = await renderInTestApp( - - - } - > - - - - - - , - { - mountedRoutes, - routeEntries: ['/docs/test-namespace/test/test-name'], - }, - ); + const rendered = await renderInTestApp( + + + } + > + + + + + + , + { + mountedRoutes, + routeEntries: ['/docs/test-namespace/test/test-name'], + }, + ); - expect( - rendered.getByText(`PageMock: ${namespace}#${kind}#${name}`), - ).toBeInTheDocument(); - }); + expect( + rendered.getByText(`PageMock: ${namespace}#${kind}#${name}`), + ).toBeInTheDocument(); }); it('should render techdocs reader page with addons and page', async () => { (Page as jest.Mock).mockImplementation(PageMock); - await act(async () => { - const rendered = await renderInTestApp( - - - } - > - the page - - - - - - , - { - mountedRoutes, - routeEntries: ['/docs/test-namespace/test/test-name'], - }, - ); + const rendered = await renderInTestApp( + + + } + > + the page + + + + + + , + { + mountedRoutes, + routeEntries: ['/docs/test-namespace/test/test-name'], + }, + ); - expect(rendered.getByText('the page')).toBeInTheDocument(); - }); + expect(rendered.getByText('the page')).toBeInTheDocument(); }); }); diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx index 3e5a4c73c3..32fbe21714 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import React from 'react'; -import { act, waitFor } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import { CompoundEntityRef } from '@backstage/catalog-model'; import { @@ -90,18 +90,16 @@ describe('', () => { useTechDocsReaderDom.mockReturnValue(document.createElement('html')); useReaderState.mockReturnValue({ state: 'cached' }); - await act(async () => { - const rendered = await renderInTestApp( - - - , - ); + const rendered = await renderInTestApp( + + + , + ); - await waitFor(() => { - expect( - rendered.getByTestId('techdocs-native-shadowroot'), - ).toBeInTheDocument(); - }); + await waitFor(() => { + expect( + rendered.getByTestId('techdocs-native-shadowroot'), + ).toBeInTheDocument(); }); }); @@ -110,21 +108,19 @@ describe('', () => { useTechDocsReaderDom.mockReturnValue(document.createElement('html')); useReaderState.mockReturnValue({ state: 'cached' }); - await act(async () => { - const rendered = await renderInTestApp( - - - , - ); + const rendered = await renderInTestApp( + + + , + ); - await waitFor(() => { - expect( - rendered.queryByTestId('techdocs-native-shadowroot'), - ).not.toBeInTheDocument(); - expect( - rendered.getByText('ERROR 404: PAGE NOT FOUND'), - ).toBeInTheDocument(); - }); + await waitFor(() => { + expect( + rendered.queryByTestId('techdocs-native-shadowroot'), + ).not.toBeInTheDocument(); + expect( + rendered.getByText('ERROR 404: PAGE NOT FOUND'), + ).toBeInTheDocument(); }); }); @@ -134,21 +130,19 @@ describe('', () => { useTechDocsReaderDom.mockReturnValue(undefined); useReaderState.mockReturnValue({ state: 'CONTENT_NOT_FOUND' }); - await act(async () => { - const rendered = await renderInTestApp( - - - , - ); + const rendered = await renderInTestApp( + + + , + ); - await waitFor(() => { - expect( - rendered.queryByTestId('techdocs-native-shadowroot'), - ).not.toBeInTheDocument(); - expect( - rendered.getByText('ERROR 404: Documentation not found'), - ).toBeInTheDocument(); - }); + await waitFor(() => { + expect( + rendered.queryByTestId('techdocs-native-shadowroot'), + ).not.toBeInTheDocument(); + expect( + rendered.getByText('ERROR 404: Documentation not found'), + ).toBeInTheDocument(); }); }); }); diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx index a3e03b7cf0..d2956ce919 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.test.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ import React from 'react'; -import { act, waitFor } from '@testing-library/react'; import { CompoundEntityRef } from '@backstage/catalog-model'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; @@ -80,112 +79,77 @@ describe('', () => { getEntityMetadata.mockResolvedValue(mockEntityMetadata); getTechDocsMetadata.mockResolvedValue(mockTechDocsMetadata); - await act(async () => { - const rendered = await renderInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name/*': entityRouteRef, - '/docs': rootRouteRef, - }, + const rendered = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + '/docs': rootRouteRef, }, - ); + }, + ); - expect(rendered.container.innerHTML).toContain('header'); + expect(rendered.container.innerHTML).toContain('header'); - await waitFor(() => { - expect(rendered.getAllByText('test-site-name')).toHaveLength(2); - }); + expect(rendered.getAllByText('test-site-name')).toHaveLength(2); + expect(rendered.getByText('test-site-desc')).toBeDefined(); - expect(rendered.getByText('test-site-desc')).toBeDefined(); - }); + expect( + rendered.getByRole('link', { name: 'test:test-namespace/test-name' }), + ).toHaveAttribute('href', '/catalog/test-namespace/test/test-name'); }); it('should render a techdocs page header even if metadata is not loaded', async () => { - await act(async () => { - const rendered = await renderInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name/*': entityRouteRef, - '/docs': rootRouteRef, - }, + const rendered = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + '/docs': rootRouteRef, }, - ); + }, + ); - expect(rendered.container.innerHTML).toContain('header'); - }); + expect(rendered.container.innerHTML).toContain('header'); }); it('should not render a techdocs page header if entity metadata is missing', async () => { getEntityMetadata.mockResolvedValue(undefined); - await act(async () => { - const rendered = await renderInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name/*': entityRouteRef, - '/docs': rootRouteRef, - }, + const rendered = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + '/docs': rootRouteRef, }, - ); + }, + ); - await waitFor(() => { - expect(rendered.container.innerHTML).not.toContain('header'); - }); - }); + expect(rendered.container.innerHTML).not.toContain('header'); }); it('should not render a techdocs page header if techdocs metadata is missing', async () => { getTechDocsMetadata.mockResolvedValue(undefined); - await act(async () => { - const rendered = await renderInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name/*': entityRouteRef, - '/docs': rootRouteRef, - }, + const rendered = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + '/docs': rootRouteRef, }, - ); + }, + ); - await waitFor(() => { - expect(rendered.container.innerHTML).not.toContain('header'); - }); - }); - }); - - it('should render a link back to the component page', async () => { - getTechDocsMetadata.mockResolvedValue(mockTechDocsMetadata); - - await act(async () => { - const rendered = await renderInTestApp( - - - , - { - mountedRoutes: { - '/catalog/:namespace/:kind/:name/*': entityRouteRef, - '/docs': rootRouteRef, - }, - }, - ); - - await waitFor(() => { - expect( - rendered.getByRole('link', { name: 'test:test-namespace/test-name' }), - ).toHaveAttribute('href', '/catalog/test-namespace/test/test-name'); - }); - }); + expect(rendered.container.innerHTML).not.toContain('header'); }); });
the page