fixed All warnings with Act function in testing library (#2910)

* fixed All warnings whit Act function in testing library

* added act functions as described in the testing library documentation

* removed 'return' from renderComponents

Co-authored-by: davitbejanyan <dbejanyan@provectus.com>

kafka-ui-react-app/src/components/Schemas/New/__test__/New.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import New from 'components/Schemas/New/New';
 import { render, WithRoute } from 'lib/testHelpers';
 import { clusterSchemaNewPath } from 'lib/paths';
-import { act, screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 const clusterName = 'local';
@@ -10,15 +10,17 @@ const subjectValue = 'subject';
 const schemaValue = 'schema';
 
 describe('New Component', () => {
-  beforeEach(async () => {
-    await render(
-      <WithRoute path={clusterSchemaNewPath()}>
-        <New />
-      </WithRoute>,
-      {
-        initialEntries: [clusterSchemaNewPath(clusterName)],
-      }
-    );
+  beforeEach(() => {
+    waitFor(() => {
+      render(
+        <WithRoute path={clusterSchemaNewPath()}>
+          <New />
+        </WithRoute>,
+        {
+          initialEntries: [clusterSchemaNewPath(clusterName)],
+        }
+      );
+    });
   });
 
   it('renders component', () => {
@@ -33,15 +35,9 @@ describe('New Component', () => {
     const schema = screen.getAllByRole('textbox')[1];
     const schemaTypeSelect = screen.getByRole('listbox');
 
-    await act(async () => {
-      await userEvent.type(subject, subjectValue);
-    });
-    await act(async () => {
-      await userEvent.type(schema, schemaValue);
-    });
-    await act(async () => {
-      await userEvent.selectOptions(schemaTypeSelect, ['AVRO']);
-    });
+    await userEvent.type(subject, subjectValue);
+    await userEvent.type(schema, schemaValue);
+    await userEvent.selectOptions(schemaTypeSelect, ['AVRO']);
 
     const submitBtn = screen.getByRole('button', { name: /Submit/i });
     expect(submitBtn).toBeEnabled();

kafka-ui-react-app/src/components/Topics/List/__tests__/ListPage.spec.tsx

@@ -11,8 +11,8 @@ const clusterName = 'test-cluster';
 jest.mock('components/Topics/List/TopicTable', () => () => <>TopicTableMock</>);
 
 describe('ListPage Component', () => {
-  const renderComponent = () => {
-    return render(
+  const renderComponent = () =>
+    render(
       <ClusterContext.Provider
         value={{
           isReadOnly: false,
@@ -27,7 +27,6 @@ describe('ListPage Component', () => {
       </ClusterContext.Provider>,
       { initialEntries: [clusterTopicsPath(clusterName)] }
     );
-  };
 
   beforeEach(() => {
     renderComponent();

kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, WithRoute } from 'lib/testHelpers';
-import { act, screen, waitFor, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import { CleanUpPolicy, TopicsResponse } from 'generated-sources';
 import { externalTopicPayload, topicsPayload } from 'lib/fixtures/topics';
 import ClusterContext from 'components/contexts/ClusterContext';
@@ -156,7 +156,7 @@ describe('TopicTable Components', () => {
           });
           it('handels delete button click', async () => {
             const button = getButtonByName('Delete selected topics');
-            await act(() => userEvent.click(button));
+            await userEvent.click(button);
             expect(
               screen.getByText(
                 'Are you sure you want to remove selected topics?'
@@ -165,14 +165,14 @@ describe('TopicTable Components', () => {
             const confirmBtn = getButtonByName('Confirm');
             expect(confirmBtn).toBeInTheDocument();
             expect(deleteTopicMock).not.toHaveBeenCalled();
-            await act(() => userEvent.click(confirmBtn));
+            await userEvent.click(confirmBtn);
             expect(deleteTopicMock).toHaveBeenCalledTimes(2);
             expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
             expect(screen.getAllByRole('checkbox')[2]).not.toBeChecked();
           });
           it('handels purge messages button click', async () => {
             const button = getButtonByName('Purge messages of selected topics');
-            await act(() => userEvent.click(button));
+            await userEvent.click(button);
             expect(
               screen.getByText(
                 'Are you sure you want to purge messages of selected topics?'
@@ -181,7 +181,7 @@ describe('TopicTable Components', () => {
             const confirmBtn = getButtonByName('Confirm');
             expect(confirmBtn).toBeInTheDocument();
             expect(mockUnwrap).not.toHaveBeenCalled();
-            await act(() => userEvent.click(confirmBtn));
+            await userEvent.click(confirmBtn);
             expect(mockUnwrap).toHaveBeenCalledTimes(2);
             expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
             expect(screen.getAllByRole('checkbox')[2]).not.toBeChecked();
@@ -205,7 +205,7 @@ describe('TopicTable Components', () => {
         expect(btns[1]).toBeDisabled();
       });
       it('renders action buttons', async () => {
-        renderComponent({ topics: topicsPayload, pageCount: 1 });
+        await renderComponent({ topics: topicsPayload, pageCount: 1 });
         expect(
           screen.getAllByRole('button', { name: 'Dropdown Toggle' }).length
         ).toEqual(2);
@@ -274,8 +274,8 @@ describe('TopicTable Components', () => {
           expect(
             screen.getByText('Are you sure want to clear topic messages?')
           ).toBeInTheDocument();
-          await act(() =>
-            userEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+          await userEvent.click(
+            screen.getByRole('button', { name: 'Confirm' })
           );
           expect(mockUnwrap).toHaveBeenCalled();
         });
@@ -301,10 +301,10 @@ describe('TopicTable Components', () => {
           await expectDropdownExists();
           await userEvent.click(screen.getByText('Remove Topic'));
           expect(screen.getByText('Confirm the action')).toBeInTheDocument();
-          await waitFor(() =>
-            userEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+          await userEvent.click(
+            screen.getByRole('button', { name: 'Confirm' })
           );
-          await waitFor(() => expect(deleteTopicMock).toHaveBeenCalled());
+          expect(deleteTopicMock).toHaveBeenCalled();
         });
       });
       describe('and recreate topic action', () => {
@@ -313,10 +313,10 @@ describe('TopicTable Components', () => {
           await expectDropdownExists();
           await userEvent.click(screen.getByText('Recreate Topic'));
           expect(screen.getByText('Confirm the action')).toBeInTheDocument();
-          await waitFor(() =>
-            userEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+          await userEvent.click(
+            screen.getByRole('button', { name: 'Confirm' })
           );
-          await waitFor(() => expect(recreateTopicMock).toHaveBeenCalled());
+          expect(recreateTopicMock).toHaveBeenCalled();
         });
       });
     });

kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx

@@ -24,7 +24,7 @@ jest.mock('lib/hooks/api/topics', () => ({
   useCreateTopic: jest.fn(),
 }));
 
-const renderComponent = (path: string) => {
+const renderComponent = (path: string) =>
   render(
     <Routes>
       <Route path={clusterTopicNewPath()} element={<New />} />
@@ -33,7 +33,7 @@ const renderComponent = (path: string) => {
     </Routes>,
     { initialEntries: [path] }
   );
-};
+
 const createTopicMock = jest.fn();
 
 describe('New', () => {
@@ -47,28 +47,21 @@ describe('New', () => {
   });
 
   it('checks header for create new', async () => {
-    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
+    await act(() => {
+      renderComponent(clusterTopicNewPath(clusterName));
+    });
     expect(screen.getByRole('heading', { name: 'Create' })).toBeInTheDocument();
   });
 
-  it('checks header for copy', async () => {
-    await act(() =>
-      renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`)
-    );
+  it('checks header for copy', () => {
+    renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`);
     expect(screen.getByRole('heading', { name: 'Copy' })).toBeInTheDocument();
   });
 
   it('validates form', async () => {
-    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
-    await waitFor(async () => {
-      await userEvent.type(
-        screen.getByPlaceholderText('Topic Name'),
-        topicName
-      );
-    });
-    await waitFor(async () => {
-      await userEvent.clear(screen.getByPlaceholderText('Topic Name'));
-    });
+    renderComponent(clusterTopicNewPath(clusterName));
+    await userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
+    await userEvent.clear(screen.getByPlaceholderText('Topic Name'));
     await waitFor(() => {
       expect(screen.getByText('name is a required field')).toBeInTheDocument();
     });
@@ -77,31 +70,21 @@ describe('New', () => {
   });
 
   it('validates form invalid name', async () => {
-    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
-    await waitFor(() => {
-      userEvent.type(screen.getByPlaceholderText('Topic Name'), 'Invalid,Name');
-    });
-    await waitFor(() => {
-      expect(
-        screen.getByText('Only alphanumeric, _, -, and . allowed')
-      ).toBeInTheDocument();
-    });
+    renderComponent(clusterTopicNewPath(clusterName));
+    await userEvent.type(
+      screen.getByPlaceholderText('Topic Name'),
+      'Invalid,Name'
+    );
+    expect(
+      screen.getByText('Only alphanumeric, _, -, and . allowed')
+    ).toBeInTheDocument();
   });
 
   it('submits valid form', async () => {
-    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
-    await act(async () => {
-      await userEvent.type(
-        screen.getByPlaceholderText('Topic Name'),
-        topicName
-      );
-    });
-    await act(async () => {
-      await userEvent.click(screen.getByText('Create topic'));
-    });
-    await waitFor(() => expect(createTopicMock).toHaveBeenCalledTimes(1));
-    await waitFor(() =>
-      expect(mockNavigate).toHaveBeenLastCalledWith(`../${topicName}`)
-    );
+    renderComponent(clusterTopicNewPath(clusterName));
+    await userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
+    await userEvent.click(screen.getByText('Create topic'));
+    expect(createTopicMock).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenLastCalledWith(`../${topicName}`);
   });
 });

kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/__test__/DangerZone.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import DangerZone, {
   DangerZoneProps,
 } from 'components/Topics/Topic/Edit/DangerZone/DangerZone';
-import { act, screen, waitFor, within } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render, WithRoute } from 'lib/testHelpers';
 import {
@@ -52,7 +52,7 @@ const checkDialogThenPressCancel = async () => {
 };
 
 describe('DangerZone', () => {
-  it('renders the component', async () => {
+  it('renders the component', () => {
     renderComponent();
 
     const numberOfPartitionsEditForm = screen.getByRole('form', {
@@ -98,8 +98,8 @@ describe('DangerZone', () => {
     await userEvent.click(
       within(numberOfPartitionsEditForm).getByRole('button')
     );
-    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
-    await waitFor(() => clickOnDialogSubmitButton());
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    await clickOnDialogSubmitButton();
     expect(mockIncreaseTopicPartitionsCount).toHaveBeenCalledTimes(1);
   });
 
@@ -129,12 +129,10 @@ describe('DangerZone', () => {
       within(replicationFactorEditForm).getByRole('button')
     );
 
-    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
-    await waitFor(() => clickOnDialogSubmitButton());
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    await clickOnDialogSubmitButton();
 
-    await waitFor(() => {
-      expect(mockUpdateTopicReplicationFactor).toHaveBeenCalledTimes(1);
-    });
+    expect(mockUpdateTopicReplicationFactor).toHaveBeenCalledTimes(1);
   });
 
   it('should view the validation error when partition value is lower than the default passed or empty', async () => {
@@ -143,22 +141,20 @@ describe('DangerZone', () => {
     const partitionInputSubmitBtn = screen.getAllByText(/submit/i)[0];
     const value = (defaultPartitions - 4).toString();
     expect(partitionInputSubmitBtn).toBeDisabled();
-    await act(async () => {
-      await userEvent.clear(partitionInput);
-      await userEvent.type(partitionInput, value);
-    });
+
+    await userEvent.clear(partitionInput);
+    await userEvent.type(partitionInput, value);
+
     expect(partitionInput).toHaveValue(+value);
     expect(partitionInputSubmitBtn).toBeEnabled();
-    await act(async () => {
-      await userEvent.click(partitionInputSubmitBtn);
-    });
+
+    await userEvent.click(partitionInputSubmitBtn);
+
     expect(
       screen.getByText(/You can only increase the number of partitions!/i)
     ).toBeInTheDocument();
     await userEvent.clear(partitionInput);
-    await waitFor(() =>
-      expect(screen.getByText(/are required/i)).toBeInTheDocument()
-    );
+    expect(screen.getByText(/are required/i)).toBeInTheDocument();
   });
 
   it('should view the validation error when Replication Facto value is lower than the default passed or empty', async () => {
@@ -167,17 +163,13 @@ describe('DangerZone', () => {
       screen.getByPlaceholderText('Replication Factor');
     const replicatorFactorInputSubmitBtn = screen.getAllByText(/submit/i)[1];
 
-    await waitFor(() => userEvent.clear(replicatorFactorInput));
+    await userEvent.clear(replicatorFactorInput);
 
     expect(replicatorFactorInputSubmitBtn).toBeEnabled();
     await userEvent.click(replicatorFactorInputSubmitBtn);
-    await waitFor(() =>
-      expect(screen.getByText(/are required/i)).toBeInTheDocument()
-    );
+    expect(screen.getByText(/are required/i)).toBeInTheDocument();
     await userEvent.type(replicatorFactorInput, '1');
-    await waitFor(() =>
-      expect(screen.queryByText(/are required/i)).not.toBeInTheDocument()
-    );
+    expect(screen.queryByText(/are required/i)).not.toBeInTheDocument();
   });
 
   it('should close the partitions dialog if he cancel button is pressed', async () => {
@@ -186,10 +178,8 @@ describe('DangerZone', () => {
     const partitionInput = screen.getByPlaceholderText('Number of partitions');
     const partitionInputSubmitBtn = screen.getAllByText(/submit/i)[0];
 
-    await act(async () => {
-      await userEvent.type(partitionInput, '5');
-      await userEvent.click(partitionInputSubmitBtn);
-    });
+    await userEvent.type(partitionInput, '5');
+    await userEvent.click(partitionInputSubmitBtn);
 
     await checkDialogThenPressCancel();
   });
@@ -200,10 +190,8 @@ describe('DangerZone', () => {
       screen.getByPlaceholderText('Replication Factor');
     const replicatorFactorInputSubmitBtn = screen.getAllByText(/submit/i)[1];
 
-    await act(async () => {
-      await userEvent.type(replicatorFactorInput, '5');
-      await userEvent.click(replicatorFactorInputSubmitBtn);
-    });
+    await userEvent.type(replicatorFactorInput, '5');
+    await userEvent.click(replicatorFactorInputSubmitBtn);
 
     await checkDialogThenPressCancel();
   });

kafka-ui-react-app/src/components/Topics/Topic/Edit/__test__/Edit.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Edit from 'components/Topics/Topic/Edit/Edit';
-import { act, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { render, WithRoute } from 'lib/testHelpers';
 import userEvent from '@testing-library/user-event';
 import { clusterTopicEditPath } from 'lib/paths';
@@ -39,7 +39,7 @@ const updateTopicMock = jest.fn();
 
 const renderComponent = () => {
   const path = clusterTopicEditPath(clusterName, topicName);
-  render(
+  return render(
     <WithRoute path={clusterTopicEditPath()}>
       <Edit />
     </WithRoute>,
@@ -48,7 +48,7 @@ const renderComponent = () => {
 };
 
 describe('Edit Component', () => {
-  beforeEach(async () => {
+  beforeEach(() => {
     (useTopicDetails as jest.Mock).mockImplementation(() => ({
       data: internalTopicPayload,
     }));
@@ -59,21 +59,21 @@ describe('Edit Component', () => {
       isLoading: false,
       mutateAsync: updateTopicMock,
     }));
-    await act(() => renderComponent());
+    renderComponent();
   });
 
-  it('renders DangerZone component', async () => {
+  it('renders DangerZone component', () => {
     expect(screen.getByText(`DangerZone`)).toBeInTheDocument();
   });
 
   it('submits form correctly', async () => {
-    await act(() => renderComponent());
+    renderComponent();
     const btn = screen.getAllByText(/Update topic/i)[0];
     const field = screen.getByRole('spinbutton', {
       name: 'Min In Sync Replicas * Min In Sync Replicas *',
     });
-    await act(() => userEvent.type(field, '1'));
-    await act(() => userEvent.click(btn));
+    await userEvent.type(field, '1');
+    await userEvent.click(btn);
     expect(updateTopicMock).toHaveBeenCalledTimes(1);
     expect(mockNavigate).toHaveBeenCalledWith('../');
   });

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx

@@ -15,30 +15,28 @@ describe('AddEditFilterContainer component', () => {
     code: 'mockCode',
   };
 
-  const renderComponent = async (
+  const renderComponent = (
     props: Partial<AddEditFilterContainerProps> = {}
   ) => {
-    await act(() => {
-      render(
-        <AddEditFilterContainer
-          cancelBtnHandler={jest.fn()}
-          submitBtnText={props.submitBtnText || defaultSubmitBtn}
-          {...props}
-        />
-      );
-    });
+    return render(
+      <AddEditFilterContainer
+        cancelBtnHandler={jest.fn()}
+        submitBtnText={props.submitBtnText || defaultSubmitBtn}
+        {...props}
+      />
+    );
   };
 
   describe('default Component Parameters', () => {
-    beforeEach(async () => {
-      await act(() => renderComponent());
-    });
-
-    it('should check the default Button text', () => {
+    it('should check the default Button text', async () => {
+      await act(() => {
+        renderComponent();
+      });
       expect(screen.getByText(defaultSubmitBtn)).toBeInTheDocument();
     });
 
     it('should check whether the submit Button is disabled when the form is pristine and disabled if dirty', async () => {
+      renderComponent();
       const submitButtonElem = screen.getByText(defaultSubmitBtn);
       expect(submitButtonElem).toBeDisabled();
 
@@ -60,6 +58,9 @@ describe('AddEditFilterContainer component', () => {
     });
 
     it('should view the error message after typing and clearing the input', async () => {
+      await act(() => {
+        renderComponent();
+      });
       const inputs = screen.getAllByRole('textbox');
       const user = userEvent.setup();
       const textAreaElement = inputs[0] as HTMLTextAreaElement;
@@ -77,12 +78,10 @@ describe('AddEditFilterContainer component', () => {
   });
 
   describe('Custom setup for the component', () => {
-    it('should render the input with default data if they are passed', async () => {
-      await act(() => {
-        renderComponent({
-          inputDisplayNameDefaultValue: mockData.name,
-          inputCodeDefaultValue: mockData.code,
-        });
+    it('should render the input with default data if they are passed', () => {
+      renderComponent({
+        inputDisplayNameDefaultValue: mockData.name,
+        inputCodeDefaultValue: mockData.code,
       });
       const inputs = screen.getAllByRole('textbox');
       const textAreaElement = inputs[0] as HTMLTextAreaElement;
@@ -93,11 +92,9 @@ describe('AddEditFilterContainer component', () => {
 
     it('should test whether the cancel callback is being called', async () => {
       const cancelCallback = jest.fn();
-      await act(() =>
-        renderComponent({
-          cancelBtnHandler: cancelCallback,
-        })
-      );
+      renderComponent({
+        cancelBtnHandler: cancelCallback,
+      });
       const cancelBtnElement = screen.getByText(/cancel/i);
 
       await userEvent.click(cancelBtnElement);
@@ -106,7 +103,7 @@ describe('AddEditFilterContainer component', () => {
 
     it('should test whether the submit Callback is being called', async () => {
       const submitCallback = jest.fn();
-      await act(() => renderComponent({ submitCallback }));
+      renderComponent({ submitCallback });
 
       const inputs = screen.getAllByRole('textbox');
 
@@ -125,7 +122,7 @@ describe('AddEditFilterContainer component', () => {
     });
 
     it('should display the checkbox if the props is passed and initially check state', async () => {
-      await act(() => renderComponent({ isAdd: true }));
+      renderComponent({ isAdd: true });
       const checkbox = screen.getByRole('checkbox');
       expect(checkbox).toBeInTheDocument();
       expect(checkbox).not.toBeChecked();
@@ -135,11 +132,11 @@ describe('AddEditFilterContainer component', () => {
 
     it('should pass and render the correct button text', async () => {
       const submitBtnText = 'submitBtnTextTest';
-      await act(() =>
+      await act(() => {
         renderComponent({
           submitBtnText,
-        })
-      );
+        });
+      });
       expect(screen.getByText(submitBtnText)).toBeInTheDocument();
     });
   });

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/AddFilter.spec.tsx

@@ -32,21 +32,22 @@ const renderComponent = (props: Partial<FilterModalProps> = {}) =>
 
 describe('AddFilter component', () => {
   describe('', () => {
-    beforeEach(() => {
-      renderComponent();
-    });
-
     it('should test click on Saved Filters redirects to Saved components', async () => {
+      renderComponent();
       await userEvent.click(screen.getByRole('savedFilterText'));
       expect(screen.getByText('Saved Filters')).toBeInTheDocument();
       expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
     });
 
-    it('info button to be in the document', () => {
+    it('info button to be in the document', async () => {
+      await act(() => {
+        renderComponent();
+      });
       expect(screen.getByRole('button', { name: 'info' })).toBeInTheDocument();
     });
 
     it('renders InfoModal', async () => {
+      renderComponent();
       await userEvent.click(screen.getByRole('button', { name: 'info' }));
       expect(screen.getByRole('button', { name: 'Ok' })).toBeInTheDocument();
       expect(
@@ -55,19 +56,18 @@ describe('AddFilter component', () => {
     });
 
     it('should test click on return to custom filter redirects to Saved Filters', async () => {
+      await act(() => {
+        renderComponent();
+      });
       await userEvent.click(screen.getByRole('savedFilterText'));
-
       expect(screen.queryByText('Saved filters')).not.toBeInTheDocument();
       expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
     });
   });
 
   describe('Add new filter', () => {
-    beforeEach(async () => {
-      renderComponent();
-    });
-
     it('adding new filter', async () => {
+      renderComponent();
       const codeValue = 'filter code';
       const nameValue = 'filter name';
       const textBoxes = screen.getAllByRole('textbox');
@@ -79,11 +79,9 @@ describe('AddFilter component', () => {
       expect(addFilterBtn).toBeDisabled();
       expect(screen.getByPlaceholderText('Enter Name')).toBeInTheDocument();
 
-      await act(async () => {
-        codeTextBox.focus();
-        await userEvent.paste(codeValue);
-        await userEvent.type(nameTextBox, nameValue);
-      });
+      codeTextBox.focus();
+      await userEvent.paste(codeValue);
+      await userEvent.type(nameTextBox, nameValue);
 
       expect(addFilterBtn).toBeEnabled();
       expect(codeTextBox.value).toEqual(`${codeValue}\n\n`);
@@ -91,6 +89,7 @@ describe('AddFilter component', () => {
     });
 
     it('should check unSaved filter without name', async () => {
+      renderComponent();
       const codeTextBox = screen.getAllByRole(
         'textbox'
       )[0] as HTMLTextAreaElement;
@@ -98,16 +97,16 @@ describe('AddFilter component', () => {
       const addFilterBtn = screen.getByRole('button', { name: /Add filter/i });
       expect(addFilterBtn).toBeDisabled();
       expect(screen.getByPlaceholderText('Enter Name')).toBeInTheDocument();
-      await act(async () => {
-        codeTextBox.focus();
-        await userEvent.paste(code);
-      });
+      codeTextBox.focus();
+      await userEvent.paste(code);
+      await userEvent.tab();
       expect(addFilterBtn).toBeEnabled();
       expect(codeTextBox).toHaveValue(`${code}\n\n`);
     });
 
     it('calls editFilter when edit button is clicked in saved filters', async () => {
       await act(() => {
+        renderComponent();
         renderComponent({ isSavedFiltersOpen: true });
       });
       await userEvent.click(screen.getByText('Saved Filters'));
@@ -132,14 +131,6 @@ describe('AddFilter component', () => {
     const longCodeValue = 'a long filter code';
     const nameValue = 'filter name';
 
-    beforeEach(async () => {
-      await renderComponent({
-        addFilter: addFilterMock,
-        activeFilterHandler: activeFilterHandlerMock,
-        toggleIsOpen: toggleModelMock,
-      });
-    });
-
     afterEach(() => {
       addFilterMock.mockClear();
       activeFilterHandlerMock.mockClear();
@@ -148,15 +139,18 @@ describe('AddFilter component', () => {
 
     describe('OnSubmit conditions with codeValue and nameValue in fields', () => {
       beforeEach(async () => {
+        renderComponent({
+          addFilter: addFilterMock,
+          activeFilterHandler: activeFilterHandlerMock,
+          toggleIsOpen: toggleModelMock,
+        });
         const textAreaElement = screen.getAllByRole(
           'textbox'
         )[0] as HTMLTextAreaElement;
         const input = screen.getAllByRole('textbox')[1];
-        await act(async () => {
-          textAreaElement.focus();
-          await userEvent.paste(codeValue);
-          await userEvent.type(input, nameValue);
-        });
+        textAreaElement.focus();
+        await userEvent.paste(codeValue);
+        await userEvent.type(input, nameValue);
       });
 
       it('OnSubmit condition with checkbox off functionality', async () => {
@@ -166,19 +160,15 @@ describe('AddFilter component', () => {
         });
         expect(addFilterBtn).toBeEnabled();
 
-        await act(async () => {
-          await userEvent.click(addFilterBtn);
-        });
+        await userEvent.click(addFilterBtn);
 
         expect(activeFilterHandlerMock).toHaveBeenCalled();
         expect(addFilterMock).not.toHaveBeenCalled();
       });
 
       it('OnSubmit condition with checkbox on functionality', async () => {
-        await act(async () => {
-          await userEvent.click(screen.getByRole('checkbox'));
-          await userEvent.click(screen.getAllByRole('button')[2]);
-        });
+        await userEvent.click(screen.getByRole('checkbox'));
+        await userEvent.click(screen.getAllByRole('button')[2]);
 
         expect(activeFilterHandlerMock).not.toHaveBeenCalled();
         expect(addFilterMock).toHaveBeenCalled();
@@ -195,15 +185,10 @@ describe('AddFilter component', () => {
           name: /Add filter/i,
         });
 
-        await act(async () => {
-          await userEvent.clear(nameTextBox);
-        });
-
+        await userEvent.clear(nameTextBox);
         expect(nameTextBox).toHaveValue('');
 
-        await act(async () => {
-          await userEvent.click(addFilterBtn);
-        });
+        await userEvent.click(addFilterBtn);
         expect(activeFilterHandlerMock).toHaveBeenCalledTimes(1);
 
         expect(activeFilterHandlerMock).toHaveBeenCalledWith(
@@ -215,27 +200,25 @@ describe('AddFilter component', () => {
           -1
         );
         // get reset-ed
+        await userEvent.clear(codeTextBox);
+
         expect(codeTextBox).toHaveValue(``);
         expect(toggleModelMock).toHaveBeenCalled();
-        codeTextBox.focus();
-        await act(async () => {
-          await userEvent.paste(codeValue);
-        });
+
+        await userEvent.type(codeTextBox, codeValue);
         expect(codeTextBox).toHaveValue(`${codeValue}\n\n`);
 
-        await act(async () => {
-          await userEvent.click(checkbox);
-        });
+        await userEvent.click(checkbox);
+        await userEvent.tab();
+
         expect(addFilterBtn).toBeDisabled();
 
-        await act(async () => {
-          await userEvent.type(nameTextBox, nameValue);
-        });
-        expect(nameTextBox).toHaveValue(nameValue);
+        await userEvent.paste(nameValue);
+        expect(nameTextBox).toHaveValue(`${nameValue}`);
+        await userEvent.tab();
+
         expect(addFilterBtn).toBeEnabled();
-        await act(async () => {
-          await userEvent.click(addFilterBtn);
-        });
+        await userEvent.click(addFilterBtn);
 
         expect(activeFilterHandlerMock).toHaveBeenCalledTimes(1);
         expect(addFilterMock).toHaveBeenCalledWith({
@@ -247,15 +230,19 @@ describe('AddFilter component', () => {
     });
 
     it('should use sliced code as the filter name if filter name is empty', async () => {
+      await act(() => {
+        renderComponent({
+          addFilter: addFilterMock,
+          activeFilterHandler: activeFilterHandlerMock,
+          toggleIsOpen: toggleModelMock,
+        });
+      });
       const codeTextBox = screen.getAllByRole(
         'textbox'
       )[0] as HTMLTextAreaElement;
       const nameTextBox = screen.getAllByRole('textbox')[1];
       const addFilterBtn = screen.getByRole('button', { name: /Add filter/i });
       act(() => {
-        // await userEvent.clear(nameTextBox);
-        // codeTextBox.focus();
-        // await userEvent.clear(codeTextBox);
         fireEvent.input(nameTextBox, {
           inputType: '',
         });

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/EditFilter.spec.tsx

@@ -3,7 +3,7 @@ import EditFilter, {
   EditFilterProps,
 } from 'components/Topics/Topic/Messages/Filters/EditFilter';
 import { render } from 'lib/testHelpers';
-import { screen, fireEvent, within, act } from '@testing-library/react';
+import { screen, within, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FilterEdit } from 'components/Topics/Topic/Messages/Filters/FilterModal';
 
@@ -32,9 +32,7 @@ describe('EditFilter component', () => {
 
   it('closes editFilter modal', async () => {
     const toggleEditModal = jest.fn();
-    await act(() => {
-      renderComponent({ toggleEditModal });
-    });
+    renderComponent({ toggleEditModal });
     await userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
     expect(toggleEditModal).toHaveBeenCalledTimes(1);
   });
@@ -43,18 +41,15 @@ describe('EditFilter component', () => {
     const toggleEditModal = jest.fn();
     const editSavedFilter = jest.fn();
 
-    await renderComponent({ toggleEditModal, editSavedFilter });
+    renderComponent({ toggleEditModal, editSavedFilter });
 
     const inputs = screen.getAllByRole('textbox');
     const textAreaElement = inputs[0] as HTMLTextAreaElement;
     const inputNameElement = inputs[1];
-    await act(async () => {
-      textAreaElement.focus();
-      await userEvent.paste('edited code');
-      textAreaElement.focus();
-      await userEvent.type(inputNameElement, 'edited name');
-      fireEvent.submit(screen.getByRole('form'));
-    });
+    textAreaElement.focus();
+    await userEvent.paste('edited code');
+    await userEvent.type(inputNameElement, 'edited name');
+    await userEvent.click(screen.getByRole('button', { name: /Save/i }));
     expect(toggleEditModal).toHaveBeenCalledTimes(1);
     expect(editSavedFilter).toHaveBeenCalledTimes(1);
   });

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/FilterModal.spec.tsx

@@ -21,18 +21,18 @@ const renderComponent = (props?: Partial<FilterModalProps>) =>
       {...props}
     />
   );
+
 describe('FilterModal component', () => {
-  beforeEach(async () => {
+  it('renders component with add filter modal', async () => {
     await act(() => {
       renderComponent();
     });
-  });
-  it('renders component with add filter modal', () => {
     expect(
       screen.getByRole('heading', { name: /add filter/i, level: 3 })
     ).toBeInTheDocument();
   });
   it('renders component with edit filter modal', async () => {
+    renderComponent();
     await userEvent.click(screen.getByRole('savedFilterText'));
     await userEvent.click(screen.getByText('Edit'));
     expect(

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx

@@ -5,7 +5,7 @@ import Filters, {
   SeekTypeOptions,
 } from 'components/Topics/Topic/Messages/Filters/Filters';
 import { EventSourceMock, render, WithRoute } from 'lib/testHelpers';
-import { act, screen, within, waitFor } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import TopicMessagesContext, {
   ContextProps,
@@ -39,7 +39,7 @@ const topicName = 'topic-name';
 const renderComponent = (
   props: Partial<FiltersProps> = {},
   ctx: ContextProps = defaultContextValue
-) => {
+) =>
   render(
     <WithRoute path={clusterTopicPath()}>
       <TopicMessagesContext.Provider value={ctx}>
@@ -57,7 +57,6 @@ const renderComponent = (
     </WithRoute>,
     { initialEntries: [clusterTopicPath(clusterName, topicName)] }
   );
-};
 
 beforeEach(async () => {
   (useTopicDetails as jest.Mock).mockImplementation(() => ({
@@ -86,10 +85,8 @@ describe('Filters component', () => {
   describe('Input elements', () => {
     const inputValue = 'Hello World!';
 
-    beforeEach(async () => {
-      await act(() => {
-        renderComponent();
-      });
+    beforeEach(() => {
+      renderComponent();
     });
 
     it('search input', async () => {
@@ -110,19 +107,15 @@ describe('Filters component', () => {
       const seekTypeSelect = screen.getAllByRole('listbox');
       const option = screen.getAllByRole('option');
 
-      await act(async () => {
-        await userEvent.click(seekTypeSelect[0]);
-      });
+      await userEvent.click(seekTypeSelect[0]);
 
-      await act(async () => {
-        await userEvent.selectOptions(seekTypeSelect[0], ['Timestamp']);
-      });
+      await userEvent.selectOptions(seekTypeSelect[0], ['Timestamp']);
 
       expect(option[0]).toHaveTextContent('Timestamp');
       const timestampInput = screen.getByPlaceholderText('Select timestamp');
       expect(timestampInput).toHaveValue('');
 
-      await waitFor(() => userEvent.type(timestampInput, inputValue));
+      await userEvent.type(timestampInput, inputValue);
 
       expect(timestampInput).toHaveValue(inputValue);
       expect(screen.getByText('Submit')).toBeInTheDocument();
@@ -173,13 +166,11 @@ describe('Filters component', () => {
 
   it('renders addFilter modal', async () => {
     renderComponent();
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole('button', {
-          name: /add filters/i,
-        })
-      );
-    });
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /add filters/i,
+      })
+    );
     expect(screen.getByTestId('messageFilterModal')).toBeInTheDocument();
   });
 
@@ -187,13 +178,11 @@ describe('Filters component', () => {
     beforeEach(async () => {
       renderComponent();
 
-      await act(async () => {
-        await userEvent.click(
-          screen.getByRole('button', {
-            name: /add filters/i,
-          })
-        );
-      });
+      await userEvent.click(
+        screen.getByRole('button', {
+          name: 'Add Filters',
+        })
+      );
 
       const filterName = 'filter name';
       const filterCode = 'filter code';
@@ -205,34 +194,34 @@ describe('Filters component', () => {
 
       const textAreaElement = textBoxElements[0] as HTMLTextAreaElement;
       const inputNameElement = textBoxElements[1];
-      await act(async () => {
-        textAreaElement.focus();
-        await userEvent.paste(filterName);
-        await userEvent.type(inputNameElement, filterCode);
-      });
-
-      expect(textAreaElement.value).toEqual(`${filterName}\n\n`);
-      expect(inputNameElement).toHaveValue(filterCode);
-
-      await act(async () => {
-        await userEvent.click(
-          within(messageFilterModal).getByRole('button', {
-            name: /add filter/i,
-          })
-        );
-      });
+
+      textAreaElement.focus();
+      await userEvent.paste(filterCode);
+      await userEvent.type(inputNameElement, filterName);
+
+      expect(textAreaElement).toHaveValue(`${filterCode}\n\n`);
+      expect(inputNameElement).toHaveValue('filter name');
+      expect(
+        screen.getByRole('button', {
+          name: 'Add filter',
+        })
+      ).toBeEnabled();
+      await userEvent.click(
+        screen.getByRole('button', {
+          name: 'Add filter',
+        })
+      );
+      await userEvent.tab();
     });
 
-    it('shows saved smart filter', () => {
+    it('shows saved smart filter', async () => {
       expect(screen.getByTestId('activeSmartFilter')).toBeInTheDocument();
     });
 
     it('delete the active smart Filter', async () => {
       const smartFilterElement = screen.getByTestId('activeSmartFilter');
       const deleteIcon = within(smartFilterElement).getByText('mock-CloseIcon');
-      await act(async () => {
-        await userEvent.click(deleteIcon);
-      });
+      await userEvent.click(deleteIcon);
 
       const anotherSmartFilterElement =
         screen.queryByTestId('activeSmartFilter');

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/__tests__/SavedFilters.spec.tsx

@@ -15,8 +15,8 @@ describe('SavedFilter Component', () => {
     { name: 'One More Filter', code: 'code1' },
   ];
 
-  const setUpComponent = (props: Partial<Props> = {}) => {
-    return render(
+  const setUpComponent = (props: Partial<Props> = {}) =>
+    render(
       <SavedFilters
         filters={props.filters || mockFilters}
         onEdit={props.onEdit || jest.fn()}
@@ -26,7 +26,6 @@ describe('SavedFilter Component', () => {
         deleteFilter={props.deleteFilter || jest.fn()}
       />
     );
-  };
 
   const getSavedFilters = () => screen.getAllByRole('savedFilter');
 

kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx

@@ -40,8 +40,8 @@ describe('Message component', () => {
     props: Partial<Props> = {
       message: mockMessage,
     }
-  ) => {
-    return render(
+  ) =>
+    render(
       <table>
         <tbody>
           <Message
@@ -52,7 +52,6 @@ describe('Message component', () => {
         </tbody>
       </table>
     );
-  };
 
   it('shows the data in the table row', () => {
     renderComponent();

kafka-ui-react-app/src/components/Topics/__tests__/Topics.spec.tsx

@@ -27,14 +27,13 @@ jest.mock('components/Topics/New/New', () => () => (
 describe('Topics Component', () => {
   const clusterName = 'clusterName';
   const topicName = 'topicName';
-  const setUpComponent = (path: string) => {
-    return render(
+  const setUpComponent = (path: string) =>
+    render(
       <WithRoute path={getNonExactPath(clusterTopicsPath())}>
         <Topics />
       </WithRoute>,
       { initialEntries: [path] }
     );
-  };
 
   it('should check if the page is Topics List rendered', () => {
     setUpComponent(clusterTopicsPath(clusterName));