internal: Remove Enzyme from visx

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

@@ -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/Connector.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/EditableAnnotation.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/Label.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/LineSubject.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();
   });
 });