internal: Remove Enzyme from visx (#1893)

* Tag enzyme files

* Get the Jest baseline

* Ran LLM fix everything

* One more passing

* One more passing

* All passing

* Run a pass to remove mocks where possible

* Add lost coverage

* Clean for PR

* Lint fix

* Fix remaining errors

* fix funky tests

* one more pass

* remove duplicative test

* remove spurious @testing-library/react-hooks

* fix visx-glyph tests

* remove enzyme deps and setup scripts

---------

Co-authored-by: Charles Covey-Brandt <[email protected]>
Co-authored-by: Chris Williams <[email protected]>

Author: 3 people

config-jest/setup/enzyme.js

@@ -37,7 +37,6 @@ module.exports = {
   },
   roots: ['<rootDir>/packages'],
   setupFiles: ['<rootDir>/config-jest/setup/shims.js', '<rootDir>/config-jest/setup/console.js'],
-  setupFilesAfterEnv: ['<rootDir>/config-jest/setup/enzyme.js'],
   testEnvironment: 'jsdom',
   testURL: 'http://localhost',
   timers: 'fake',

jest.config.js

@@ -71,7 +71,6 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/enzyme": "^3.10.3",
     "@types/jest": "^24.0.18",
     "@types/jsdom": "^12.2.4",
     "@types/node-fetch": "1.6.9",
@@ -81,9 +80,6 @@
     "babel-plugin-typescript-to-proptypes": "^2.0.0",
     "chalk": "4.1.0",
     "coveralls": "^3.0.6",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.0",
     "eslint": "^8.30.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",

package.json

@@ -1,12 +1,23 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { CircleSubject } from '../src';
 
 describe('<CircleSubject />', () => {
   it('should be defined', () => {
     expect(CircleSubject).toBeDefined();
   });
-  it('should render a cirlce', () => {
-    expect(shallow(<CircleSubject />).find('circle')).toHaveLength(1);
+
+  it('should render a circle', () => {
+    const { container } = render(
+      <svg>
+        <CircleSubject x={10} y={10} />
+      </svg>,
+    );
+
+    const circle = container.querySelector('circle');
+    expect(circle).toBeInTheDocument();
+    expect(circle).toHaveAttribute('cx', '10');
+    expect(circle).toHaveAttribute('cy', '10');
   });
 });

packages/visx-annotation/test/CircleSubject.test.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Connector } from '../src';
 
 describe('<Connector />', () => {
   it('should be defined', () => {
     expect(Connector).toBeDefined();
   });
+
   it('should render a path', () => {
-    expect(shallow(<Connector />).find('path')).toHaveLength(1);
+    const { container } = render(
+      <svg width={100} height={100}>
+        <Connector />
+      </svg>,
+    );
+    expect(container.querySelector('path')).toBeInTheDocument();
   });
 });

packages/visx-annotation/test/Connector.test.tsx

@@ -1,27 +1,75 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Annotation, EditableAnnotation } from '../src';
-import { EditableAnnotationProps } from '../lib/components/EditableAnnotation';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import EditableAnnotation from '../src/components/EditableAnnotation';
 
 describe('<EditableAnnotation />', () => {
-  function setup(props?: Partial<EditableAnnotationProps>) {
-    return shallow(
-      <EditableAnnotation width={100} height={100} {...props}>
-        <div />
-      </EditableAnnotation>,
+  type EditableAnnotationProps = React.ComponentProps<typeof EditableAnnotation>;
+
+  const defaultProps: EditableAnnotationProps = {
+    width: 100,
+    height: 100,
+    x: 0,
+    y: 0,
+    dx: 0,
+    dy: 0,
+    children: <div data-testid="child-content">Child content</div>,
+  };
+
+  function renderComponent(props?: Partial<EditableAnnotationProps>) {
+    return render(
+      <svg>
+        <EditableAnnotation {...defaultProps} {...props} />
+      </svg>,
     );
   }
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should be defined', () => {
-    expect(EditableAnnotation).toBeDefined();
+    expect(() => renderComponent()).not.toThrow();
   });
-  it('should render two resize handles', () => {
-    expect(setup().find('circle')).toHaveLength(2);
+
+  it('should render two resize handles by default', () => {
+    const { container } = renderComponent();
+    const circles = container.querySelectorAll('circle');
+    expect(circles).toHaveLength(2);
   });
-  it('should render one resize handle if canEditLabel or canEditSubject are false', () => {
-    expect(setup({ canEditLabel: false }).find('circle')).toHaveLength(1);
-    expect(setup({ canEditSubject: false }).find('circle')).toHaveLength(1);
+
+  it('should render one resize handle if canEditLabel is false', () => {
+    const { container } = renderComponent({ canEditLabel: false });
+    const circles = container.querySelectorAll('circle');
+    expect(circles).toHaveLength(1);
   });
-  it('should render an Annotation', () => {
-    expect(setup().find(Annotation)).toHaveLength(1);
+
+  it('should render one resize handle if canEditSubject is false', () => {
+    const { container } = renderComponent({ canEditSubject: false });
+    const circles = container.querySelectorAll('circle');
+    expect(circles).toHaveLength(1);
+  });
+
+  it('should render children content', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('child-content')).toBeInTheDocument();
+  });
+
+  it('should render with correct initial positions', () => {
+    const { container } = renderComponent({
+      x: 10,
+      y: 20,
+      dx: 30,
+      dy: 40,
+    });
+
+    const circles = container.querySelectorAll('circle');
+    const [subjectHandle, labelHandle] = circles;
+
+    expect(subjectHandle).toHaveAttribute('cx', '10');
+    expect(subjectHandle).toHaveAttribute('cy', '20');
+    expect(labelHandle).toHaveAttribute('cx', '40'); // x + dx
+    expect(labelHandle).toHaveAttribute('cy', '60'); // y + dy
   });
 });

packages/visx-annotation/test/EditableAnnotation.test.tsx

@@ -1,52 +1,56 @@
 import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { ResizeObserver } from '@juggle/resize-observer';
-import Text from '@visx/text/lib/Text';
-import { shallow } from 'enzyme';
 import { Label } from '../src';
 
 describe('<Label />', () => {
+  const renderLabel = (props: React.ComponentProps<typeof Label>) =>
+    render(
+      <svg>
+        <Label {...props} />
+      </svg>,
+    );
+
   it('should be defined', () => {
     expect(Label).toBeDefined();
   });
-  it('should render title Text', () => {
-    expect(
-      shallow(<Label title="title test" resizeObserverPolyfill={ResizeObserver} />)
-        .dive()
-        .children()
-        .find(Text)
-        .prop('children'),
-    ).toBe('title test');
+
+  it('should render title text', () => {
+    const { getByText } = renderLabel({
+      title: 'title test',
+      resizeObserverPolyfill: ResizeObserver,
+    });
+    expect(getByText('title test')).toBeInTheDocument();
   });
-  it('should render subtitle Text', () => {
-    expect(
-      shallow(
-        <Label
-          title="title test"
-          subtitle="subtitle test"
-          resizeObserverPolyfill={ResizeObserver}
-        />,
-      )
-        .dive()
-        .children()
-        .find(Text)
-        .at(1)
-        .prop('children'),
-    ).toBe('subtitle test');
+
+  it('should render subtitle text', () => {
+    const { getByText } = renderLabel({
+      title: 'title test',
+      subtitle: 'subtitle test',
+      resizeObserverPolyfill: ResizeObserver,
+    });
+    expect(getByText('subtitle test')).toBeInTheDocument();
   });
-  it('should render a background', () => {
-    expect(
-      shallow(<Label title="title test" showBackground resizeObserverPolyfill={ResizeObserver} />)
-        .dive()
-        .find('rect'),
-    ).toHaveLength(1);
+
+  it('should render background', () => {
+    const { container } = renderLabel({
+      title: 'title test',
+      showBackground: true,
+      resizeObserverPolyfill: ResizeObserver,
+    });
+    const rect = container.querySelector('rect');
+    expect(rect).toBeInTheDocument();
   });
-  it('should render an anchor line', () => {
-    expect(
-      shallow(<Label title="title test" showAnchorLine resizeObserverPolyfill={ResizeObserver} />)
-        .dive()
-        .find('AnchorLine')
-        .dive()
-        .find('line'),
-    ).toHaveLength(1);
+
+  it('should render anchor line', () => {
+    const { container } = renderLabel({
+      title: 'title test',
+      showAnchorLine: true,
+      resizeObserverPolyfill: ResizeObserver,
+    });
+    const line = container.querySelector('line');
+    expect(line).toBeInTheDocument();
   });
 });

packages/visx-annotation/test/Label.test.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { LineSubject } from '../src';
 
 describe('<LineSubject />', () => {
   it('should be defined', () => {
     expect(LineSubject).toBeDefined();
   });
+
   it('should render a line', () => {
-    expect(shallow(<LineSubject min={0} max={100} />).find('line')).toHaveLength(1);
+    const { container } = render(
+      <svg width={100} height={100}>
+        <LineSubject min={0} max={100} x={50} y={50} />
+      </svg>,
+    );
+    const lineElement = container.querySelector('line');
+    expect(lineElement).toBeInTheDocument();
   });
 });