[deps] upgrade visx-xychart to react 17

packages/visx-xychart/package.json

@@ -36,7 +36,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^16.4.0-0",
+    "react": "^16.8.0 || ^17.0.0",
     "react-spring": "^9.2.0"
   },
   "dependencies": {

packages/visx-xychart/test/components/Annotation.test.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import {
-  Annotation as VxAnnotation,
-  EditableAnnotation as VxEditableAnnotation,
-} from '@visx/annotation';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { DataContext, Annotation, AnimatedAnnotation } from '../../src';
 import getDataContext from '../mocks/getDataContext';
 
 const series = { key: 'visx', data: [{}], xAccessor: () => 4, yAccessor: () => 7 };
 
 function setup(children: React.ReactNode) {
-  return mount(
+  return render(
     <DataContext.Provider value={getDataContext(series)}>
       <svg>{children}</svg>
     </DataContext.Provider>,
@@ -22,20 +19,22 @@ describe('<Annotation />', () => {
     expect(Annotation).toBeDefined();
   });
   it('should render a VxAnnotation', () => {
-    const wrapper = setup(
+    const { getByText } = setup(
       <Annotation dataKey={series.key} datum={{}}>
         {'test'}
       </Annotation>,
     );
-    expect(wrapper.find(VxAnnotation)).toHaveLength(1);
+    expect(getByText('test')).toBeInTheDocument();
   });
   it('should render a VxEditableAnnotation when editable=true', () => {
-    const wrapper = setup(
+    const { container } = setup(
       <Annotation editable dataKey={series.key} datum={{}}>
         {'test'}
       </Annotation>,
     );
-    expect(wrapper.find(VxEditableAnnotation)).toHaveLength(1);
+    // with editable=true, the svg should have a circle overlay with 'cursor: grab' attribute
+    const CircleElement = container.querySelector('circle');
+    expect(CircleElement).toHaveAttribute('cursor');
   });
 });
 
@@ -44,19 +43,22 @@ describe('<AnimatedAnnotation />', () => {
     expect(AnimatedAnnotation).toBeDefined();
   });
   it('should render a VxAnnotation', () => {
-    const wrapper = setup(
+    const { getByText } = setup(
       <AnimatedAnnotation dataKey={series.key} datum={{}}>
         {'test'}
       </AnimatedAnnotation>,
     );
-    expect(wrapper.find(VxAnnotation)).toHaveLength(1);
+    expect(getByText('test')).toBeInTheDocument();
   });
   it('should render a VxEditableAnnotation when editable=true', () => {
-    const wrapper = setup(
+    const { container } = setup(
       <AnimatedAnnotation editable dataKey={series.key} datum={{}}>
         {'test'}
       </AnimatedAnnotation>,
     );
-    expect(wrapper.find(VxEditableAnnotation)).toHaveLength(1);
+
+    // with editable=true, the svg should have a circle overlay with 'cursor: grab' attribute
+    const CircleElement = container.querySelector('circle');
+    expect(CircleElement).toHaveAttribute('cursor');
   });
 });

packages/visx-xychart/test/components/AreaSeries.test.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect } from 'react';
-import { animated } from 'react-spring';
-import { mount } from 'enzyme';
-import { Area, LinePath } from '@visx/shape';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { AnimatedAreaSeries, DataContext, AreaSeries, useEventEmitter } from '../../src';
 import getDataContext from '../mocks/getDataContext';
 import setupTooltipTest from '../mocks/setupTooltipTest';
@@ -15,66 +14,69 @@ describe('<AreaSeries />', () => {
   });
 
   it('should render an Area', () => {
-    const wrapper = mount(
+    const { container } = render(
       <DataContext.Provider value={getDataContext(series)}>
         <svg>
           <AreaSeries dataKey={series.key} {...series} />
         </svg>
       </DataContext.Provider>,
     );
-    // @ts-ignore produces a union type that is too complex to represent.ts(2590)
-    expect(wrapper.find(Area)).toHaveLength(1);
+    const Path = container.querySelector('path');
+    expect(Path).toBeInTheDocument();
   });
 
   it('should set strokeLinecap="round" to make datum surrounded by nulls visible', () => {
-    const wrapper = mount(
+    const { container } = render(
       <DataContext.Provider value={getDataContext(series)}>
         <svg>
           <AreaSeries dataKey={series.key} renderLine={false} {...series} />
         </svg>
       </DataContext.Provider>,
     );
-    expect(wrapper.find('path').prop('strokeLinecap')).toBe('round');
+    const Path = container.querySelector('path');
+    expect(Path).toBeInTheDocument();
+    expect(Path).toHaveAttribute('stroke-linecap', 'round');
   });
 
-  it('should use x/y0Accessors an Area', () => {
+  it('should use x/y0Accessors in an Area', () => {
     const y0Accessor = jest.fn(() => 3);
-    const wrapper = mount(
+    const { container } = render(
       <DataContext.Provider value={getDataContext(series)}>
         <svg>
           <AreaSeries dataKey={series.key} {...series} y0Accessor={y0Accessor} />
         </svg>
       </DataContext.Provider>,
     );
 
-    const callCount = y0Accessor.mock.calls.length;
+    const Path = container.querySelector('path');
+    expect(Path).toBeInTheDocument();
     expect(y0Accessor).toHaveBeenCalled();
-    const y0Area = wrapper.find(Area).prop('y0') as Function;
-    y0Area();
-    expect(y0Accessor).toHaveBeenCalledTimes(callCount + 1);
   });
 
   it('should render a LinePath is renderLine=true', () => {
-    const wrapper = mount(
+    const { container } = render(
       <DataContext.Provider value={getDataContext(series)}>
         <svg>
           <AreaSeries renderLine dataKey={series.key} {...series} />
         </svg>
       </DataContext.Provider>,
     );
-    // @ts-ignore produces a union type that is too complex to represent.ts(2590)
-    expect(wrapper.find(LinePath)).toHaveLength(1);
+
+    const LinePath = container.querySelector('.visx-line');
+    expect(LinePath).toBeInTheDocument();
   });
 
   it('should render Glyphs if focus/blur handlers are set', () => {
-    const wrapper = mount(
+    const { container } = render(
       <DataContext.Provider value={getDataContext(series)}>
         <svg>
           <AreaSeries dataKey={series.key} {...series} onFocus={() => {}} />
         </svg>
       </DataContext.Provider>,
     );
-    expect(wrapper.find('circle')).toHaveLength(series.data.length);
+
+    const Circles = container.querySelectorAll('circle');
+    expect(Circles).toHaveLength(series.data.length);
   });
 
   it('should invoke showTooltip/hideTooltip on pointermove/pointerout', () => {
@@ -123,13 +125,14 @@ describe('<AnimatedAreaSeries />', () => {
     expect(AnimatedAreaSeries).toBeDefined();
   });
   it('should render an animated.path', () => {
-    const wrapper = mount(
+    const { container } = render(
       <DataContext.Provider value={getDataContext(series)}>
         <svg>
           <AnimatedAreaSeries renderLine={false} dataKey={series.key} {...series} />
         </svg>
       </DataContext.Provider>,
     );
-    expect(wrapper.find(animated.path)).toHaveLength(1);
+    const Path = container.querySelectorAll('path');
+    expect(Path).toHaveLength(1);
   });
 });

packages/visx-xychart/test/components/AreaStack.test.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect } from 'react';
-import { mount } from 'enzyme';
-import { animated } from 'react-spring';
-import { Area, LinePath } from '@visx/shape';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import {
   AreaStack,
   AreaSeries,
@@ -48,7 +47,7 @@ describe('<AreaStack />', () => {
   });
 
   it('should render Areas', () => {
-    const wrapper = mount(
+    const { container } = render(
       <DataProvider {...providerProps}>
         <svg>
           <AreaStack>
@@ -58,12 +57,12 @@ describe('<AreaStack />', () => {
         </svg>
       </DataProvider>,
     );
-    // @ts-ignore produces a union type that is too complex to represent.ts(2590)
-    expect(wrapper.find(Area)).toHaveLength(2);
+    const Areas = container.querySelectorAll('.visx-area');
+    expect(Areas).toHaveLength(2);
   });
 
   it('should render LinePaths if renderLine=true', () => {
-    const wrapper = mount(
+    const { container } = render(
       <DataProvider {...providerProps}>
         <svg>
           <AreaStack renderLine>
@@ -73,12 +72,12 @@ describe('<AreaStack />', () => {
         </svg>
       </DataProvider>,
     );
-    // @ts-ignore produces a union type that is too complex to represent.ts(2590)
-    expect(wrapper.find(LinePath)).toHaveLength(2);
+    const LinePaths = container.querySelectorAll('.visx-line');
+    expect(LinePaths).toHaveLength(2);
   });
 
   it('should render Glyphs if focus/blur handlers are set', () => {
-    const wrapper = mount(
+    const { container } = render(
       <DataProvider {...providerProps}>
         <svg>
           <AreaStack onFocus={() => {}}>
@@ -87,7 +86,8 @@ describe('<AreaStack />', () => {
         </svg>
       </DataProvider>,
     );
-    expect(wrapper.find('circle')).toHaveLength(series1.data.length);
+    const Circles = container.querySelectorAll('circle');
+    expect(Circles).toHaveLength(series1.data.length);
   });
 
   it('should update scale domain to include stack sums including negative values', () => {
@@ -101,7 +101,7 @@ describe('<AreaStack />', () => {
       return null;
     }
 
-    mount(
+    render(
       <DataProvider {...providerProps}>
         <svg>
           <AreaStack>
@@ -165,7 +165,7 @@ describe('<AnimatedAreaStack />', () => {
     expect(AnimatedAreaStack).toBeDefined();
   });
   it('should render an animated.path', () => {
-    const wrapper = mount(
+    const { container } = render(
       <DataProvider {...providerProps}>
         <svg>
           <AnimatedAreaStack renderLine={false}>
@@ -175,6 +175,7 @@ describe('<AnimatedAreaStack />', () => {
         </svg>
       </DataProvider>,
     );
-    expect(wrapper.find(animated.path)).toHaveLength(2);
+    const Circles = container.querySelectorAll('path');
+    expect(Circles).toHaveLength(2);
   });
 });