Fixed issue/1465 partially got rid of enzyme in tests (#1489)

* got rid of enzyme in Dropdown tests

* got rid of enzyme in DynamicTextButton tests

* got rid of enzyme in Search tests

* Revert "got rid of enzyme in Search tests"

This reverts commit cd2c5b10ab152c86da81ac58418c72ede13713a6.

* got rid of enzyme in Search tests

* got rid of enzyme in SQLEditor tests

* got rid of enzyme in Connect tests

* got rid of enzyme in Connect/Details tests

* got rid of enzyme in Topics\Topic tests

* got rid of ThemeProvider in render function

* fixed redundant

* used userEvent instead of fireEvent

* fixed snapshot tests

* used screen

* rise testing-library approach

* got rid of snapshot in Search component test

* changed titles of Search component test

* fixed topics details test

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

@@ -1,7 +1,10 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
-import { mount } from 'enzyme';
-import { containerRendersView, TestRouterWrapper } from 'lib/testHelpers';
+import {
+  containerRendersView,
+  TestRouterWrapper,
+  render,
+} from 'lib/testHelpers';
 import { clusterConnectConnectorPath } from 'lib/paths';
 import DetailsContainer from 'components/Connect/Details/DetailsContainer';
 import Details, { DetailsProps } from 'components/Connect/Details/Details';
@@ -79,13 +82,13 @@ describe('Details', () => {
     });
 
     it('is empty when no connector', () => {
-      const wrapper = mount(setupWrapper({ connector: null }));
-      expect(wrapper.html()).toEqual('');
+      const wrapper = render(setupWrapper({ connector: null })).baseElement;
+      expect(wrapper.querySelector('div')).toBeEmptyDOMElement();
     });
 
     it('fetches connector on mount', () => {
       const fetchConnector = jest.fn();
-      mount(setupWrapper({ fetchConnector }));
+      render(setupWrapper({ fetchConnector }));
       expect(fetchConnector).toHaveBeenCalledTimes(1);
       expect(fetchConnector).toHaveBeenCalledWith(
         clusterName,
@@ -96,7 +99,7 @@ describe('Details', () => {
 
     it('fetches tasks on mount', () => {
       const fetchTasks = jest.fn();
-      mount(setupWrapper({ fetchTasks }));
+      render(setupWrapper({ fetchTasks }));
       expect(fetchTasks).toHaveBeenCalledTimes(1);
       expect(fetchTasks).toHaveBeenCalledWith(
         clusterName,

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

@@ -1,10 +1,63 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
 import Connect from 'components/Connect/Connect';
+import { store } from 'redux/store';
+import { Route } from 'react-router-dom';
+import {
+  clusterConnectorsPath,
+  clusterConnectorNewPath,
+  clusterConnectConnectorPath,
+  clusterConnectConnectorEditPath,
+} from 'lib/paths';
+
+jest.mock('components/Connect/New/NewContainer', () => () => (
+  <div>NewContainer</div>
+));
+jest.mock('components/Connect/List/ListContainer', () => () => (
+  <div>ListContainer</div>
+));
+jest.mock('components/Connect/Details/DetailsContainer', () => () => (
+  <div>DetailsContainer</div>
+));
+jest.mock('components/Connect/Edit/EditContainer', () => () => (
+  <div>EditContainer</div>
+));
 
 describe('Connect', () => {
-  it('matches snapshot', () => {
-    const wrapper = shallow(<Connect />);
-    expect(wrapper).toMatchSnapshot();
+  const renderComponent = (pathname: string) =>
+    render(
+      <Route path="/ui/clusters/:clusterName">
+        <Connect />
+      </Route>,
+      { pathname, store }
+    );
+
+  it('renders ListContainer', () => {
+    renderComponent(clusterConnectorsPath('my-cluster'));
+    expect(screen.getByText('ListContainer')).toBeInTheDocument();
+  });
+
+  it('renders NewContainer', () => {
+    renderComponent(clusterConnectorNewPath('my-cluster'));
+    expect(screen.getByText('NewContainer')).toBeInTheDocument();
+  });
+
+  it('renders DetailsContainer', () => {
+    renderComponent(
+      clusterConnectConnectorPath('my-cluster', 'my-connect', 'my-connector')
+    );
+    expect(screen.getByText('DetailsContainer')).toBeInTheDocument();
+  });
+
+  it('renders EditContainer', () => {
+    renderComponent(
+      clusterConnectConnectorEditPath(
+        'my-cluster',
+        'my-connect',
+        'my-connector'
+      )
+    );
+    expect(screen.getByText('EditContainer')).toBeInTheDocument();
   });
 });

kafka-ui-react-app/src/components/Connect/__tests__/__snapshots__/Connect.spec.tsx.snap

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Connect matches snapshot 1`] = `
-<div>
-  <Switch>
-    <BreadcrumbRoute
-      component={
-        Object {
-          "$$typeof": Symbol(react.memo),
-          "WrappedComponent": [Function],
-          "compare": null,
-          "type": [Function],
-        }
-      }
-      exact={true}
-      path="/ui/clusters/:clusterName/connectors"
-    />
-    <BreadcrumbRoute
-      component={[Function]}
-      exact={true}
-      path="/ui/clusters/:clusterName/connectors/create-new"
-    />
-    <BreadcrumbRoute
-      component={[Function]}
-      exact={true}
-      path="/ui/clusters/:clusterName/connects/:connectName/connectors/:connectorName/edit"
-    />
-    <BreadcrumbRoute
-      component={[Function]}
-      path="/ui/clusters/:clusterName/connects/:connectName/connectors/:connectorName"
-    />
-  </Switch>
-</div>
-`;

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import fetchMock from 'fetch-mock';
 import { Route } from 'react-router';
-import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from 'lib/testHelpers';
 import { clusterConsumerGroupResetOffsetsPath } from 'lib/paths';
@@ -122,9 +122,10 @@ describe('ResetOffsets', () => {
           }
         );
         await waitFor(() => {
-          fireEvent.change(screen.getAllByLabelText('Partition #0')[1], {
-            target: { value: '10' },
-          });
+          userEvent.click(screen.getAllByLabelText('Partition #0')[1]);
+        });
+        await waitFor(() => {
+          userEvent.keyboard('10');
         });
         userEvent.click(screen.getByText('Submit'));
         await waitFor(() => resetConsumerGroupOffsetsMockCalled());

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

@@ -1,17 +1,11 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { StaticRouter } from 'react-router-dom';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ClusterContext from 'components/contexts/ClusterContext';
 import Details from 'components/Topics/Topic/Details/Details';
 import { internalTopicPayload } from 'redux/reducers/topics/__test__/fixtures';
-import { Provider } from 'react-redux';
-import { store } from 'redux/store';
-import { ThemeProvider } from 'styled-components';
 import { render } from 'lib/testHelpers';
 import { clusterTopicPath } from 'lib/paths';
-import theme from 'theme/theme';
 
 describe('Details', () => {
   const mockDelete = jest.fn();
@@ -45,36 +39,30 @@ describe('Details', () => {
 
   describe('when it has readonly flag', () => {
     it('does not render the Action button a Topic', () => {
-      const component = mount(
-        <ThemeProvider theme={theme}>
-          <Provider store={store}>
-            <StaticRouter>
-              <ClusterContext.Provider
-                value={{
-                  isReadOnly: true,
-                  hasKafkaConnectConfigured: true,
-                  hasSchemaRegistryConfigured: true,
-                  isTopicDeletionAllowed: true,
-                }}
-              >
-                <Details
-                  clusterName={mockClusterName}
-                  topicName={internalTopicPayload.name}
-                  name={internalTopicPayload.name}
-                  isInternal={mockInternalTopicPayload}
-                  deleteTopic={mockDelete}
-                  clearTopicMessages={mockClearTopicMessages}
-                  isDeleted={false}
-                  isDeletePolicy
-                />
-              </ClusterContext.Provider>
-            </StaticRouter>
-          </Provider>
-        </ThemeProvider>
+      const { baseElement } = render(
+        <ClusterContext.Provider
+          value={{
+            isReadOnly: true,
+            hasKafkaConnectConfigured: true,
+            hasSchemaRegistryConfigured: true,
+            isTopicDeletionAllowed: true,
+          }}
+        >
+          <Details
+            clusterName={mockClusterName}
+            topicName={internalTopicPayload.name}
+            name={internalTopicPayload.name}
+            isInternal={mockInternalTopicPayload}
+            deleteTopic={mockDelete}
+            clearTopicMessages={mockClearTopicMessages}
+            isDeleted={false}
+            isDeletePolicy
+          />
+        </ClusterContext.Provider>
       );
 
-      expect(component.exists('button')).toBeFalsy();
-      expect(component).toMatchSnapshot();
+      expect(screen.queryByText('Produce Message')).not.toBeInTheDocument();
+      expect(baseElement).toMatchSnapshot();
     });
   });
 

kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap

@@ -87,584 +87,47 @@ exports[`Details when it has readonly flag does not render the Action button a T
   gap: 26px;
 }
 
-<Component
-  theme={
-    Object {
-      "alert": Object {
-        "color": Object {
-          "error": "#FAD1D1",
-          "info": "#E3E6E8",
-          "success": "#D6F5E0",
-          "warning": "#FFEECC",
-        },
-        "shadow": "rgba(0, 0, 0, 0.1)",
-      },
-      "breadcrumb": "#ABB5BA",
-      "button": Object {
-        "border": Object {
-          "active": "#171A1C",
-          "hover": "#454F54",
-          "normal": "#73848C",
-        },
-        "fontSize": Object {
-          "L": "16px",
-          "M": "14px",
-          "S": "14px",
-        },
-        "height": Object {
-          "L": "40px",
-          "M": "32px",
-          "S": "24px",
-        },
-        "primary": Object {
-          "backgroundColor": Object {
-            "active": "#1414B8",
-            "hover": "#1717CF",
-            "normal": "#4F4FFF",
-          },
-          "color": "#FFFFFF",
-          "invertedColors": Object {
-            "active": "#1414B8",
-            "hover": "#1717CF",
-            "normal": "#4F4FFF",
-          },
-        },
-        "secondary": Object {
-          "backgroundColor": Object {
-            "active": "#D5DADD",
-            "hover": "#E3E6E8",
-            "normal": "#F1F2F3",
-          },
-          "color": "#171A1C",
-          "invertedColors": Object {
-            "active": "#171A1C",
-            "hover": "#454F54",
-            "normal": "#73848C",
-          },
-        },
-      },
-      "circularAlert": Object {
-        "color": Object {
-          "error": "#E51A1A",
-          "info": "#E3E6E8",
-          "success": "#5CD685",
-          "warning": "#FFEECC",
-        },
-      },
-      "configList": Object {
-        "color": "#ABB5BA",
-      },
-      "connectEditWarning": "#FFEECC",
-      "consumerTopicContent": Object {
-        "backgroundColor": "#F1F2F3",
-      },
-      "dangerZone": Object {
-        "borderColor": "#E3E6E8",
-        "color": "#E51A1A",
-      },
-      "dropdown": Object {
-        "color": "#E51A1A",
-      },
-      "heading": Object {
-        "h1": Object {
-          "color": "#171A1C",
-        },
-        "h3": Object {
-          "color": "#73848C",
-          "fontSize": "14px",
-        },
-      },
-      "icons": Object {
-        "closeIcon": "#ABB5BA",
-        "liveIcon": Object {
-          "circleBig": "#FAD1D1",
-          "circleSmall": "#E51A1A",
-        },
-        "messageToggleIconClosed": "#ABB5BA",
-        "messageToggleIconOpened": "#171A1C",
-        "verticalElipsisIcon": "#73848C",
-        "warningIcon": "#FFDD57",
-      },
-      "input": Object {
-        "backgroundColor": Object {
-          "readOnly": "#F1F2F3",
-        },
-        "borderColor": Object {
-          "disabled": "#E3E6E8",
-          "focus": "#454F54",
-          "hover": "#73848C",
-          "normal": "#ABB5BA",
-        },
-        "color": Object {
-          "disabled": "#ABB5BA",
-          "placeholder": Object {
-            "normal": "#ABB5BA",
-            "readOnly": "#ABB5BA",
-          },
-          "readOnly": "#171A1C",
-        },
-        "error": "#E51A1A",
-        "icon": Object {
-          "color": "#454F54",
-        },
-        "label": Object {
-          "color": "#454F54",
-        },
-      },
-      "layout": Object {
-        "minWidth": "1200px",
-        "navBarHeight": "3.25rem",
-        "navBarWidth": "201px",
-        "overlay": Object {
-          "backgroundColor": "#73848C",
-        },
-        "stuffBorderColor": "#E3E6E8",
-        "stuffColor": "#F1F2F3",
-      },
-      "menu": Object {
-        "backgroundColor": Object {
-          "active": "#E3E6E8",
-          "hover": "#F1F2F3",
-          "normal": "#FFFFFF",
-        },
-        "chevronIconColor": "#73848C",
-        "color": Object {
-          "active": "#171A1C",
-          "hover": "#73848C",
-          "normal": "#73848C",
-        },
-        "statusIconColor": Object {
-          "offline": "#E51A1A",
-          "online": "#5CD685",
-        },
-      },
-      "metrics": Object {
-        "backgroundColor": "#F1F2F3",
-        "filters": Object {
-          "color": Object {
-            "icon": "#171A1C",
-            "normal": "#73848C",
-          },
-        },
-        "indicator": Object {
-          "backgroundColor": "#FFFFFF",
-          "lightTextColor": "#ABB5BA",
-          "titleColor": "#73848C",
-          "warningTextColor": "#E51A1A",
-        },
-      },
-      "modal": Object {
-        "backgroundColor": "#FFFFFF",
-        "border": Object {
-          "bottom": "#F1F2F3",
-          "top": "#F1F2F3",
-        },
-        "overlay": "rgba(10, 10, 10, 0.1)",
-        "shadow": "rgba(0, 0, 0, 0.1)",
-      },
-      "pageLoader": Object {
-        "borderBottomColor": "#FFFFFF",
-        "borderColor": "#4F4FFF",
-      },
-      "pagination": Object {
-        "backgroundColor": "#FFFFFF",
-        "borderColor": Object {
-          "active": "#454F54",
-          "disabled": "#C7CED1",
-          "hover": "#73848C",
-          "normal": "#ABB5BA",
-        },
-        "color": Object {
-          "active": "#171A1C",
-          "disabled": "#C7CED1",
-          "hover": "#171A1C",
-          "normal": "#171A1C",
-        },
-        "currentPage": "#E3E6E8",
-      },
-      "panelColor": "#FFFFFF",
-      "primaryTab": Object {
-        "borderColor": Object {
-          "active": "#4F4FFF",
-          "hover": "transparent",
-          "nav": "#E3E6E8",
-          "normal": "transparent",
-        },
-        "color": Object {
-          "active": "#171A1C",
-          "hover": "#171A1C",
-          "normal": "#73848C",
-        },
-      },
-      "schema": Object {
-        "backgroundColor": Object {
-          "div": "#FFFFFF",
-          "tr": "#F1F2F3",
-        },
-      },
-      "scrollbar": Object {
-        "thumbColor": Object {
-          "active": "#73848C",
-          "normal": "#FFFFFF",
-        },
-        "trackColor": Object {
-          "active": "#F1F2F3",
-          "normal": "#FFFFFF",
-        },
-      },
-      "secondaryTab": Object {
-        "backgroundColor": Object {
-          "active": "#E3E6E8",
-          "hover": "#F1F2F3",
-          "normal": "#FFFFFF",
-        },
-        "color": Object {
-          "active": "#171A1C",
-          "hover": "#171A1C",
-          "normal": "#73848C",
-        },
-      },
-      "select": Object {
-        "backgroundColor": Object {
-          "active": "#E3E6E8",
-          "hover": "#E3E6E8",
-          "normal": "#FFFFFF",
-        },
-        "borderColor": Object {
-          "active": "#454F54",
-          "disabled": "#E3E6E8",
-          "hover": "#73848C",
-          "normal": "#ABB5BA",
-        },
-        "color": Object {
-          "active": "#171A1C",
-          "disabled": "#ABB5BA",
-          "hover": "#171A1C",
-          "normal": "#171A1C",
-        },
-        "optionList": Object {
-          "scrollbar": Object {
-            "backgroundColor": "#ABB5BA",
-          },
-        },
-      },
-      "switch": Object {
-        "checked": "#29A352",
-        "circle": "#FFFFFF",
-        "unchecked": "#ABB5BA",
-      },
-      "table": Object {
-        "link": Object {
-          "color": Object {
-            "normal": "#171A1C",
-          },
-        },
-        "td": Object {
-          "color": Object {
-            "normal": "#171A1C",
-          },
-        },
-        "th": Object {
-          "backgroundColor": Object {
-            "normal": "#FFFFFF",
-          },
-          "color": Object {
-            "active": "#4F4FFF",
-            "hover": "#4F4FFF",
-            "normal": "#73848C",
-          },
-          "previewColor": Object {
-            "normal": "#4F4FFF",
-          },
-        },
-        "tr": Object {
-          "backgroundColor": Object {
-            "hover": "#F1F2F3",
-          },
-        },
-      },
-      "tag": Object {
-        "backgroundColor": Object {
-          "blue": "#e3f2fd",
-          "gray": "#F1F2F3",
-          "green": "#D6F5E0",
-          "red": "#FAD1D1",
-          "white": "#E3E6E8",
-          "yellow": "#FFEECC",
-        },
-        "color": "#171A1C",
-      },
-      "textArea": Object {
-        "backgroundColor": Object {
-          "readOnly": "#F1F2F3",
-        },
-        "borderColor": Object {
-          "disabled": "#E3E6E8",
-          "focus": "#454F54",
-          "hover": "#73848C",
-          "normal": "#ABB5BA",
-        },
-        "color": Object {
-          "disabled": "#ABB5BA",
-          "placeholder": Object {
-            "focus": Object {
-              "normal": "transparent",
-              "readOnly": "#ABB5BA",
-            },
-            "normal": "#ABB5BA",
-          },
-          "readOnly": "#171A1C",
-        },
-      },
-      "topicFormLabel": Object {
-        "color": "#73848C",
-      },
-      "topicMetaData": Object {
-        "backgroundColor": "#F1F2F3",
-        "color": Object {
-          "label": "#73848C",
-          "meta": "#ABB5BA",
-          "value": "#2F3639",
-        },
-      },
-      "topicsList": Object {
-        "backgroundColor": Object {
-          "active": "#E3E6E8",
-          "hover": "#F1F2F3",
-        },
-        "color": Object {
-          "active": "#171A1C",
-          "hover": "#73848C",
-          "normal": "#171A1C",
-        },
-      },
-      "viewer": Object {
-        "wrapper": "#f9fafa",
-      },
-    }
-  }
->
-  <Provider
-    store={
-      Object {
-        "@@observable": [Function],
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      }
-    }
-  >
-    <StaticRouter>
-      <Router
-        history={
-          Object {
-            "action": "POP",
-            "block": [Function],
-            "createHref": [Function],
-            "go": [Function],
-            "goBack": [Function],
-            "goForward": [Function],
-            "listen": [Function],
-            "location": Object {
-              "hash": "",
-              "pathname": "/",
-              "search": "",
-              "state": undefined,
-            },
-            "push": [Function],
-            "replace": [Function],
-          }
-        }
-        staticContext={Object {}}
+<body>
+  <div>
+    <div>
+      <div
+        class="c0"
       >
-        <Details
-          clearTopicMessages={[MockFunction]}
-          clusterName="local"
-          deleteTopic={[MockFunction]}
-          isDeletePolicy={true}
-          isDeleted={false}
-          isInternal={true}
-          name="__internal.topic"
-          topicName="__internal.topic"
+        <h1>
+          __internal.topic
+        </h1>
+        <div>
+          <div
+            class="c1"
+          />
+        </div>
+      </div>
+      <nav
+        class="c2"
+        role="navigation"
+      >
+        <a
+          href="/ui/clusters/local/topics/__internal.topic"
+        >
+          Overview
+        </a>
+        <a
+          href="/ui/clusters/local/topics/__internal.topic/messages"
+        >
+          Messages
+        </a>
+        <a
+          href="/ui/clusters/local/topics/__internal.topic/consumer-groups"
+        >
+          Consumers
+        </a>
+        <a
+          href="/ui/clusters/local/topics/__internal.topic/settings"
         >
-          <div>
-            <Styled(PageHeading)
-              text="__internal.topic"
-            >
-              <PageHeading
-                className="c0"
-                text="__internal.topic"
-              >
-                <div
-                  className="c0"
-                >
-                  <h1>
-                    __internal.topic
-                  </h1>
-                  <div>
-                    <styled.div>
-                      <div
-                        className="c1"
-                      >
-                        <Route
-                          exact={true}
-                          path="/ui/clusters/:clusterName/topics/:topicName/messages"
-                        />
-                      </div>
-                    </styled.div>
-                  </div>
-                </div>
-              </PageHeading>
-            </Styled(PageHeading)>
-            <ConfirmationModal
-              isOpen={false}
-              onCancel={[Function]}
-              onConfirm={[Function]}
-            />
-            <ConfirmationModal
-              isOpen={false}
-              onCancel={[Function]}
-              onConfirm={[Function]}
-            />
-            <styled.nav
-              role="navigation"
-            >
-              <nav
-                className="c2"
-                role="navigation"
-              >
-                <NavLink
-                  activeClassName="is-active is-primary"
-                  exact={true}
-                  to="/ui/clusters/local/topics/__internal.topic"
-                >
-                  <Link
-                    aria-current={null}
-                    to={
-                      Object {
-                        "hash": "",
-                        "pathname": "/ui/clusters/local/topics/__internal.topic",
-                        "search": "",
-                        "state": null,
-                      }
-                    }
-                  >
-                    <LinkAnchor
-                      aria-current={null}
-                      href="/ui/clusters/local/topics/__internal.topic"
-                      navigate={[Function]}
-                    >
-                      <a
-                        aria-current={null}
-                        href="/ui/clusters/local/topics/__internal.topic"
-                        onClick={[Function]}
-                      >
-                        Overview
-                      </a>
-                    </LinkAnchor>
-                  </Link>
-                </NavLink>
-                <NavLink
-                  activeClassName="is-active"
-                  exact={true}
-                  to="/ui/clusters/local/topics/__internal.topic/messages"
-                >
-                  <Link
-                    aria-current={null}
-                    to={
-                      Object {
-                        "hash": "",
-                        "pathname": "/ui/clusters/local/topics/__internal.topic/messages",
-                        "search": "",
-                        "state": null,
-                      }
-                    }
-                  >
-                    <LinkAnchor
-                      aria-current={null}
-                      href="/ui/clusters/local/topics/__internal.topic/messages"
-                      navigate={[Function]}
-                    >
-                      <a
-                        aria-current={null}
-                        href="/ui/clusters/local/topics/__internal.topic/messages"
-                        onClick={[Function]}
-                      >
-                        Messages
-                      </a>
-                    </LinkAnchor>
-                  </Link>
-                </NavLink>
-                <NavLink
-                  activeClassName="is-active"
-                  exact={true}
-                  to="/ui/clusters/local/topics/__internal.topic/consumer-groups"
-                >
-                  <Link
-                    aria-current={null}
-                    to={
-                      Object {
-                        "hash": "",
-                        "pathname": "/ui/clusters/local/topics/__internal.topic/consumer-groups",
-                        "search": "",
-                        "state": null,
-                      }
-                    }
-                  >
-                    <LinkAnchor
-                      aria-current={null}
-                      href="/ui/clusters/local/topics/__internal.topic/consumer-groups"
-                      navigate={[Function]}
-                    >
-                      <a
-                        aria-current={null}
-                        href="/ui/clusters/local/topics/__internal.topic/consumer-groups"
-                        onClick={[Function]}
-                      >
-                        Consumers
-                      </a>
-                    </LinkAnchor>
-                  </Link>
-                </NavLink>
-                <NavLink
-                  activeClassName="is-active"
-                  exact={true}
-                  to="/ui/clusters/local/topics/__internal.topic/settings"
-                >
-                  <Link
-                    aria-current={null}
-                    to={
-                      Object {
-                        "hash": "",
-                        "pathname": "/ui/clusters/local/topics/__internal.topic/settings",
-                        "search": "",
-                        "state": null,
-                      }
-                    }
-                  >
-                    <LinkAnchor
-                      aria-current={null}
-                      href="/ui/clusters/local/topics/__internal.topic/settings"
-                      navigate={[Function]}
-                    >
-                      <a
-                        aria-current={null}
-                        href="/ui/clusters/local/topics/__internal.topic/settings"
-                        onClick={[Function]}
-                      >
-                        Settings
-                      </a>
-                    </LinkAnchor>
-                  </Link>
-                </NavLink>
-              </nav>
-            </styled.nav>
-            <Switch />
-          </div>
-        </Details>
-      </Router>
-    </StaticRouter>
-  </Provider>
-</Component>
+          Settings
+        </a>
+      </nav>
+    </div>
+  </div>
+</body>
 `;

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

@@ -1,8 +1,10 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import Dropdown, { DropdownProps } from 'components/common/Dropdown/Dropdown';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import DropdownDivider from 'components/common/Dropdown/DropdownDivider';
+import userEvent from '@testing-library/user-event';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
 
 const dummyLable = 'My Test Label';
 const dummyChildren = (
@@ -25,45 +27,47 @@ describe('Dropdown', () => {
   );
 
   it('renders Dropdown with initial props', () => {
-    const wrapper = mount(setupWrapper());
-    expect(wrapper.exists('.dropdown')).toBeTruthy();
+    const wrapper = render(setupWrapper()).baseElement;
+    expect(wrapper.querySelector('.dropdown')).toBeTruthy();
 
-    expect(wrapper.exists('.dropdown.is-active')).toBeFalsy();
-    expect(wrapper.exists('.dropdown.is-right')).toBeFalsy();
-    expect(wrapper.exists('.dropdown.is-up')).toBeFalsy();
+    expect(wrapper.querySelector('.dropdown.is-active')).toBeFalsy();
+    expect(wrapper.querySelector('.dropdown.is-right')).toBeFalsy();
+    expect(wrapper.querySelector('.dropdown.is-up')).toBeFalsy();
 
-    expect(wrapper.exists('.dropdown-content')).toBeTruthy();
-    expect(wrapper.find('.dropdown-content').text()).toEqual('');
+    expect(wrapper.querySelector('.dropdown-content')).toBeTruthy();
+    expect(wrapper.querySelector('.dropdown-content')).toHaveTextContent('');
   });
 
   it('renders custom children', () => {
-    const wrapper = mount(setupWrapper({}, dummyChildren));
-    expect(wrapper.exists('.dropdown-content')).toBeTruthy();
-    expect(wrapper.find('a.dropdown-item').length).toEqual(3);
-    expect(wrapper.find('.dropdown-divider').length).toEqual(1);
+    const wrapper = render(setupWrapper({}, dummyChildren)).baseElement;
+    expect(wrapper.querySelector('.dropdown-content')).toBeTruthy();
+    expect(wrapper.querySelectorAll('.dropdown-item').length).toEqual(3);
+    expect(wrapper.querySelectorAll('.dropdown-divider').length).toEqual(1);
   });
 
   it('renders dropdown with a right-aligned menu', () => {
-    const wrapper = mount(setupWrapper({ right: true }));
-    expect(wrapper.exists('.dropdown.is-right')).toBeTruthy();
+    const wrapper = render(setupWrapper({ right: true })).baseElement;
+    expect(wrapper.querySelector('.dropdown.is-right')).toBeTruthy();
   });
 
   it('renders dropdown with a popup menu', () => {
-    const wrapper = mount(setupWrapper({ up: true }));
-    expect(wrapper.exists('.dropdown.is-up')).toBeTruthy();
+    const wrapper = render(setupWrapper({ up: true })).baseElement;
+    expect(wrapper.querySelector('.dropdown.is-up')).toBeTruthy();
   });
 
   it('handles click', () => {
-    const wrapper = mount(setupWrapper());
-    expect(wrapper.exists('button')).toBeTruthy();
-    expect(wrapper.exists('.dropdown.is-active')).toBeFalsy();
+    const wrapper = render(setupWrapper()).baseElement;
+    const button = screen.getByText('My Test Label');
 
-    wrapper.find('button').simulate('click');
-    expect(wrapper.exists('.dropdown.is-active')).toBeTruthy();
+    expect(button).toBeInTheDocument();
+    expect(wrapper.querySelector('.dropdown.is-active')).toBeFalsy();
+
+    userEvent.click(button);
+    expect(wrapper.querySelector('.dropdown.is-active')).toBeTruthy();
   });
 
   it('matches snapshot', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       setupWrapper(
         {
           right: true,
@@ -72,6 +76,6 @@ describe('Dropdown', () => {
         dummyChildren
       )
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 });

kafka-ui-react-app/src/components/common/Dropdown/__tests__/DropdownItem.spec.tsx

@@ -1,23 +1,26 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
+import { render } from 'lib/testHelpers';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
 
 const onClick = jest.fn();
 
 describe('DropdownItem', () => {
   it('matches snapshot', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <DropdownItem onClick={jest.fn()}>Item 1</DropdownItem>
     );
     expect(onClick).not.toHaveBeenCalled();
-    expect(wrapper).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('handles Click', () => {
-    const wrapper = mount(
-      <DropdownItem onClick={onClick}>Item 1</DropdownItem>
-    );
-    wrapper.simulate('click');
+    render(<DropdownItem onClick={onClick}>Item 1</DropdownItem>);
+
+    const dropDown = screen.getByText('Item 1');
+
+    userEvent.click(dropDown);
     expect(onClick).toHaveBeenCalled();
   });
 });

kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap

@@ -36,103 +36,59 @@ exports[`Dropdown matches snapshot 1`] = `
   color: initial;
 }
 
-<Dropdown
-  label="My Test Label"
-  right={true}
-  up={true}
->
-  <div
-    className="dropdown is-right is-up"
-  >
-    <styled.div>
+<body>
+  <div>
+    <div
+      class="dropdown is-right is-up"
+    >
       <div
-        className="c0"
+        class="c0"
       >
-        <styled.button
-          onClick={[Function]}
+        <button
+          class="c1"
+          type="button"
         >
-          <button
-            className="c1"
-            onClick={[Function]}
-            type="button"
-          >
-            My Test Label
-          </button>
-        </styled.button>
+          My Test Label
+        </button>
       </div>
-    </styled.div>
-    <div
-      className="dropdown-menu"
-      id="dropdown-menu"
-      role="menu"
-    >
       <div
-        className="dropdown-content has-text-left"
+        class="dropdown-menu"
+        id="dropdown-menu"
+        role="menu"
       >
-        <DropdownItem
-          onClick={[MockFunction]}
+        <div
+          class="dropdown-content has-text-left"
         >
-          <styled.a
-            $isDanger={false}
-            className="dropdown-item is-link"
-            onClick={[Function]}
+          <a
+            class="c2 dropdown-item is-link"
+            href="#end"
+            role="menuitem"
+            type="button"
           >
-            <a
-              className="c2 dropdown-item is-link"
-              href="#end"
-              onClick={[Function]}
-              role="menuitem"
-              type="button"
-            >
-              Child 1
-            </a>
-          </styled.a>
-        </DropdownItem>
-        <DropdownItem
-          onClick={[MockFunction]}
-        >
-          <styled.a
-            $isDanger={false}
-            className="dropdown-item is-link"
-            onClick={[Function]}
+            Child 1
+          </a>
+          <a
+            class="c2 dropdown-item is-link"
+            href="#end"
+            role="menuitem"
+            type="button"
           >
-            <a
-              className="c2 dropdown-item is-link"
-              href="#end"
-              onClick={[Function]}
-              role="menuitem"
-              type="button"
-            >
-              Child 2
-            </a>
-          </styled.a>
-        </DropdownItem>
-        <DropdownDivider>
+            Child 2
+          </a>
           <hr
-            className="dropdown-divider"
+            class="dropdown-divider"
           />
-        </DropdownDivider>
-        <DropdownItem
-          onClick={[MockFunction]}
-        >
-          <styled.a
-            $isDanger={false}
-            className="dropdown-item is-link"
-            onClick={[Function]}
+          <a
+            class="c2 dropdown-item is-link"
+            href="#end"
+            role="menuitem"
+            type="button"
           >
-            <a
-              className="c2 dropdown-item is-link"
-              href="#end"
-              onClick={[Function]}
-              role="menuitem"
-              type="button"
-            >
-              Child 3
-            </a>
-          </styled.a>
-        </DropdownItem>
+            Child 3
+          </a>
+        </div>
       </div>
     </div>
   </div>
-</Dropdown>
+</body>
 `;

kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/DropdownItem.spec.tsx.snap

@@ -5,23 +5,16 @@ exports[`DropdownItem matches snapshot 1`] = `
   color: initial;
 }
 
-<DropdownItem
-  onClick={[MockFunction]}
->
-  <styled.a
-    $isDanger={false}
-    className="dropdown-item is-link"
-    onClick={[Function]}
-  >
+<body>
+  <div>
     <a
-      className="c0 dropdown-item is-link"
+      class="c0 dropdown-item is-link"
       href="#end"
-      onClick={[Function]}
       role="menuitem"
       type="button"
     >
       Item 1
     </a>
-  </styled.a>
-</DropdownItem>
+  </div>
+</body>
 `;

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

@@ -1,31 +1,36 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 import DynamicTextButton from 'components/common/DynamicTextButton/DynamicTextButton';
+import { render } from 'lib/testHelpers';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
 
 describe('DynamicButton', () => {
   const mockCallback = jest.fn();
   it('exectutes callback', () => {
-    const component = shallow(
+    render(
       <DynamicTextButton
         onClick={mockCallback}
         title="title"
         render={() => 'text'}
       />
     );
-    component.simulate('click');
+
+    userEvent.click(screen.getByTitle('title'));
     expect(mockCallback).toBeCalled();
   });
 
   it('changes the text', () => {
-    const component = mount(
+    render(
       <DynamicTextButton
         onClick={mockCallback}
         title="title"
         render={(clicked) => (clicked ? 'active' : 'default')}
       />
     );
-    expect(component.text()).toEqual('default');
-    component.simulate('click');
-    expect(component.text()).toEqual('active');
+
+    const button = screen.getByTitle('title');
+    expect(button).toHaveTextContent('default');
+    userEvent.click(button);
+    expect(button).toHaveTextContent('active');
   });
 });

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

@@ -1,20 +1,22 @@
-import { shallow } from 'enzyme';
 import React from 'react';
 import SQLEditor from 'components/common/SQLEditor/SQLEditor';
+import { render } from 'lib/testHelpers';
 
 describe('SQLEditor component', () => {
   it('matches the snapshot', () => {
-    const component = shallow(<SQLEditor value="" name="name" />);
-    expect(component).toMatchSnapshot();
+    const { baseElement } = render(<SQLEditor value="" name="name" />);
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('matches the snapshot with fixed height', () => {
-    const component = shallow(<SQLEditor value="" name="name" isFixedHeight />);
-    expect(component).toMatchSnapshot();
+    const { baseElement } = render(
+      <SQLEditor value="" name="name" isFixedHeight />
+    );
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('matches the snapshot with fixed height with no value', () => {
-    const component = shallow(<SQLEditor name="name" isFixedHeight />);
-    expect(component).toMatchSnapshot();
+    const { baseElement } = render(<SQLEditor name="name" isFixedHeight />);
+    expect(baseElement).toMatchSnapshot();
   });
 });

kafka-ui-react-app/src/components/common/SQLEditor/__tests__/__snapshots__/SQLEditor.spec.tsx.snap

@@ -1,126 +1,295 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SQLEditor component matches the snapshot 1`] = `
-<ReactAce
-  cursorStart={1}
-  editorProps={Object {}}
-  enableBasicAutocompletion={false}
-  enableLiveAutocompletion={false}
-  enableSnippets={false}
-  focus={false}
-  fontSize={12}
-  height="372px"
-  highlightActiveLine={true}
-  maxLines={null}
-  minLines={null}
-  mode="sql"
-  name="name"
-  navigateToFileEnd={true}
-  onChange={null}
-  onLoad={null}
-  onPaste={null}
-  onScroll={null}
-  placeholder={null}
-  readOnly={false}
-  scrollMargin={
-    Array [
-      0,
-      0,
-      0,
-      0,
-    ]
-  }
-  setOptions={Object {}}
-  showGutter={true}
-  showPrintMargin={true}
-  style={Object {}}
-  tabSize={2}
-  theme="textmate"
-  value=""
-  width="100%"
-  wrapEnabled={true}
-/>
+<body>
+  <div>
+    <div
+      class=" ace_editor ace_hidpi ace-tm"
+      id="name"
+      style="width: 100%; height: 372px; font-size: 12px;"
+    >
+      <textarea
+        autocapitalize="off"
+        autocorrect="off"
+        class="ace_text-input"
+        spellcheck="false"
+        style="opacity: 0; font-size: 1px;"
+        wrap="off"
+      />
+      <div
+        aria-hidden="true"
+        class="ace_gutter"
+      >
+        <div
+          class="ace_layer ace_gutter-layer ace_folding-enabled"
+          style="height: 1000000px;"
+        />
+      </div>
+      <div
+        class="ace_scroller"
+        style="line-height: 0px;"
+      >
+        <div
+          class="ace_content"
+        >
+          <div
+            class="ace_layer ace_print-margin-layer"
+          >
+            <div
+              class="ace_print-margin"
+              style="left: 4px; visibility: visible;"
+            />
+          </div>
+          <div
+            class="ace_layer ace_marker-layer"
+          />
+          <div
+            class="ace_layer ace_text-layer"
+            style="height: 1000000px; margin: 0px 4px;"
+          />
+          <div
+            class="ace_layer ace_marker-layer"
+          />
+          <div
+            class="ace_layer ace_cursor-layer ace_hidden-cursors"
+          >
+            <div
+              class="ace_cursor"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="ace_scrollbar ace_scrollbar-v"
+        style="display: none; width: 20px;"
+      >
+        <div
+          class="ace_scrollbar-inner"
+          style="width: 20px;"
+        >
+           
+        </div>
+      </div>
+      <div
+        class="ace_scrollbar ace_scrollbar-h"
+        style="display: none; height: 20px;"
+      >
+        <div
+          class="ace_scrollbar-inner"
+          style="height: 20px;"
+        >
+           
+        </div>
+      </div>
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+      >
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+        />
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+        >
+          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
 `;
 
 exports[`SQLEditor component matches the snapshot with fixed height 1`] = `
-<ReactAce
-  cursorStart={1}
-  editorProps={Object {}}
-  enableBasicAutocompletion={false}
-  enableLiveAutocompletion={false}
-  enableSnippets={false}
-  focus={false}
-  fontSize={12}
-  height="16px"
-  highlightActiveLine={true}
-  maxLines={null}
-  minLines={null}
-  mode="sql"
-  name="name"
-  navigateToFileEnd={true}
-  onChange={null}
-  onLoad={null}
-  onPaste={null}
-  onScroll={null}
-  placeholder={null}
-  readOnly={false}
-  scrollMargin={
-    Array [
-      0,
-      0,
-      0,
-      0,
-    ]
-  }
-  setOptions={Object {}}
-  showGutter={true}
-  showPrintMargin={true}
-  style={Object {}}
-  tabSize={2}
-  theme="textmate"
-  value=""
-  width="100%"
-  wrapEnabled={true}
-/>
+<body>
+  <div>
+    <div
+      class=" ace_editor ace_hidpi ace-tm"
+      id="name"
+      style="width: 100%; height: 16px; font-size: 12px;"
+    >
+      <textarea
+        autocapitalize="off"
+        autocorrect="off"
+        class="ace_text-input"
+        spellcheck="false"
+        style="opacity: 0; font-size: 1px;"
+        wrap="off"
+      />
+      <div
+        aria-hidden="true"
+        class="ace_gutter"
+      >
+        <div
+          class="ace_layer ace_gutter-layer ace_folding-enabled"
+          style="height: 1000000px;"
+        />
+      </div>
+      <div
+        class="ace_scroller"
+        style="line-height: 0px;"
+      >
+        <div
+          class="ace_content"
+        >
+          <div
+            class="ace_layer ace_print-margin-layer"
+          >
+            <div
+              class="ace_print-margin"
+              style="left: 4px; visibility: visible;"
+            />
+          </div>
+          <div
+            class="ace_layer ace_marker-layer"
+          />
+          <div
+            class="ace_layer ace_text-layer"
+            style="height: 1000000px; margin: 0px 4px;"
+          />
+          <div
+            class="ace_layer ace_marker-layer"
+          />
+          <div
+            class="ace_layer ace_cursor-layer ace_hidden-cursors"
+          >
+            <div
+              class="ace_cursor"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="ace_scrollbar ace_scrollbar-v"
+        style="display: none; width: 20px;"
+      >
+        <div
+          class="ace_scrollbar-inner"
+          style="width: 20px;"
+        >
+           
+        </div>
+      </div>
+      <div
+        class="ace_scrollbar ace_scrollbar-h"
+        style="display: none; height: 20px;"
+      >
+        <div
+          class="ace_scrollbar-inner"
+          style="height: 20px;"
+        >
+           
+        </div>
+      </div>
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+      >
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+        />
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+        >
+          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
 `;
 
 exports[`SQLEditor component matches the snapshot with fixed height with no value 1`] = `
-<ReactAce
-  cursorStart={1}
-  editorProps={Object {}}
-  enableBasicAutocompletion={false}
-  enableLiveAutocompletion={false}
-  enableSnippets={false}
-  focus={false}
-  fontSize={12}
-  height="512px"
-  highlightActiveLine={true}
-  maxLines={null}
-  minLines={null}
-  mode="sql"
-  name="name"
-  navigateToFileEnd={true}
-  onChange={null}
-  onLoad={null}
-  onPaste={null}
-  onScroll={null}
-  placeholder={null}
-  readOnly={false}
-  scrollMargin={
-    Array [
-      0,
-      0,
-      0,
-      0,
-    ]
-  }
-  setOptions={Object {}}
-  showGutter={true}
-  showPrintMargin={true}
-  style={Object {}}
-  tabSize={2}
-  theme="textmate"
-  width="100%"
-  wrapEnabled={true}
-/>
+<body>
+  <div>
+    <div
+      class=" ace_editor ace_hidpi ace-tm"
+      id="name"
+      style="width: 100%; height: 512px; font-size: 12px;"
+    >
+      <textarea
+        autocapitalize="off"
+        autocorrect="off"
+        class="ace_text-input"
+        spellcheck="false"
+        style="opacity: 0; font-size: 1px;"
+        wrap="off"
+      />
+      <div
+        aria-hidden="true"
+        class="ace_gutter"
+      >
+        <div
+          class="ace_layer ace_gutter-layer ace_folding-enabled"
+          style="height: 1000000px;"
+        />
+      </div>
+      <div
+        class="ace_scroller"
+        style="line-height: 0px;"
+      >
+        <div
+          class="ace_content"
+        >
+          <div
+            class="ace_layer ace_print-margin-layer"
+          >
+            <div
+              class="ace_print-margin"
+              style="left: 4px; visibility: visible;"
+            />
+          </div>
+          <div
+            class="ace_layer ace_marker-layer"
+          />
+          <div
+            class="ace_layer ace_text-layer"
+            style="height: 1000000px; margin: 0px 4px;"
+          />
+          <div
+            class="ace_layer ace_marker-layer"
+          />
+          <div
+            class="ace_layer ace_cursor-layer ace_hidden-cursors"
+          >
+            <div
+              class="ace_cursor"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="ace_scrollbar ace_scrollbar-v"
+        style="display: none; width: 20px;"
+      >
+        <div
+          class="ace_scrollbar-inner"
+          style="width: 20px;"
+        >
+           
+        </div>
+      </div>
+      <div
+        class="ace_scrollbar ace_scrollbar-h"
+        style="display: none; height: 20px;"
+      >
+        <div
+          class="ace_scrollbar-inner"
+          style="height: 20px;"
+        >
+           
+        </div>
+      </div>
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+      >
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+        />
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+        >
+          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
 `;

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

@@ -1,8 +1,8 @@
-import { shallow, mount } from 'enzyme';
 import Search from 'components/common/Search/Search';
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import theme from 'theme/theme';
+import { render } from 'lib/testHelpers';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
 
 jest.mock('use-debounce', () => ({
   useDebouncedCallback: (fn: (e: Event) => void) => fn,
@@ -11,36 +11,34 @@ jest.mock('use-debounce', () => ({
 describe('Search', () => {
   const handleSearch = jest.fn();
   it('calls handleSearch on input', () => {
-    const component = mount(
-      <ThemeProvider theme={theme}>
-        <Search
-          handleSearch={handleSearch}
-          value=""
-          placeholder="Search bt the Topic name"
-        />
-      </ThemeProvider>
+    render(
+      <Search
+        handleSearch={handleSearch}
+        value=""
+        placeholder="Search bt the Topic name"
+      />
     );
-    component.find('input').simulate('change', { target: { value: 'test' } });
-    expect(handleSearch).toHaveBeenCalledTimes(1);
+    const input = screen.getByPlaceholderText('Search bt the Topic name');
+    userEvent.click(input);
+    userEvent.keyboard('value');
+    expect(handleSearch).toHaveBeenCalledTimes(5);
   });
 
-  describe('when placeholder is provided', () => {
-    const component = shallow(
+  it('when placeholder is provided', () => {
+    render(
       <Search
         handleSearch={handleSearch}
         value=""
         placeholder="Search bt the Topic name"
       />
     );
-    it('matches the snapshot', () => {
-      expect(component).toMatchSnapshot();
-    });
+    expect(
+      screen.getByPlaceholderText('Search bt the Topic name')
+    ).toBeInTheDocument();
   });
 
-  describe('when placeholder is not provided', () => {
-    const component = shallow(<Search handleSearch={handleSearch} value="" />);
-    it('matches the snapshot', () => {
-      expect(component).toMatchSnapshot();
-    });
+  it('when placeholder is not provided', () => {
+    render(<Search handleSearch={handleSearch} value="" />);
+    expect(screen.queryByPlaceholderText('Search')).toBeInTheDocument();
   });
 });

kafka-ui-react-app/src/components/common/Search/__tests__/__snapshots__/Search.spec.tsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Search when placeholder is not provided matches the snapshot 1`] = `
-<Styled(Input)
-  defaultValue=""
-  inputSize="M"
-  leftIcon="fas fa-search"
-  onChange={[Function]}
-  placeholder="Search"
-  type="text"
-/>
-`;
-
-exports[`Search when placeholder is provided matches the snapshot 1`] = `
-<Styled(Input)
-  defaultValue=""
-  inputSize="M"
-  leftIcon="fas fa-search"
-  onChange={[Function]}
-  placeholder="Search bt the Topic name"
-  type="text"
-/>
-`;