Replace enzyme with React testing library in ui (#917)

* Replace enzyme with React testing library in ui

* Mock Math.random()

packages/redux-devtools-ui/jest.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
-  setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
   testEnvironment: 'jsdom',
   moduleNameMapper: {
     '\\.css$': '<rootDir>/tests/__mocks__/styleMock.ts',

packages/redux-devtools-ui/package.json

@@ -58,18 +58,17 @@
     "@babel/preset-typescript": "^7.15.0",
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/react": "^6.3.12",
+    "@testing-library/dom": "^8.10.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/color": "^3.0.2",
-    "@types/enzyme": "^3.10.10",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^27.0.2",
     "@types/react": "^16.14.18",
     "@types/styled-components": "^5.1.15",
     "@typescript-eslint/eslint-plugin": "^5.1.0",
     "@typescript-eslint/parser": "^5.1.0",
+    "babel-loader": "^8.2.3",
     "csstype": "^3.0.9",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",
@@ -86,7 +85,8 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.0.7",
-    "typescript": "~4.4.4"
+    "typescript": "~4.4.4",
+    "webpack": "^5.59.1"
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17.0.0",

packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx

@@ -24,22 +24,7 @@ export interface ContextMenuProps {
 }
 
 export default class ContextMenu extends Component<ContextMenuProps> {
-  constructor(props: ContextMenuProps) {
-    super(props);
-    this.updateItems(props.items);
-  }
-
   menu?: HTMLDivElement | null;
-  items?: React.ReactNode[];
-
-  UNSAFE_componentWillReceiveProps(nextProps: ContextMenuProps) {
-    if (
-      nextProps.items !== this.props.items ||
-      nextProps.visible !== this.props.visible
-    ) {
-      this.updateItems(nextProps.items);
-    }
-  }
 
   componentDidMount() {
     this.amendPosition();
@@ -84,8 +69,8 @@ export default class ContextMenu extends Component<ContextMenuProps> {
     this.menu!.style.left = `${left}px`;
   }
 
-  updateItems(items: Item[]) {
+  renderItems() {
-    this.items = items.map((item) => {
+    return this.props.items.map((item) => {
       if (isReactButtonElement(item)) return item;
       const value = item.value || item.name;
       return (
@@ -113,7 +98,7 @@ export default class ContextMenu extends Component<ContextMenuProps> {
         top={this.props.y}
         visible={this.props.visible}
       >
-        {this.items}
+        {this.renderItems()}
       </ContextMenuWrapper>
     );
   }

packages/redux-devtools-ui/tests/Button.test.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
+import userEvent from '@testing-library/user-event';
 import { Button } from '../src';
 
 describe('Button', function () {
   it('renders correctly', () => {
-    const wrapper = render(<Button>Text</Button>);
+    const { container } = render(<Button>Text</Button>);
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle the click event', () => {
     const onClick = jest.fn();
-    const wrapper = mount(<Button onClick={onClick}>ClickMe</Button>);
+    render(<Button onClick={onClick}>ClickMe</Button>);
 
-    wrapper.find('button').simulate('click');
+    userEvent.click(screen.getByRole('button'));
-    expect(onClick).toBeCalled();
+    expect(onClick).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/tests/Container.test.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
 import { Container } from '../src';
 
 describe('Container', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Container
         themeData={{ theme: 'default', scheme: 'default', light: false }}
       >
         Text
       </Container>
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

packages/redux-devtools-ui/tests/ContextMenu.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
+import userEvent from '@testing-library/user-event';
 import { ContextMenu } from '../src';
 import { items } from '../src/ContextMenu/data';
 
 describe('ContextMenu', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <ContextMenu
         items={items}
         onClick={() => {
@@ -16,15 +16,15 @@ describe('ContextMenu', function () {
         y={100}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
   it('should handle the click event', () => {
     const onClick = jest.fn();
-    const wrapper = mount(
+    render(
-      <ContextMenu items={items} onClick={onClick} x={100} y={100} />
+      <ContextMenu items={items} onClick={onClick} x={100} y={100} visible />
     );
 
-    wrapper.find('button').first().simulate('click');
+    userEvent.click(screen.getByRole('button', { name: 'Menu Item 1' }));
-    expect(onClick).toBeCalled();
+    expect(onClick).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/tests/Dialog.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
+import userEvent from '@testing-library/user-event';
 import { Dialog } from '../src';
 
 describe('Dialog', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Dialog
         onDismiss={() => {
           // noop
@@ -15,11 +15,11 @@ describe('Dialog', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Dialog
         title="Dialog Title"
         open
@@ -34,11 +34,11 @@ describe('Dialog', function () {
         Hello Dialog!
       </Dialog>
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders modal', () => {
-    const wrapper = render(
+    const { container } = render(
       <Dialog
         modal
         onDismiss={() => {
@@ -49,12 +49,12 @@ describe('Dialog', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle dismiss event', () => {
     const onDismiss = jest.fn();
-    const wrapper = mount(
+    render(
       <Dialog
         open
         onDismiss={onDismiss}
@@ -64,13 +64,13 @@ describe('Dialog', function () {
       />
     );
 
-    wrapper.find('button').first().simulate('click');
+    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-    expect(onDismiss).toBeCalled();
+    expect(onDismiss).toHaveBeenCalled();
   });
 
   it('should handle submit event', () => {
     const onSubmit = jest.fn();
-    const wrapper = mount(
+    render(
       <Dialog
         open
         onDismiss={() => {
@@ -80,7 +80,7 @@ describe('Dialog', function () {
       />
     );
 
-    wrapper.find('button').last().simulate('click');
+    userEvent.click(screen.getByRole('button', { name: 'Submit' }));
-    expect(onSubmit).toBeCalled();
+    expect(onSubmit).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/tests/Editor.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
-import { mountToJson } from 'enzyme-to-json';
 import { Editor } from '../src';
 import 'codemirror/mode/javascript/javascript';
 
@@ -25,17 +24,17 @@ describe('Editor', function () {
 
     return range;
   };
-  const wrapper = mount(<Editor value="var a = 1;" />);
+  const { container } = render(<Editor value="var a = 1;" />);
 
   it('renders correctly', () => {
-    expect(mountToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('calls getBoundingClientRect', () => {
-    expect(getBoundingClientRect).toBeCalled();
+    expect(getBoundingClientRect).toHaveBeenCalled();
   });
 
   it('calls getClientRects', () => {
-    expect(getClientRects).toBeCalled();
+    expect(getClientRects).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/tests/Form.test.tsx

@@ -1,19 +1,31 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { shallowToJson } from 'enzyme-to-json';
+import userEvent from '@testing-library/user-event';
 import { Form } from '../src';
 import { schema, uiSchema, formData } from '../src/Form/schema';
 
 describe('Form', function () {
+  let random: () => number;
+
+  beforeAll(() => {
+    random = Math.random;
+    Math.random = jest.fn(() => 0.25546350798039463);
+  });
+
+  afterAll(() => {
+    Math.random = random;
+    console.log(Math.random());
+  });
+
   it('renders correctly', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Form formData={formData} schema={schema} uiSchema={uiSchema} />
     );
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with primary button', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Form
         primaryButton
         submitText="Custom button"
@@ -22,19 +34,19 @@ describe('Form', function () {
         uiSchema={uiSchema}
       />
     );
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with no button', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Form formData={formData} schema={schema} uiSchema={uiSchema} noSubmit />
     );
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle the submit event', () => {
     const onSubmit = jest.fn();
-    const wrapper = mount(
+    render(
       <Form
         formData={formData}
         schema={schema}
@@ -43,7 +55,7 @@ describe('Form', function () {
       />
     );
 
-    wrapper.find('form').simulate('submit');
+    userEvent.click(screen.getByRole('button', { name: 'Submit' }));
-    expect(onSubmit).toBeCalled();
+    expect(onSubmit).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/tests/Notification.test.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
+import userEvent from '@testing-library/user-event';
 import { Notification } from '../src';
 
 describe('Notification', function () {
   it('renders correctly', () => {
-    const wrapper = render(<Notification>Message</Notification>);
+    const { container } = render(<Notification>Message</Notification>);
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Notification
         type="error"
         onClose={() => {
@@ -20,16 +20,14 @@ describe('Notification', function () {
         Message
       </Notification>
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle the click event', () => {
     const onClose = jest.fn();
-    const wrapper = mount(
+    render(<Notification onClose={onClose}>Message</Notification>);
-      <Notification onClose={onClose}>Message</Notification>
-    );
 
-    wrapper.find('button').simulate('click');
+    userEvent.click(screen.getByRole('button'));
-    expect(onClose).toBeCalled();
+    expect(onClose).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/tests/SegmentedControl.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
+import userEvent from '@testing-library/user-event';
 import { SegmentedControl } from '../src';
 
 describe('SegmentedControl', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <SegmentedControl
         values={['Button1', 'Button2', 'Button3']}
         selected="Button1"
@@ -15,11 +15,11 @@ describe('SegmentedControl', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
   it('should handle the click event', () => {
     const onClick = jest.fn();
-    const wrapper = mount(
+    render(
       <SegmentedControl
         values={['Button1', 'Button2', 'Button3']}
         selected="Button1"
@@ -28,7 +28,7 @@ describe('SegmentedControl', function () {
       />
     );
 
-    wrapper.find('button').first().simulate('click');
+    userEvent.click(screen.getByRole('button', { name: 'Button1' }));
-    expect(onClick).toBeCalled();
+    expect(onClick).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/tests/Select.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { render, mount, CommonWrapper, ReactWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { renderToJson, mountToJson } from 'enzyme-to-json';
+import userEvent from '@testing-library/user-event';
 import { Select } from '../src';
 import { options } from '../src/Select/options';
 
 describe('Select', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Select
         options={options}
         onChange={() => {
@@ -14,11 +14,11 @@ describe('Select', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Select
         options={options}
         onChange={() => {
@@ -34,32 +34,30 @@ describe('Select', function () {
         menuPlacement="top"
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should select another option', () => {
     const onChange = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
-      <Select options={options} onInputChange={onChange} />
+      <Select options={options} onChange={onChange} />
     );
 
-    const input = wrapper.find('input');
+    userEvent.type(screen.getByRole('combobox'), 'two');
-    (input.at(0).instance() as unknown as HTMLInputElement).value = 'two';
+    expect(container.firstChild).toMatchSnapshot();
-    input.first().simulate('change');
+    userEvent.type(screen.getByRole('combobox'), '{enter}');
-    expect(mountToJson(wrapper)).toMatchSnapshot();
+    expect(onChange).toHaveBeenCalled();
-    input.first().simulate('keyDown', { keyCode: 13 });
-    expect(onChange).toBeCalled();
   });
 
   it("shouldn't find any results", () => {
     const onChange = jest.fn();
-    const wrapper = mount(<Select options={options} onChange={onChange} />);
+    const { container } = render(
+      <Select options={options} onChange={onChange} />
+    );
 
-    const input = wrapper.find('input');
+    userEvent.type(screen.getByRole('combobox'), 'text');
-    (input.at(0).instance() as unknown as HTMLInputElement).value = 'text';
+    expect(container.firstChild).toMatchSnapshot();
-    input.first().simulate('change');
+    userEvent.type(screen.getByRole('combobox'), '{enter}');
-    expect(mountToJson(wrapper)).toMatchSnapshot(); // 'No results found'
+    expect(onChange).not.toHaveBeenCalled();
-    input.first().simulate('keyDown', { keyCode: 13 });
-    expect(onChange).not.toBeCalled();
   });
 });

packages/redux-devtools-ui/tests/Slider.test.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
 import { Slider } from '../src';
 
 describe('Slider', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Slider
         onChange={() => {
           // noop
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Slider
         label="Hi"
         min={1}
@@ -28,15 +27,15 @@ describe('Slider', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle the change event', () => {
     const onChange = jest.fn();
-    const wrapper = mount(<Slider value={1} onChange={onChange} />);
+    render(<Slider value={1} onChange={onChange} />);
 
-    wrapper.find('input').simulate('change');
+    fireEvent.change(screen.getByRole('slider'), { target: { value: '2' } });
-    expect(onChange).toBeCalled();
+    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toBeCalledWith(1);
+    expect(onChange).toHaveBeenCalledWith(2);
   });
 });

packages/redux-devtools-ui/tests/Tabs.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
+import userEvent from '@testing-library/user-event';
 import { Tabs } from '../src';
 import { tabs, simple10Tabs } from '../src/Tabs/data';
 
 describe('Tabs', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Tabs
         tabs={tabs}
         onClick={() => {
@@ -14,11 +14,11 @@ describe('Tabs', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Tabs
         tabs={tabs}
         onClick={() => {
@@ -27,11 +27,11 @@ describe('Tabs', function () {
         selected="Tab2"
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders tabs without inner components', () => {
-    const wrapper = render(
+    const { container } = render(
       <Tabs
         tabs={simple10Tabs}
         onClick={() => {
@@ -40,14 +40,14 @@ describe('Tabs', function () {
         selected="5"
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should select tab', () => {
     const onClick = jest.fn();
-    const wrapper = mount(<Tabs tabs={tabs} onClick={onClick} />);
+    render(<Tabs tabs={tabs} onClick={onClick} />);
 
-    wrapper.find('button').first().simulate('click');
+    userEvent.click(screen.getByRole('button', { name: 'Tab1' }));
-    expect(onClick).toBeCalled();
+    expect(onClick).toHaveBeenCalled();
   });
 });

packages/redux-devtools-ui/tests/Toolbar.test.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
 import { Toolbar, Divider, Spacer, Button } from '../src';
 
 describe('Toolbar', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Toolbar>
         <Button>1</Button>
         <Divider />
@@ -13,11 +12,11 @@ describe('Toolbar', function () {
         <Button>2</Button>
       </Toolbar>
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(<Toolbar borderPosition="top" />);
+    const { container } = render(<Toolbar borderPosition="top" />);
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

packages/redux-devtools-ui/tests/__snapshots__/ContextMenu.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`ContextMenu renders correctly 1`] = `
 <div
   class="sc-jRQBWg deJyZB"
+  style="top: 100px; left: 100px;"
 >
   <button
     value="Menu Item 1"

packages/redux-devtools-ui/tests/__snapshots__/Editor.test.tsx.snap

@@ -1,19 +1,139 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Editor renders correctly 1`] = `
-<Editor
+<div
-  autofocus={false}
+  class="sc-jrQzAO bvXojw"
-  foldGutter={true}
-  lineNumbers={true}
-  lineWrapping={false}
-  mode="javascript"
-  readOnly={false}
-  value="var a = 1;"
 >
-  <styled.div>
+  <div
+    class="CodeMirror cm-s-default"
+    translate="no"
+  >
     <div
-      className="sc-jrQzAO bvXojw"
+      style="overflow: hidden; position: relative; width: 3px; height: 0px;"
+    >
+      <textarea
+        autocapitalize="off"
+        autocorrect="off"
+        spellcheck="false"
+        style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"
+        tabindex="0"
+      />
+    </div>
+    <div
+      class="CodeMirror-vscrollbar"
+      cm-not-content="true"
+      tabindex="-1"
+    >
+      <div
+        style="min-width: 1px;"
+      />
+    </div>
+    <div
+      class="CodeMirror-hscrollbar"
+      cm-not-content="true"
+      tabindex="-1"
+    >
+      <div
+        style="height: 100%; min-height: 1px;"
+      />
+    </div>
+    <div
+      class="CodeMirror-scrollbar-filler"
+      cm-not-content="true"
     />
-  </styled.div>
+    <div
-</Editor>
+      class="CodeMirror-gutter-filler"
+      cm-not-content="true"
+    />
+    <div
+      class="CodeMirror-scroll"
+      tabindex="-1"
+    >
+      <div
+        class="CodeMirror-sizer"
+        style="margin-left: 0px; min-width: 3px;"
+      >
+        <div
+          style="position: relative;"
+        >
+          <div
+            class="CodeMirror-lines"
+            role="presentation"
+          >
+            <div
+              role="presentation"
+              style="position: relative; outline: none;"
+            >
+              <div
+                class="CodeMirror-measure"
+              />
+              <div
+                class="CodeMirror-measure"
+              >
+                <pre
+                  class="CodeMirror-line"
+                  role="presentation"
+                >
+                  <span
+                    role="presentation"
+                    style="padding-right: .1px;"
+                  >
+                    <span
+                      class="cm-keyword"
+                    >
+                      var
+                    </span>
+                     
+                    <span
+                      class="cm-def"
+                    >
+                      a
+                    </span>
+                     
+                    <span
+                      class="cm-operator"
+                    >
+                      =
+                    </span>
+                     
+                    <span
+                      class="cm-number"
+                    >
+                      1
+                    </span>
+                    ;
+                  </span>
+                </pre>
+              </div>
+              <div
+                style="position: relative; z-index: 1;"
+              />
+              <div
+                class="CodeMirror-cursors"
+              />
+              <div
+                class="CodeMirror-code"
+                role="presentation"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        style="position: absolute; height: 50px; width: 1px;"
+      />
+      <div
+        class="CodeMirror-gutters"
+      >
+        <div
+          class="CodeMirror-gutter CodeMirror-linenumbers"
+          style="width: 1px;"
+        />
+        <div
+          class="CodeMirror-gutter CodeMirror-foldgutter"
+        />
+      </div>
+    </div>
+  </div>
+</div>
 `;

packages/redux-devtools-ui/tests/__snapshots__/Slider.test.tsx.snap

@@ -20,6 +20,7 @@ exports[`Slider renders with props 1`] = `
 >
   <label>
     Hi
+     
   </label>
   <input
     disabled=""

packages/redux-devtools-ui/tests/__snapshots__/Tabs.test.tsx.snap

@@ -120,9 +120,10 @@ exports[`Tabs renders with props 1`] = `
   </div>
   <div>
     <div
-      style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:22px"
+      style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 22px;"
     >
-      Selected Tab2
+      Selected 
+      Tab2
     </div>
   </div>
 </div>

packages/redux-devtools-ui/tests/setup.ts

@@ -1,4 +0,0 @@
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });

yarn.lock

@@ -5066,11 +5066,12 @@ __metadata:
     "@rjsf/core": ^3.2.0
     "@storybook/addon-essentials": ^6.3.12
     "@storybook/react": ^6.3.12
+    "@testing-library/dom": ^8.10.1
+    "@testing-library/react": ^12.1.2
+    "@testing-library/user-event": ^13.5.0
     "@types/base16": ^1.0.2
     "@types/codemirror": ^5.60.5
     "@types/color": ^3.0.2
-    "@types/enzyme": ^3.10.10
-    "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/jest": ^27.0.2
     "@types/json-schema": ^7.0.9
     "@types/prop-types": ^15.7.4
@@ -5080,13 +5081,11 @@ __metadata:
     "@types/styled-components": ^5.1.15
     "@typescript-eslint/eslint-plugin": ^5.1.0
     "@typescript-eslint/parser": ^5.1.0
+    babel-loader: ^8.2.3
     base16: ^1.0.0
     codemirror: ^5.63.3
     color: ^3.2.1
     csstype: ^3.0.9
-    enzyme: ^3.11.0
-    enzyme-adapter-react-16: ^1.15.6
-    enzyme-to-json: ^3.6.2
     eslint: ^7.32.0
     eslint-config-prettier: ^8.3.0
     eslint-plugin-jest: ^25.2.2
@@ -5109,6 +5108,7 @@ __metadata:
     stylelint-processor-styled-components: ^1.10.0
     ts-jest: ^27.0.7
     typescript: ~4.4.4
+    webpack: ^5.59.1
   peerDependencies:
     "@types/react": ^16.3.0 || ^17.0.0
     "@types/styled-components": ^5.1.15
@@ -6293,7 +6293,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.0.0":
+"@testing-library/dom@npm:^8.0.0, @testing-library/dom@npm:^8.10.1":
   version: 8.10.1
   resolution: "@testing-library/dom@npm:8.10.1"
   dependencies:
@@ -6322,6 +6322,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/user-event@npm:^13.5.0":
+  version: 13.5.0
+  resolution: "@testing-library/user-event@npm:13.5.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 16319de685fbb7008f1ba667928f458b2d08196918002daca56996de80ef35e6d9de26e9e1ece7d00a004692b95a597cf9142fff0dc53f2f51606a776584f549
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"