[deps] Upgrade to react v17 and react-testing-library (#1268)

* add react-17 and react-testing-library * upgrade and fix unit tests for visx-annotation * add react 17 and fix unit tests for withBoundingRects * nit fixes * ts fixes * update visx-brush * update visx-chord * update visx-clip-path * update visx-demo * update visx-drag * update visx-geo * update visx-glyph * update visx-gradient * update visx-grid * update visx-group * update visx-heatmap * update visx-hierarchy * update visx-legend * update visx-marker * update visx-network * update visx-pattern * update visx-responsive * update visx-shape * update visx-stats * update visx-text * update visx-threshold * update visx-tooltip * update visx-visx * update visx-voronoi * update visx-zoom * update visx-xychart * rewrote tests * update AreaSeries test * update Hooks and Providers unit tests * add AreaStack and BarStack tests * fix unit test for BarGroup, BarSeries, GlyphSeries, Grid, LineSeries, Tooltip, withRegisteredData * fix Axis.test.tsx * fix comments * add react 16.8.0 as a dep * address comments * update visx-react-spring * update visx-demo dependencies * update visx-axis depedencies * remove shallow from visx-text/Test.test.tsx Co-authored-by: Carl Liu <carl.liu@airbnb.com>
airbnb · Aug 10, 2021 · 6319867 · 6319867
1 parent 1bbdcf7
commit 6319867
Show file tree

Hide file tree

Showing 121 changed files with 1,004 additions and 778 deletions.
diff --git a/package.json b/package.json
@@ -67,6 +67,10 @@
     "@types/node-fetch": "1.6.9",
     "@types/react-test-renderer": "^16.9.0",
     "@types/webpack": "^4.41.17",
+    "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/react": "^10.2.0",
+    "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/user-event": "^11.0.1",
     "chalk": "4.1.0",
     "coveralls": "^3.0.6",
     "enzyme": "^3.10.0",
@@ -81,8 +85,8 @@
     "marked": "^0.7.0",
     "node-fetch": "2.6.1",
     "raf": "^3.4.0",
-    "react": "^15.0.0-0 || ^16.0.0-0",
-    "react-dom": "^15.0.0-0 || ^16.0.0-0",
+    "react": "^16.0.0-0 || ^17.0.0-0",
+    "react-dom": "^16.0.0-0 || ^17.0.0-0",
     "react-test-renderer": "^16.8.6",
     "regenerator-runtime": "^0.10.5",
     "timezone-mock": "^1.1.0",

diff --git a/packages/visx-annotation/package.json b/packages/visx-annotation/package.json
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/airbnb/visx#readme",
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.0.0-0 || ^17.0.0-0"
   },
   "dependencies": {
     "@types/react": "*",

diff --git a/packages/visx-annotation/test/Annotation.test.tsx b/packages/visx-annotation/test/Annotation.test.tsx
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import React, { useContext } from 'react';
 import { Annotation } from '../src';
 import AnnotationContext from '../src/context/AnnotationContext';
@@ -16,7 +16,7 @@ describe('<Annotation />', () => {
       return null;
     }
 
-    mount(
+    render(
       <Annotation {...annotation}>
         <AnnotationChild />
       </Annotation>,

diff --git a/packages/visx-axis/package.json b/packages/visx-axis/package.json
@@ -38,7 +38,7 @@
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {
-    "react": "^16.3.0-0"
+    "react": "^16.3.0-0 || ^17.0.0-0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/visx-bounds/package.json b/packages/visx-bounds/package.json
@@ -35,7 +35,7 @@
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0",
-    "react-dom": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.0.0-0 || ^17.0.0-0",
+    "react-dom": "^16.0.0-0 || ^17.0.0-0"
   }
 }
diff --git a/packages/visx-bounds/test/withBoundingRects.test.tsx b/packages/visx-bounds/test/withBoundingRects.test.tsx
@@ -1,37 +1,83 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render, waitFor } from '@testing-library/react';
+import fireEvent from '@testing-library/user-event';
 import { withBoundingRects } from '../src';
+import '@testing-library/jest-dom';
 
-const expectedRectShape = expect.objectContaining({
-  top: expect.any(Number),
-  right: expect.any(Number),
-  bottom: expect.any(Number),
-  left: expect.any(Number),
-  width: expect.any(Number),
-  height: expect.any(Number),
-});
+type RectShape = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+  width?: number;
+  height?: number;
+};
 
 const emptyRect = {
   top: 0,
   right: 0,
   bottom: 0,
   left: 0,
-  width: 0,
-  height: 0,
 };
 
+const mockRect = {
+  top: 50,
+  left: 50,
+  bottom: 0,
+  right: 0,
+};
+
+type BoundingRectsComponentProps = {
+  rect?: RectShape;
+  parentRect?: RectShape;
+  getRects?: () => DOMRect;
+  children?: JSX.Element;
+  otherProps?: object;
+};
+
+// Component created for testing purpose
+function BoundingRectsComponent({
+  rect,
+  parentRect,
+  getRects,
+  children,
+  ...otherProps
+}: BoundingRectsComponentProps) {
+  const parentRectStyle = {
+    top: parentRect?.top,
+    left: parentRect?.left,
+    bottom: parentRect?.bottom,
+    right: parentRect?.right,
+  };
+
+  const rectStyle = {
+    top: rect?.top,
+    left: rect?.left,
+    bottom: rect?.bottom,
+    right: rect?.right,
+  };
+
+  return (
+    <div data-testid="BoundingRectsComponentParent" style={parentRectStyle}>
+      <div data-testid="BoundingRectsComponent" style={rectStyle} onClick={() => getRects?.()}>
+        {children}
+        {JSON.stringify(otherProps)}
+      </div>
+    </div>
+  );
+}
+
 describe('withBoundingRects()', () => {
   beforeAll(() => {
     // mock getBoundingClientRect
-    Element.prototype.getBoundingClientRect = jest.fn(() => ({
-      width: 100,
-      height: 100,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
+    jest.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(() => ({
+      ...mockRect,
       x: 0,
       y: 0,
+      width: 100,
+      height: 100,
       toJSON: jest.fn(),
     }));
   });
@@ -40,41 +86,48 @@ describe('withBoundingRects()', () => {
     expect(withBoundingRects).toBeDefined();
   });
 
-  test('it should pass rect, parentRect, and getRect props to the wrapped component', () => {
-    const Component = () => <div />;
-    const HOC = withBoundingRects(Component);
-    const wrapper = mount(<HOC />);
-    const RenderedComponent = wrapper.find(Component);
+  test('it should pass rect, parentRect, and getRect props to the wrapped component', async () => {
+    const HOC = withBoundingRects(BoundingRectsComponent);
+    // @ts-ignore
+    const { getByTestId } = render(<HOC />);
+
+    // getBoundingClientRect should be called twice, once for the component, and once for its parent
+    await waitFor(() => expect(Element.prototype.getBoundingClientRect).toHaveBeenCalledTimes(2));
 
-    expect(Element.prototype.getBoundingClientRect).toHaveBeenCalled();
-    expect(RenderedComponent.prop('rect')).toEqual(expectedRectShape);
-    expect(RenderedComponent.prop('parentRect')).toEqual(expectedRectShape);
-    expect(typeof RenderedComponent.prop('getRects')).toBe('function');
+    const RenderedComponent = getByTestId('BoundingRectsComponent');
+    const RenderedComponentParent = getByTestId('BoundingRectsComponentParent');
+
+    const expectedStyle = `top: ${mockRect.top}px; bottom: ${mockRect.bottom}px; left: ${mockRect.left}px; right: ${mockRect.right}px;`;
+    expect(RenderedComponent).toHaveStyle(expectedStyle);
+    expect(RenderedComponentParent).toHaveStyle(expectedStyle);
+
+    fireEvent.click(RenderedComponent);
+    // upon onClick time, getBuondingClientRect should be called extra 2 times
+    expect(Element.prototype.getBoundingClientRect).toHaveBeenCalledTimes(4);
   });
 
   test('it should pass additional props to the wrapped component', () => {
-    const Component = () => <div />;
-    const HOC = withBoundingRects(Component);
+    const HOC = withBoundingRects(BoundingRectsComponent);
     // @ts-ignore
-    const wrapper = mount(<HOC bananas="are yellow" />);
-    const RenderedComponent = wrapper.find(Component);
-    expect(RenderedComponent.prop('bananas')).toBe('are yellow');
+    const { getByText } = render(<HOC bananas="are yellow" />);
+    expect(getByText('are yellow', { exact: false })).toBeInTheDocument();
   });
 
-  test('it should return default empty state if no node', () => {
+  test('it should not render if no node', () => {
     const Component = () => null;
     const HOC = withBoundingRects(Component);
-    const wrapper = mount(<HOC />);
-    const RenderedComponent = wrapper.find(Component);
-    expect(RenderedComponent.prop('rect')).toBeUndefined();
-    expect(RenderedComponent.prop('parentRect')).toBeUndefined();
+    const { container } = render(<HOC />);
+    expect(container.innerHTML).toHaveLength(0);
   });
 
   test('it should set rect and parentRect to empty state if no getBoundingClient()', () => {
-    const Component = () => <>{''}</>;
-    const HOC = withBoundingRects(Component);
-    const wrapper = mount(<HOC />);
-    const RenderedComponent = wrapper.find(Component);
-    expect(RenderedComponent.prop('rect')).toEqual(emptyRect);
+    (Element.prototype.getBoundingClientRect as unknown) = null;
+    const HOC = withBoundingRects(BoundingRectsComponent);
+    // @ts-ignore
+    const { getByTestId } = render(<HOC />);
+    const RenderedComponent = getByTestId('BoundingRectsComponent');
+    const RenderedComponentParent = getByTestId('BoundingRectsComponentParent');
+    expect(RenderedComponent).toHaveStyle(emptyRect);
+    expect(RenderedComponentParent).toHaveStyle(emptyRect);
   });
 });
diff --git a/packages/visx-brush/package.json b/packages/visx-brush/package.json
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.0.0-0 || ^17.0.0-0"
   },
   "dependencies": {
     "@visx/drag": "1.18.1",

diff --git a/packages/visx-chord/package.json b/packages/visx-chord/package.json
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/airbnb/visx#readme",
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.0.0-0 || ^17.0.0-0"
   },
   "dependencies": {
     "@types/d3-chord": "^1.0.9",

diff --git a/packages/visx-clip-path/package.json b/packages/visx-clip-path/package.json
@@ -33,7 +33,7 @@
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.0.0-0 || ^17.0.0-0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/visx-demo/package.json b/packages/visx-demo/package.json
@@ -87,9 +87,9 @@
     "nprogress": "^0.2.0",
     "prismjs": "^1.19.0",
     "raw-loader": "^4.0.0",
-    "react": "^16.9.0",
+    "react": "^17.0.0",
     "react-docgen-typescript-loader": "3.7.2",
-    "react-dom": "^16.9.0",
+    "react-dom": "^17.0.0",
     "react-github-button": "^0.1.10",
     "react-markdown": "^4.3.1",
     "react-spring": "^9.2.0",

diff --git a/packages/visx-demo/src/sandboxes/template/package.json b/packages/visx-demo/src/sandboxes/template/package.json
@@ -5,11 +5,11 @@
   "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "@visx/responsive": "latest",
-    "react": "^16",
-    "react-dom": "^16",
+    "react": "^17",
+    "react-dom": "^17",
     "react-scripts-ts": "3.1.0",
     "typescript": "^3"
   },

diff --git a/packages/visx-demo/src/sandboxes/visx-annotation/package.json b/packages/visx-demo/src/sandboxes/visx-annotation/package.json
@@ -5,16 +5,16 @@
   "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "@visx/annotation": "latest",
     "@visx/mock-data": "latest",
     "@visx/responsive": "latest",
     "@visx/scale": "latest",
     "@visx/shape": "latest",
     "d3-array": "^2.8.0",
-    "react": "^16",
-    "react-dom": "^16",
+    "react": "^17",
+    "react-dom": "^17",
     "react-scripts-ts": "3.1.0",
     "typescript": "^3"
   },

diff --git a/packages/visx-demo/src/sandboxes/visx-area/package.json b/packages/visx-demo/src/sandboxes/visx-area/package.json
@@ -5,8 +5,8 @@
   "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "@visx/curve": "latest",
     "@visx/event": "latest",
     "@visx/gradient": "latest",
@@ -18,8 +18,8 @@
     "@visx/tooltip": "latest",
     "d3-array": "^2.4.0",
     "d3-time-format": "2.2.3",
-    "react": "^16.8",
-    "react-dom": "^16.8",
+    "react": "^17",
+    "react-dom": "^17",
     "react-scripts-ts": "3.1.0",
     "typescript": "^3"
   },

diff --git a/packages/visx-demo/src/sandboxes/visx-axis/package.json b/packages/visx-demo/src/sandboxes/visx-axis/package.json
@@ -6,8 +6,8 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/d3-time-format": "2.1.1",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "@visx/axis": "latest",
     "@visx/curve": "latest",
     "@visx/gradient": "latest",
@@ -19,8 +19,8 @@
     "@visx/shape": "latest",
     "@visx/scale": "latest",
     "d3-time-format": "^2.2.3",
-    "react": "^16",
-    "react-dom": "^16",
+    "react": "^17",
+    "react-dom": "^17",
     "react-scripts-ts": "3.1.0",
     "react-spring": "^9.2.0",
     "typescript": "^3"

diff --git a/packages/visx-demo/src/sandboxes/visx-bargroup-horizontal/package.json b/packages/visx-demo/src/sandboxes/visx-bargroup-horizontal/package.json
@@ -5,17 +5,17 @@
   "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "@visx/axis": "latest",
     "@visx/group": "latest",
     "@visx/mock-data": "latest",
     "@visx/responsive": "latest",
     "@visx/scale": "latest",
     "@visx/shape": "latest",
     "d3-time-format": "^2.2.3",
-    "react": "^16",
-    "react-dom": "^16",
+    "react": "^17",
+    "react-dom": "^17",
     "react-scripts-ts": "3.1.0",
     "typescript": "^3"
   },