CONSOLE-4991, ODC-6264: Jest 30 followup

frontend/.vscode/settings.json

@@ -5,6 +5,9 @@
   "typescript.preferences.autoImportFileExcludePatterns": [
     "./packages/console-shared/src/index.ts"
   ],
+  "jest.jestCommandLine": "yarn test",
+  "jest.useJest30": true,
+  "jest.runMode": "deferred", // Too many unit tests to run the entire suite automatically
   "[javascript][javascriptreact][typescript][typescriptreact]": {
     "editor.codeActionsOnSave": {
       "source.organizeImports": "never",

frontend/packages/dev-console/src/components/buildconfig/sections/__tests__/EnvironmentVariablesSection.spec.tsx

@@ -1,9 +1,9 @@
 import type { FC, ReactNode } from 'react';
 import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Formik, FormikConfig } from 'formik';
 import { Provider } from 'react-redux';
 import store from '@console/internal/redux';
-import userEvent from '../../__tests__/user-event';
 import EnvironmentVariablesSection, {
   EnvironmentVariablesSectionFormData,
 } from '../EnvironmentVariablesSection';
@@ -132,25 +132,25 @@ describe('EnvironmentVariablesSection', () => {
       </Wrapper>,
     );
 
-    userEvent.click(renderResult.getByText('Add value'));
-    userEvent.click(renderResult.getByText('Add value'));
+    await userEvent.click(renderResult.getByText('Add value'));
+    await userEvent.click(renderResult.getByText('Add value'));
 
     expect(renderResult.queryAllByPlaceholderText('Name')).toHaveLength(3);
     expect(renderResult.queryAllByPlaceholderText('Value')).toHaveLength(3);
 
     const [name1, name2, name3] = renderResult.queryAllByPlaceholderText('Name');
     const [value1, value2, value3] = renderResult.queryAllByPlaceholderText('Value');
 
-    userEvent.type(name1, 'env key 1');
-    userEvent.type(value1, 'env value 1');
-    userEvent.type(name2, 'env key 2');
-    userEvent.type(value2, 'env value 2');
-    userEvent.type(name3, 'env key 3');
-    userEvent.type(value3, 'env value 3');
+    await userEvent.type(name1, 'env key 1');
+    await userEvent.type(value1, 'env value 1');
+    await userEvent.type(name2, 'env key 2');
+    await userEvent.type(value2, 'env value 2');
+    await userEvent.type(name3, 'env key 3');
+    await userEvent.type(value3, 'env value 3');
 
     // Submit
     const submitButton = renderResult.getByRole('button', { name: 'Submit' });
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
     await waitFor(() => {
       expect(onSubmit).toHaveBeenCalledTimes(1);
     });

frontend/packages/dev-console/src/components/buildconfig/sections/__tests__/HooksSection.spec.tsx

@@ -1,9 +1,9 @@
 import type { FC, ReactNode } from 'react';
 import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Formik, FormikConfig } from 'formik';
 import { Provider } from 'react-redux';
 import store from '@console/internal/redux';
-import userEvent from '../../__tests__/user-event';
 import HooksSection, { HooksSectionFormData } from '../HooksSection';
 
 jest.mock('../EditorField', () =>
@@ -88,7 +88,7 @@ describe('HooksSection', () => {
     const [checkbox] = renderResult.getAllByRole('checkbox') as HTMLInputElement[];
     expect(checkbox.checked).toBeFalsy();
 
-    userEvent.click(checkbox);
+    await userEvent.click(checkbox);
 
     await waitFor(() => {
       expect(checkbox.checked).toBeTruthy();
@@ -167,8 +167,8 @@ describe('HooksSection', () => {
     expect(renderResult.queryAllByPlaceholderText('Command')).toHaveLength(2);
     expect(renderResult.queryAllByPlaceholderText('Argument')).toHaveLength(2);
 
-    userEvent.click(renderResult.getByTestId('type'));
-    userEvent.click(renderResult.getByText('Shell script'));
+    await userEvent.click(renderResult.getByTestId('type'));
+    await userEvent.click(renderResult.getByText('Shell script'));
 
     await waitFor(() => {
       expect(renderResult.baseElement.querySelector('textarea')).toBeTruthy();
@@ -201,8 +201,8 @@ describe('HooksSection', () => {
     expect(renderResult.queryAllByPlaceholderText('Command')).toHaveLength(2);
     expect(renderResult.queryAllByPlaceholderText('Argument')).toHaveLength(2);
 
-    userEvent.click(renderResult.getByTestId('type'));
-    userEvent.click(renderResult.getByText('Arguments to default image entry point'));
+    await userEvent.click(renderResult.getByTestId('type'));
+    await userEvent.click(renderResult.getByText('Arguments to default image entry point'));
 
     await waitFor(() => {
       expect(renderResult.baseElement.querySelector('textarea')).toBeFalsy();
@@ -232,7 +232,7 @@ describe('HooksSection', () => {
     );
 
     const [checkbox] = renderResult.getAllByRole('checkbox') as HTMLInputElement[];
-    userEvent.click(checkbox);
+    await userEvent.click(checkbox);
 
     // Wait for subform
     await waitFor(() => {
@@ -246,16 +246,16 @@ describe('HooksSection', () => {
 
     // Fill out subform
     const [command1] = renderResult.getAllByPlaceholderText('Command');
-    userEvent.type(command1, 'echo');
-    userEvent.click(renderResult.getByText('Add argument'));
-    userEvent.click(renderResult.getByText('Add argument'));
+    await userEvent.type(command1, 'echo');
+    await userEvent.click(renderResult.getByText('Add argument'));
+    await userEvent.click(renderResult.getByText('Add argument'));
     const [argument1, argument2] = renderResult.getAllByPlaceholderText('Argument');
-    userEvent.type(argument1, 'hello');
-    userEvent.type(argument2, 'world');
+    await userEvent.type(argument1, 'hello');
+    await userEvent.type(argument2, 'world');
 
     // Submit
     const submitButton = renderResult.getByRole('button', { name: 'Submit' });
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
     await waitFor(() => {
       expect(onSubmit).toHaveBeenCalledTimes(1);
     });

frontend/packages/dev-console/src/components/buildconfig/sections/__tests__/ImagesSection.spec.tsx

@@ -1,12 +1,12 @@
 import type { FC, ReactNode } from 'react';
 import { FormGroup } from '@patternfly/react-core';
 import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Formik, FormikConfig } from 'formik';
 import * as _ from 'lodash';
 import { Provider } from 'react-redux';
 import store from '@console/internal/redux';
 import { DropdownField } from '@console/shared/src';
-import userEvent from '../../__tests__/user-event';
 import { BuildStrategyType } from '../../types';
 import ImagesSection, { ImagesSectionFormData } from '../ImagesSection';
 

frontend/packages/dev-console/src/components/buildconfig/sections/__tests__/NameSection.spec.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Formik, FormikConfig } from 'formik';
-import userEvent from '../../__tests__/user-event';
 import NameSection, { NameSectionFormData } from '../NameSection';
 
 interface WrapperProps extends FormikConfig<NameSectionFormData> {
@@ -98,7 +98,7 @@ describe('NameSection', () => {
     expect(nameInput.value).toEqual('');
     expect(nameInput.disabled).toBeFalsy();
 
-    userEvent.type(nameInput, 'changed name');
+    await userEvent.type(nameInput, 'changed name');
 
     await waitFor(() => {
       expect(screen.getAllByRole('textbox')[0].getAttribute('value')).toEqual('changed name');
@@ -109,7 +109,7 @@ describe('NameSection', () => {
 
     // Submit
     const submitButton = renderResult.getByRole('button', { name: 'Submit' });
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
     await waitFor(() => {
       expect(onSubmit).toHaveBeenCalledTimes(1);
     });

frontend/packages/dev-console/src/components/buildconfig/sections/__tests__/PolicySection.spec.tsx

@@ -1,9 +1,9 @@
 import type { FC, ReactNode } from 'react';
 import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Formik, FormikConfig } from 'formik';
 import { Provider } from 'react-redux';
 import store from '@console/internal/redux';
-import userEvent from '../../__tests__/user-event';
 import { BuildConfigRunPolicy } from '../../types';
 import PolicySection, { PolicySectionFormData } from '../PolicySection';
 
@@ -59,12 +59,12 @@ describe('PolicySectionFormData', () => {
       </Wrapper>,
     );
 
-    userEvent.click(renderResult.getByText('Serial'));
-    userEvent.click(renderResult.getByText('Parallel'));
+    await userEvent.click(renderResult.getByText('Serial'));
+    await userEvent.click(renderResult.getByText('Parallel'));
 
     // Submit
     const submitButton = renderResult.getByRole('button', { name: 'Submit' });
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
     await waitFor(() => {
       expect(onSubmit).toHaveBeenCalledTimes(1);
     });
@@ -88,12 +88,12 @@ describe('PolicySectionFormData', () => {
       </Wrapper>,
     );
 
-    userEvent.click(renderResult.getByText('Serial'));
-    userEvent.click(renderResult.getByText('Serial latest only'));
+    await userEvent.click(renderResult.getByText('Serial'));
+    await userEvent.click(renderResult.getByText('Serial latest only'));
 
     // Submit
     const submitButton = renderResult.getByRole('button', { name: 'Submit' });
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
     await waitFor(() => {
       expect(onSubmit).toHaveBeenCalledTimes(1);
     });

frontend/packages/dev-console/src/components/buildconfig/sections/__tests__/SecretsSection.spec.tsx

@@ -1,9 +1,9 @@
 import type { FC, ReactNode } from 'react';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Formik, FormikConfig } from 'formik';
 import { Provider } from 'react-redux';
 import store from '@console/internal/redux';
-import userEvent from '../../__tests__/user-event';
 import SecretsSection, { SecretsSectionFormData } from '../SecretsSection';
 
 // Skip Firehose fetching and render just the children
@@ -51,7 +51,7 @@ describe('SecretsSection', () => {
     expect(onSubmit).toHaveBeenCalledTimes(0);
   });
 
-  it('should render a secrets and mount point table after selecting add secret', () => {
+  it('should render a secrets and mount point table after selecting add secret', async () => {
     const initialValues: SecretsSectionFormData = {
       formData: {
         secrets: [],
@@ -69,7 +69,7 @@ describe('SecretsSection', () => {
     expect(renderResult.queryByText('Secret')).toBeFalsy();
     expect(renderResult.queryByText('Mount point')).toBeFalsy();
 
-    userEvent.click(renderResult.getByText('Add secret'));
+    await userEvent.click(renderResult.getByText('Add secret'));
 
     // Now expecting that there is a table to select a secret
     renderResult.getByText('Secret');

frontend/packages/dev-console/src/components/buildconfig/sections/__tests__/SourceSection.spec.tsx

@@ -1,12 +1,12 @@
 import type { FC, ReactNode } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Formik, FormikConfig } from 'formik';
 import { Provider } from 'react-redux';
 import * as rbacModule from '@console/dynamic-plugin-sdk/src/app/components/utils/rbac';
 import { GitProvider } from '@console/git-service/src';
 import * as serverlessFxUtils from '@console/git-service/src/utils/serverless-strategy-detector';
 import store from '@console/internal/redux';
-import userEvent from '../../__tests__/user-event';
 import { BuildStrategyType } from '../../types';
 import SourceSection, { SourceSectionFormData } from '../SourceSection';
 
@@ -141,8 +141,8 @@ describe('SourceSection', () => {
     );
 
     // Select git
-    userEvent.click(renderResult.getByText('Please select your source type'));
-    userEvent.click(renderResult.getByText('Git'));
+    await userEvent.click(renderResult.getByText('Please select your source type'));
+    await userEvent.click(renderResult.getByText('Git'));
 
     // Assert subforms
     await waitFor(() => {
@@ -165,10 +165,10 @@ describe('SourceSection', () => {
 
     // Select Dockerfile
     expect(renderResult.queryAllByText('Dockerfile')).toHaveLength(0);
-    userEvent.click(renderResult.getByText('Please select your source type'));
+    await userEvent.click(renderResult.getByText('Please select your source type'));
 
     expect(renderResult.queryAllByText('Dockerfile')).toHaveLength(1);
-    userEvent.click(renderResult.getByText('Dockerfile'));
+    await userEvent.click(renderResult.getByText('Dockerfile'));
 
     // Assert subforms
     await waitFor(() => {
@@ -190,19 +190,19 @@ describe('SourceSection', () => {
     );
 
     // Fill out subform
-    userEvent.click(renderResult.getByText('Please select your source type'));
-    userEvent.click(renderResult.getByText('Git'));
-    userEvent.click(renderResult.getByText('Show advanced Git options'));
+    await userEvent.click(renderResult.getByText('Please select your source type'));
+    await userEvent.click(renderResult.getByText('Git'));
+    await userEvent.click(renderResult.getByText('Show advanced Git options'));
 
-    userEvent.type(
+    await userEvent.type(
       getPatternFlyInputForLabel('Git Repo URL'),
       'https://github.com/openshift/console',
     );
     // TODO doesn't work at the moment?! userEvent.type(getPatternFlyInputForLabel('Git reference'), 'master');
 
     // Submit
     const submitButton = renderResult.getByRole('button', { name: 'Submit' });
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
     await waitFor(() => {
       expect(onSubmit).toHaveBeenCalledTimes(1);
     });
@@ -248,13 +248,13 @@ describe('SourceSection', () => {
     );
 
     // Fill out subform
-    userEvent.click(renderResult.getByText('Please select your source type'));
-    userEvent.click(renderResult.getByText('Dockerfile'));
-    userEvent.type(renderResult.getByRole('textbox'), 'FROM: centos\nRUN echo hello world');
+    await userEvent.click(renderResult.getByText('Please select your source type'));
+    await userEvent.click(renderResult.getByText('Dockerfile'));
+    await userEvent.type(renderResult.getByRole('textbox'), 'FROM: centos\nRUN echo hello world');
 
     // Submit
     const submitButton = renderResult.getByRole('button', { name: 'Submit' });
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
     await waitFor(() => {
       expect(onSubmit).toHaveBeenCalledTimes(1);
     });