diff --git a/package.json b/package.json index f07705249..e0f95fdaf 100644 --- 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 index 934dbf111..964e86a11 100644 --- 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 index 6505678fe..e5ce386c0 100644 --- 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('', () => { return null; } - mount( + render( , diff --git a/packages/visx-axis/package.json b/packages/visx-axis/package.json index ad0e684a9..6580ae7b7 100644 --- 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 index 07a0e4f4c..21c319e7a 100644 --- 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 index e3695c4df..57f753625 100644 --- 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 ( +
+
getRects?.()}> + {children} + {JSON.stringify(otherProps)} +
+
+ ); +} + 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 = () =>
; - const HOC = withBoundingRects(Component); - const wrapper = mount(); - 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(); + + // 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 = () =>
; - const HOC = withBoundingRects(Component); + const HOC = withBoundingRects(BoundingRectsComponent); // @ts-ignore - const wrapper = mount(); - const RenderedComponent = wrapper.find(Component); - expect(RenderedComponent.prop('bananas')).toBe('are yellow'); + const { getByText } = render(); + 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(); - const RenderedComponent = wrapper.find(Component); - expect(RenderedComponent.prop('rect')).toBeUndefined(); - expect(RenderedComponent.prop('parentRect')).toBeUndefined(); + const { container } = render(); + 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(); - 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(); + 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 index 8d4bdab5d..aed856b19 100644 --- 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 index 2d2f0237a..815c3e3d0 100644 --- 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 index 8abf69e24..a30141f9a 100644 --- 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 index 881865f0e..f8c3b3d45 100644 --- 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 index ad41f6fea..bcdb06c1f 100644 --- 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 index b8195f5e6..d670f9d84 100644 --- 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 index 881b9a4bc..15e947182 100644 --- 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 index 357b50c3e..a36544ad9 100644 --- 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 index b6b868cef..b246a4fc8 100644 --- a/packages/visx-demo/src/sandboxes/visx-bargroup-horizontal/package.json +++ b/packages/visx-demo/src/sandboxes/visx-bargroup-horizontal/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/axis": "latest", "@visx/group": "latest", "@visx/mock-data": "latest", @@ -14,8 +14,8 @@ "@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" }, diff --git a/packages/visx-demo/src/sandboxes/visx-bargroup/package.json b/packages/visx-demo/src/sandboxes/visx-bargroup/package.json index e776f11a6..df4f4f562 100644 --- a/packages/visx-demo/src/sandboxes/visx-bargroup/package.json +++ b/packages/visx-demo/src/sandboxes/visx-bargroup/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/axis": "latest", "@visx/group": "latest", "@visx/mock-data": "latest", @@ -14,8 +14,8 @@ "@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" }, diff --git a/packages/visx-demo/src/sandboxes/visx-bars/package.json b/packages/visx-demo/src/sandboxes/visx-bars/package.json index 24734e539..2b595f12b 100644 --- a/packages/visx-demo/src/sandboxes/visx-bars/package.json +++ b/packages/visx-demo/src/sandboxes/visx-bars/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/gradient": "latest", "@visx/group": "latest", "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/shape": "latest", - "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-barstack-horizontal/package.json b/packages/visx-demo/src/sandboxes/visx-barstack-horizontal/package.json index 16fb8b40c..ad79d8b52 100644 --- a/packages/visx-demo/src/sandboxes/visx-barstack-horizontal/package.json +++ b/packages/visx-demo/src/sandboxes/visx-barstack-horizontal/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/axis": "latest", "@visx/grid": "latest", "@visx/group": "latest", @@ -17,8 +17,8 @@ "@visx/shape": "latest", "@visx/tooltip": "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" }, diff --git a/packages/visx-demo/src/sandboxes/visx-barstack/package.json b/packages/visx-demo/src/sandboxes/visx-barstack/package.json index c234baa91..e8d3c292b 100644 --- a/packages/visx-demo/src/sandboxes/visx-barstack/package.json +++ b/packages/visx-demo/src/sandboxes/visx-barstack/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/axis": "latest", "@visx/event": "latest", "@visx/grid": "latest", @@ -18,8 +18,8 @@ "@visx/shape": "latest", "@visx/tooltip": "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" }, diff --git a/packages/visx-demo/src/sandboxes/visx-brush/package.json b/packages/visx-demo/src/sandboxes/visx-brush/package.json index 91bb574ab..7ca6f930f 100644 --- a/packages/visx-demo/src/sandboxes/visx-brush/package.json +++ b/packages/visx-demo/src/sandboxes/visx-brush/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/axis": "latest", "@visx/brush": "latest", "@visx/curve": "latest", @@ -18,8 +18,8 @@ "@visx/scale": "latest", "@visx/shape": "latest", "d3-array": "^2.4.0", - "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-chord/package.json b/packages/visx-demo/src/sandboxes/visx-chord/package.json index cd412345f..0498ab8d6 100644 --- a/packages/visx-demo/src/sandboxes/visx-chord/package.json +++ b/packages/visx-demo/src/sandboxes/visx-chord/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/chord": "latest", "@visx/gradient": "latest", "@visx/group": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/shape": "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-curve/package.json b/packages/visx-demo/src/sandboxes/visx-curve/package.json index c45a5839f..56783281f 100644 --- a/packages/visx-demo/src/sandboxes/visx-curve/package.json +++ b/packages/visx-demo/src/sandboxes/visx-curve/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/gradient": "latest", "@visx/group": "latest", @@ -16,8 +16,8 @@ "@visx/scale": "latest", "@visx/shape": "latest", "d3-array": "^2.4.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-dendrogram/package.json b/packages/visx-demo/src/sandboxes/visx-dendrogram/package.json index bb19003c5..c3ca86171 100644 --- a/packages/visx-demo/src/sandboxes/visx-dendrogram/package.json +++ b/packages/visx-demo/src/sandboxes/visx-dendrogram/package.json @@ -5,15 +5,15 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/gradient": "latest", "@visx/group": "latest", "@visx/hierarchy": "latest", "@visx/responsive": "latest", "@visx/shape": "latest", - "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-dots/package.json b/packages/visx-demo/src/sandboxes/visx-dots/package.json index 3ee829eb8..8cf1b038d 100644 --- a/packages/visx-demo/src/sandboxes/visx-dots/package.json +++ b/packages/visx-demo/src/sandboxes/visx-dots/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/event": "latest", "@visx/gradient": "latest", "@visx/group": "latest", @@ -16,8 +16,8 @@ "@visx/shape": "latest", "@visx/tooltip": "latest", "@visx/voronoi": "latest", - "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-drag-i/package.json b/packages/visx-demo/src/sandboxes/visx-drag-i/package.json index fd4e951e4..85aa33e5e 100644 --- a/packages/visx-demo/src/sandboxes/visx-drag-i/package.json +++ b/packages/visx-demo/src/sandboxes/visx-drag-i/package.json @@ -5,15 +5,15 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/drag": "latest", "@visx/gradient": "latest", "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/scale": "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-drag-ii/package.json b/packages/visx-demo/src/sandboxes/visx-drag-ii/package.json index e65f62f8a..08dc30e44 100644 --- a/packages/visx-demo/src/sandboxes/visx-drag-ii/package.json +++ b/packages/visx-demo/src/sandboxes/visx-drag-ii/package.json @@ -5,15 +5,15 @@ "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/drag": "latest", "@visx/gradient": "latest", "@visx/responsive": "latest", "@visx/shape": "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-geo-albers-usa/package.json b/packages/visx-demo/src/sandboxes/visx-geo-albers-usa/package.json index 8adf87bc1..5279cba06 100644 --- a/packages/visx-demo/src/sandboxes/visx-geo-albers-usa/package.json +++ b/packages/visx-demo/src/sandboxes/visx-geo-albers-usa/package.json @@ -5,13 +5,13 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/geo": "latest", "@visx/responsive": "latest", "d3-geo": "^3.0.1", - "react": "^16.8", - "react-dom": "^16.8", + "react": "^17", + "react-dom": "^17", "react-scripts-ts": "3.1.0", "topojson-client": "^3.1.0", "typescript": "^3" diff --git a/packages/visx-demo/src/sandboxes/visx-geo-custom/package.json b/packages/visx-demo/src/sandboxes/visx-geo-custom/package.json index 39cbe2fed..9b3578de4 100644 --- a/packages/visx-demo/src/sandboxes/visx-geo-custom/package.json +++ b/packages/visx-demo/src/sandboxes/visx-geo-custom/package.json @@ -5,15 +5,15 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/geo": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/zoom": "latest", "d3-geo": "^1.11.9", - "react": "^16.8", - "react-dom": "^16.8", + "react": "^17", + "react-dom": "^17", "react-scripts-ts": "3.1.0", "topojson-client": "3.1.0", "typescript": "^3" diff --git a/packages/visx-demo/src/sandboxes/visx-geo-mercator/package.json b/packages/visx-demo/src/sandboxes/visx-geo-mercator/package.json index 3edc99518..82f8a1a28 100644 --- a/packages/visx-demo/src/sandboxes/visx-geo-mercator/package.json +++ b/packages/visx-demo/src/sandboxes/visx-geo-mercator/package.json @@ -5,13 +5,13 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/geo": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", - "react": "^16", - "react-dom": "^16", + "react": "^17", + "react-dom": "^17", "react-scripts-ts": "3.1.0", "topojson-client": "^3.1.0", "typescript": "^3" diff --git a/packages/visx-demo/src/sandboxes/visx-glyph/package.json b/packages/visx-demo/src/sandboxes/visx-glyph/package.json index 5160acc7a..6a2158cf7 100644 --- a/packages/visx-demo/src/sandboxes/visx-glyph/package.json +++ b/packages/visx-demo/src/sandboxes/visx-glyph/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/glyph": "latest", "@visx/group": "latest", @@ -14,8 +14,8 @@ "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/shape": "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-gradient/package.json b/packages/visx-demo/src/sandboxes/visx-gradient/package.json index bff8a3f3f..59eb2a56b 100644 --- a/packages/visx-demo/src/sandboxes/visx-gradient/package.json +++ b/packages/visx-demo/src/sandboxes/visx-gradient/package.json @@ -5,13 +5,13 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/gradient": "latest", "@visx/responsive": "latest", "@visx/shape": "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-heatmap/package.json b/packages/visx-demo/src/sandboxes/visx-heatmap/package.json index a9a4e203a..0260ab619 100644 --- a/packages/visx-demo/src/sandboxes/visx-heatmap/package.json +++ b/packages/visx-demo/src/sandboxes/visx-heatmap/package.json @@ -5,16 +5,15 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/group": "latest", "@visx/heatmap": "latest", "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/scale": "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-legend/package.json b/packages/visx-demo/src/sandboxes/visx-legend/package.json index 6b23b0094..0881f936a 100644 --- a/packages/visx-demo/src/sandboxes/visx-legend/package.json +++ b/packages/visx-demo/src/sandboxes/visx-legend/package.json @@ -5,14 +5,14 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/glyph": "latest", "@visx/legend": "latest", "@visx/scale": "latest", "d3-format": "^1.4.4", - "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-linktypes/package.json b/packages/visx-demo/src/sandboxes/visx-linktypes/package.json index 84695ed11..d774bf25d 100644 --- a/packages/visx-demo/src/sandboxes/visx-linktypes/package.json +++ b/packages/visx-demo/src/sandboxes/visx-linktypes/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/gradient": "latest", "@visx/group": "latest", "@visx/hierarchy": "latest", "@visx/responsive": "latest", "@visx/shape": "latest", "d3-shape": "1.3.7", - "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-network/package.json b/packages/visx-demo/src/sandboxes/visx-network/package.json index 8c99d4073..1b7424cb5 100644 --- a/packages/visx-demo/src/sandboxes/visx-network/package.json +++ b/packages/visx-demo/src/sandboxes/visx-network/package.json @@ -5,12 +5,12 @@ "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", "@visx/network": "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-pack/package.json b/packages/visx-demo/src/sandboxes/visx-pack/package.json index 57567b77c..ab486708d 100644 --- a/packages/visx-demo/src/sandboxes/visx-pack/package.json +++ b/packages/visx-demo/src/sandboxes/visx-pack/package.json @@ -5,15 +5,15 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/group": "latest", "@visx/hierarchy": "latest", "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/scale": "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-pattern/package.json b/packages/visx-demo/src/sandboxes/visx-pattern/package.json index f928c7365..21ea0d067 100644 --- a/packages/visx-demo/src/sandboxes/visx-pattern/package.json +++ b/packages/visx-demo/src/sandboxes/visx-pattern/package.json @@ -5,14 +5,14 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/group": "latest", "@visx/pattern": "latest", "@visx/responsive": "latest", "@visx/shape": "latest", - "react": "^16.2", - "react-dom": "^16.2", + "react": "^17", + "react-dom": "^17", "react-scripts-ts": "3.1.0", "typescript": "^3" }, diff --git a/packages/visx-demo/src/sandboxes/visx-polygons/package.json b/packages/visx-demo/src/sandboxes/visx-polygons/package.json index f2e28393f..6c6368eeb 100644 --- a/packages/visx-demo/src/sandboxes/visx-polygons/package.json +++ b/packages/visx-demo/src/sandboxes/visx-polygons/package.json @@ -5,15 +5,15 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/gradient": "latest", "@visx/group": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/shape": "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-radar/package.json b/packages/visx-demo/src/sandboxes/visx-radar/package.json index 4c3271cef..79a78a30d 100644 --- a/packages/visx-demo/src/sandboxes/visx-radar/package.json +++ b/packages/visx-demo/src/sandboxes/visx-radar/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/group": "latest", "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/point": "latest", "@visx/scale": "latest", "@visx/shape": "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-responsive/package.json b/packages/visx-demo/src/sandboxes/visx-responsive/package.json index 07c470246..52fa53210 100644 --- a/packages/visx-demo/src/sandboxes/visx-responsive/package.json +++ b/packages/visx-demo/src/sandboxes/visx-responsive/package.json @@ -6,16 +6,16 @@ "dependencies": { "@babel/runtime": "^7.8.4", "@types/d3-array": "^2.0.0", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/group": "latest", "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/shape": "latest", "d3-array": "^2.4.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-shape-line-radial/package.json b/packages/visx-demo/src/sandboxes/visx-shape-line-radial/package.json index d6c84adbf..2f5a9fb59 100644 --- a/packages/visx-demo/src/sandboxes/visx-shape-line-radial/package.json +++ b/packages/visx-demo/src/sandboxes/visx-shape-line-radial/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/axis": "latest", "@visx/curve": "latest", "@visx/gradient": "latest", @@ -16,8 +16,8 @@ "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/shape": "latest", - "react": "^16.8", - "react-dom": "^16.8", + "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-shape-pie/package.json b/packages/visx-demo/src/sandboxes/visx-shape-pie/package.json index c1a4c9384..a7b5bfad4 100644 --- a/packages/visx-demo/src/sandboxes/visx-shape-pie/package.json +++ b/packages/visx-demo/src/sandboxes/visx-shape-pie/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/gradient": "latest", "@visx/group": "latest", "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/shape": "latest", - "react": "^16.8", - "react-dom": "^16.8", + "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-shape-splitlinepath/package.json b/packages/visx-demo/src/sandboxes/visx-shape-splitlinepath/package.json index f5b623e99..8d793cf72 100644 --- a/packages/visx-demo/src/sandboxes/visx-shape-splitlinepath/package.json +++ b/packages/visx-demo/src/sandboxes/visx-shape-splitlinepath/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/curve": "latest", "@visx/gradient": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/shape": "latest", "lodash": "^4.17.21", - "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-stacked-areas/package.json b/packages/visx-demo/src/sandboxes/visx-stacked-areas/package.json index f3015728f..fe891d6a9 100644 --- a/packages/visx-demo/src/sandboxes/visx-stacked-areas/package.json +++ b/packages/visx-demo/src/sandboxes/visx-stacked-areas/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/gradient": "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" }, diff --git a/packages/visx-demo/src/sandboxes/visx-stats/package.json b/packages/visx-demo/src/sandboxes/visx-stats/package.json index 012d069ea..d4db594f9 100644 --- a/packages/visx-demo/src/sandboxes/visx-stats/package.json +++ b/packages/visx-demo/src/sandboxes/visx-stats/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/gradient": "latest", "@visx/group": "latest", "@visx/mock-data": "latest", @@ -15,8 +15,8 @@ "@visx/scale": "latest", "@visx/stats": "latest", "@visx/tooltip": "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-streamgraph/package.json b/packages/visx-demo/src/sandboxes/visx-streamgraph/package.json index 7dbe81298..bb3002f3b 100644 --- a/packages/visx-demo/src/sandboxes/visx-streamgraph/package.json +++ b/packages/visx-demo/src/sandboxes/visx-streamgraph/package.json @@ -6,16 +6,16 @@ "dependencies": { "@babel/runtime": "^7.8.4", "@types/d3-array": "^2.0.0", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/mock-data": "latest", "@visx/pattern": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", "@visx/shape": "latest", "d3-array": "^2.4.0", - "react": "^16.8", - "react-dom": "^16.8", + "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-threshold/package.json b/packages/visx-demo/src/sandboxes/visx-threshold/package.json index 76cd0d853..d78b28fa6 100644 --- a/packages/visx-demo/src/sandboxes/visx-threshold/package.json +++ b/packages/visx-demo/src/sandboxes/visx-threshold/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/axis": "latest", "@visx/curve": "latest", "@visx/grid": "latest", @@ -16,8 +16,8 @@ "@visx/scale": "latest", "@visx/shape": "latest", "@visx/threshold": "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-tooltip/package.json b/packages/visx-demo/src/sandboxes/visx-tooltip/package.json index 038c07f51..a8fb55ce8 100644 --- a/packages/visx-demo/src/sandboxes/visx-tooltip/package.json +++ b/packages/visx-demo/src/sandboxes/visx-tooltip/package.json @@ -5,12 +5,12 @@ "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", "@visx/tooltip": "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-tree/package.json b/packages/visx-demo/src/sandboxes/visx-tree/package.json index ce0866565..05bf9d8fa 100644 --- a/packages/visx-demo/src/sandboxes/visx-tree/package.json +++ b/packages/visx-demo/src/sandboxes/visx-tree/package.json @@ -5,15 +5,15 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/gradient": "latest", "@visx/group": "latest", "@visx/hierarchy": "latest", "@visx/responsive": "latest", "@visx/shape": "latest", - "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-treemap/package.json b/packages/visx-demo/src/sandboxes/visx-treemap/package.json index 086a729cf..f56594ca8 100644 --- a/packages/visx-demo/src/sandboxes/visx-treemap/package.json +++ b/packages/visx-demo/src/sandboxes/visx-treemap/package.json @@ -5,15 +5,15 @@ "private": true, "dependencies": { "@babel/runtime": "^7.8.4", - "@types/react": "^16", - "@types/react-dom": "^16", + "@types/react": "^17", + "@types/react-dom": "^17", "@visx/group": "latest", "@visx/hierarchy": "latest", "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", - "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-voronoi/package.json b/packages/visx-demo/src/sandboxes/visx-voronoi/package.json index 05baae42c..bea848d64 100644 --- a/packages/visx-demo/src/sandboxes/visx-voronoi/package.json +++ b/packages/visx-demo/src/sandboxes/visx-voronoi/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/clip-path": "latest", "@visx/event": "latest", "@visx/gradient": "latest", @@ -14,8 +14,8 @@ "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/voronoi": "latest", - "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-xychart/package.json b/packages/visx-demo/src/sandboxes/visx-xychart/package.json index 961066f82..8cf43ddc9 100644 --- a/packages/visx-demo/src/sandboxes/visx-xychart/package.json +++ b/packages/visx-demo/src/sandboxes/visx-xychart/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": "1.0.0", "@visx/glyph": "latest", "@visx/mock-data": "latest", @@ -14,8 +14,8 @@ "@visx/react-spring": "latest", "@visx/responsive": "latest", "@visx/xychart": "latest", - "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-zoom-i/package.json b/packages/visx-demo/src/sandboxes/visx-zoom-i/package.json index d7274a9c3..0d3333ecf 100644 --- a/packages/visx-demo/src/sandboxes/visx-zoom-i/package.json +++ b/packages/visx-demo/src/sandboxes/visx-zoom-i/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/clip-path": "latest", "@visx/event": "latest", "@visx/mock-data": "latest", @@ -14,8 +14,8 @@ "@visx/scale": "latest", "@visx/zoom": "latest", "d3-scale-chromatic": "^1.5.0", - "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-drag/package.json b/packages/visx-drag/package.json index a3e29e6f0..7e4cd328c 100644 --- a/packages/visx-drag/package.json +++ b/packages/visx-drag/package.json @@ -31,7 +31,7 @@ "access": "public" }, "peerDependencies": { - "react": "^16.8.0-0" + "react": "^16.8.0-0 || ^17.0.0-0" }, "dependencies": { "@types/react": "*", diff --git a/packages/visx-drag/test/useDrag.test.tsx b/packages/visx-drag/test/useDrag.test.tsx index 7d4996c7e..5cd7b8295 100644 --- a/packages/visx-drag/test/useDrag.test.tsx +++ b/packages/visx-drag/test/useDrag.test.tsx @@ -1,5 +1,5 @@ import React, { useRef } from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { useDrag } from '../src'; import { UseDragOptions } from '../lib/useDrag'; @@ -26,7 +26,7 @@ describe('useDrag', () => { return null; } - mount(); + render(); }); test('should update drag state when useDrag options change', () => { @@ -46,7 +46,7 @@ describe('useDrag', () => { return null; } - const wrapper = mount(); - wrapper.setProps(options2); + const { rerender } = render(); + rerender(); }); }); diff --git a/packages/visx-geo/package.json b/packages/visx-geo/package.json index bff9d8991..8258e3007 100644 --- a/packages/visx-geo/package.json +++ b/packages/visx-geo/package.json @@ -42,7 +42,7 @@ "topojson-client": "^3.0.0" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" }, "publishConfig": { "access": "public" diff --git a/packages/visx-glyph/package.json b/packages/visx-glyph/package.json index ee362df96..230c87e9b 100644 --- a/packages/visx-glyph/package.json +++ b/packages/visx-glyph/package.json @@ -31,7 +31,7 @@ "access": "public" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" }, "dependencies": { "@types/d3-shape": "^1.3.1", diff --git a/packages/visx-glyph/test/Cross.test.tsx b/packages/visx-glyph/test/Cross.test.tsx index c8accd2e2..55ec1e72a 100644 --- a/packages/visx-glyph/test/Cross.test.tsx +++ b/packages/visx-glyph/test/Cross.test.tsx @@ -29,7 +29,7 @@ describe('', () => { shallow({fn}); const args = fn.mock.calls[0][0]; const keys = Object.keys(args); - expect(keys.includes('path')).toEqual(true); + expect(keys).toContain('path'); }); test('it should take a size prop as a number', () => { diff --git a/packages/visx-gradient/package.json b/packages/visx-gradient/package.json index a93d00e02..4f80587fd 100644 --- a/packages/visx-gradient/package.json +++ b/packages/visx-gradient/package.json @@ -32,7 +32,7 @@ "prop-types": "^15.5.7" }, "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-gradient/test/Gradients.test.tsx b/packages/visx-gradient/test/Gradients.test.tsx index e16e1dbce..74524587f 100644 --- a/packages/visx-gradient/test/Gradients.test.tsx +++ b/packages/visx-gradient/test/Gradients.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { GradientDarkgreenGreen, @@ -21,7 +21,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , @@ -37,7 +37,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , @@ -53,7 +53,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , @@ -69,7 +69,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , @@ -85,7 +85,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , @@ -101,7 +101,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , @@ -117,7 +117,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , @@ -133,7 +133,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , @@ -149,7 +149,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , @@ -165,7 +165,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , diff --git a/packages/visx-gradient/test/LinearGradient.test.tsx b/packages/visx-gradient/test/LinearGradient.test.tsx index f5eae333c..8d9f055f6 100644 --- a/packages/visx-gradient/test/LinearGradient.test.tsx +++ b/packages/visx-gradient/test/LinearGradient.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { LinearGradient } from '../src'; @@ -10,7 +10,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , diff --git a/packages/visx-gradient/test/RadialGradient.test.tsx b/packages/visx-gradient/test/RadialGradient.test.tsx index d0529c688..660e6d6d3 100644 --- a/packages/visx-gradient/test/RadialGradient.test.tsx +++ b/packages/visx-gradient/test/RadialGradient.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { RadialGradient } from '../src'; @@ -10,7 +10,7 @@ describe('', () => { test('it should render without crashing', () => { expect(() => - mount( + render( , diff --git a/packages/visx-grid/package.json b/packages/visx-grid/package.json index 5c64d4328..0589638da 100644 --- a/packages/visx-grid/package.json +++ b/packages/visx-grid/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-grid/test/GridPolar.test.tsx b/packages/visx-grid/test/GridPolar.test.tsx index 130e4d166..6aaccbdc8 100644 --- a/packages/visx-grid/test/GridPolar.test.tsx +++ b/packages/visx-grid/test/GridPolar.test.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { scaleLinear } from '@visx/scale'; import { GridPolar, GridAngle, GridRadial } from '../src'; -import { scaleLinear } from '../../visx-scale'; const gridProps = { innerRadius: 0, diff --git a/packages/visx-grid/test/GridRadial.test.tsx b/packages/visx-grid/test/GridRadial.test.tsx index 7f08545d8..24aada1db 100644 --- a/packages/visx-grid/test/GridRadial.test.tsx +++ b/packages/visx-grid/test/GridRadial.test.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { shallow } from 'enzyme'; import { Arc } from '@visx/shape'; +import { scaleLinear } from '@visx/scale'; import { GridRadial } from '../src'; -import { scaleLinear } from '../../visx-scale'; const gridProps = { innerRadius: 0, diff --git a/packages/visx-group/package.json b/packages/visx-group/package.json index 530fb8cdd..96baab693 100644 --- a/packages/visx-group/package.json +++ b/packages/visx-group/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/react": "*", diff --git a/packages/visx-heatmap/package.json b/packages/visx-heatmap/package.json index ea8ea3507..6bc159417 100644 --- a/packages/visx-heatmap/package.json +++ b/packages/visx-heatmap/package.json @@ -31,7 +31,7 @@ "access": "public" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" }, "dependencies": { "@types/react": "*", diff --git a/packages/visx-hierarchy/package.json b/packages/visx-hierarchy/package.json index 916a89b08..9c8d7103e 100644 --- a/packages/visx-hierarchy/package.json +++ b/packages/visx-hierarchy/package.json @@ -39,6 +39,6 @@ "prop-types": "^15.6.1" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" } } diff --git a/packages/visx-legend/package.json b/packages/visx-legend/package.json index 71de11a4b..2a9af8e0f 100644 --- a/packages/visx-legend/package.json +++ b/packages/visx-legend/package.json @@ -28,7 +28,7 @@ }, "homepage": "https://github.com/airbnb/visx#readme", "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" }, "publishConfig": { "access": "public" diff --git a/packages/visx-marker/package.json b/packages/visx-marker/package.json index 4822e7fff..8a21c3e9d 100644 --- a/packages/visx-marker/package.json +++ b/packages/visx-marker/package.json @@ -35,7 +35,7 @@ "prop-types": "^15.6.2" }, "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-network/package.json b/packages/visx-network/package.json index 94e22cfcb..0a2567525 100644 --- a/packages/visx-network/package.json +++ b/packages/visx-network/package.json @@ -26,7 +26,7 @@ "prop-types": "^15.6.2" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" }, "publishConfig": { "access": "public" diff --git a/packages/visx-pattern/package.json b/packages/visx-pattern/package.json index ec7a5eccd..74f7818a8 100644 --- a/packages/visx-pattern/package.json +++ b/packages/visx-pattern/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-react-spring/package.json b/packages/visx-react-spring/package.json index 79cd1d908..cfe423cd5 100644 --- a/packages/visx-react-spring/package.json +++ b/packages/visx-react-spring/package.json @@ -38,7 +38,7 @@ "access": "public" }, "peerDependencies": { - "react": "^16.3.0-0", + "react": "^16.3.0-0 || ^17.0.0", "react-spring": "^9.2.0" }, "dependencies": { diff --git a/packages/visx-responsive/package.json b/packages/visx-responsive/package.json index 6146201f3..acc45790e 100644 --- a/packages/visx-responsive/package.json +++ b/packages/visx-responsive/package.json @@ -35,7 +35,7 @@ "resize-observer-polyfill": "1.5.1" }, "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-responsive/test/ScaleSVG.test.tsx b/packages/visx-responsive/test/ScaleSVG.test.tsx index 4c9782bcf..dfafa09c8 100644 --- a/packages/visx-responsive/test/ScaleSVG.test.tsx +++ b/packages/visx-responsive/test/ScaleSVG.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { mount } from 'enzyme'; - +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { ScaleSVG } from '../src'; describe('', () => { @@ -9,14 +9,9 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line require-await - return new Promise(done => { - const refCallback = (n: SVGSVGElement) => { - expect(n.tagName).toEqual('svg'); - done(); - }; - - mount(); - }); + const fakeRef = React.createRef(); + const { container } = render(); + const SVGElement = container.querySelector('svg'); + expect(fakeRef.current).toContainElement(SVGElement); }); }); diff --git a/packages/visx-responsive/test/withParentSize.test.tsx b/packages/visx-responsive/test/withParentSize.test.tsx index 725123382..97e37ef08 100644 --- a/packages/visx-responsive/test/withParentSize.test.tsx +++ b/packages/visx-responsive/test/withParentSize.test.tsx @@ -1,39 +1,27 @@ import React from 'react'; -import { mount } from 'enzyme'; - +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { withParentSize } from '../src'; -describe('withParentSize', () => { - beforeAll(() => { - // mock getBoundingClientRect - Element.prototype.getBoundingClientRect = jest.fn(() => ({ - width: 220, - height: 120, - top: 0, - left: 0, - bottom: 0, - right: 0, - x: 0, - y: 0, - toJSON: () => '', - })); - }); +type ComponentProps = { + parentWidth?: number; + parentHeight?: number; +}; +function Component({ parentWidth, parentHeight }: ComponentProps) { + return
; +} + +describe('withParentSize', () => { test('it should be defined', () => { expect(withParentSize).toBeDefined(); }); test('it chould pass parentWidth and parentHeight props to its child', () => { - const Component = () =>
; const HOC = withParentSize(Component); - const wrapper = mount(); + const { getByTestId } = render(); - // wait for the resizeObserver to run - setTimeout(() => { - const RenderedComponent = wrapper.find(Component); - expect(Element.prototype.getBoundingClientRect).toHaveBeenCalled(); - expect(RenderedComponent.prop('parentWidth')).toBe(220); - expect(RenderedComponent.prop('parentHeight')).toBe(120); - }, 0); + const RenderedComponent = getByTestId('Component'); + expect(RenderedComponent).toHaveStyle('width: 200px; height: 200px'); }); }); diff --git a/packages/visx-shape/package.json b/packages/visx-shape/package.json index 79b8ddee2..7a065722b 100644 --- a/packages/visx-shape/package.json +++ b/packages/visx-shape/package.json @@ -35,7 +35,7 @@ "prop-types": "^15.5.10" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" }, "publishConfig": { "access": "public" diff --git a/packages/visx-shape/test/Arc.test.tsx b/packages/visx-shape/test/Arc.test.tsx index 112579f85..475f14156 100644 --- a/packages/visx-shape/test/Arc.test.tsx +++ b/packages/visx-shape/test/Arc.test.tsx @@ -1,9 +1,9 @@ import React from 'react'; import mockConsole from 'jest-mock-console'; -import { shallow, mount } from 'enzyme'; - +import { render } from '@testing-library/react'; import { Arc } from '../src'; import { ArcProps } from '../src/shapes/Arc'; +import '@testing-library/jest-dom'; interface Datum { data: number; @@ -23,11 +23,8 @@ const data: Datum = { padAngle: 0, }; -const ArcWrapper = (overrideProps: Partial> = { data }) => - shallow(); - const ArcChildren = ({ children, ...restProps }: Partial>) => - shallow( + render( {children} , @@ -38,25 +35,36 @@ describe('', () => { expect(Arc).toBeDefined(); }); - it('should have the .visx-arcs-group class', () => { - expect(ArcWrapper().prop('className')).toBe('visx-arc'); - }); - - it('should render a path', () => { - expect(ArcWrapper().find('path')).toHaveLength(1); + it('should render a path that has the .visx-arcs-group class', () => { + const { container } = render( + + + , + ); + const PathElement = container.querySelector('path'); + expect(PathElement).toBeInTheDocument(); + expect(PathElement).toHaveClass('visx-arc'); }); it('should warn and render null when none of data, radii, and angles are passed', () => { const restoreConsole = mockConsole(); - expect(ArcWrapper({}).find('path')).toHaveLength(0); + const { container } = render( + + + , + ); + expect(container.querySelector('path')).not.toBeInTheDocument(); expect(console.warn).toHaveBeenCalledTimes(1); restoreConsole(); }); it('should render a path without data when radii + angles are defined', () => { - expect( - ArcWrapper({ startAngle: 0, endAngle: 6, innerRadius: 5, outerRadius: 10 }).find('path'), - ).toHaveLength(1); + const { container } = render( + + + , + ); + expect(container.querySelector('path')).toBeInTheDocument(); }); it('should take a children as function prop', () => { @@ -207,17 +215,14 @@ describe('', () => { }); it('should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGPathElement) => { - expect(ref.tagName).toMatch('path'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + + const { container } = render( + + + , + ); + const PathElement = container.querySelector('path'); + expect(fakeRef.current).toContainElement(PathElement); }); }); diff --git a/packages/visx-shape/test/Area.test.tsx b/packages/visx-shape/test/Area.test.tsx index b97927c07..24011aa2d 100644 --- a/packages/visx-shape/test/Area.test.tsx +++ b/packages/visx-shape/test/Area.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Area } from '../src'; import { AreaProps } from '../src/shapes/Area'; @@ -40,18 +42,14 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGPathElement) => { - expect(ref.tagName).toMatch('path'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + const { container } = render( + + + , + ); + const PathElement = container.querySelector('path'); + expect(fakeRef.current).toContainElement(PathElement); }); test('it should take a children as function prop', () => { diff --git a/packages/visx-shape/test/AreaClosed.test.tsx b/packages/visx-shape/test/AreaClosed.test.tsx index 779b23e4d..7002779a9 100644 --- a/packages/visx-shape/test/AreaClosed.test.tsx +++ b/packages/visx-shape/test/AreaClosed.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { scaleLinear } from '@visx/scale'; import { AreaClosed } from '../src'; @@ -41,17 +43,14 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - return new Promise(done => { - const refCallback = (ref: SVGPathElement) => { - expect(ref.tagName).toMatch('path'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + const { container } = render( + + + , + ); + const PathElement = container.querySelector('path'); + expect(fakeRef.current).toContainElement(PathElement); }); test('it should take a children as function prop', () => { diff --git a/packages/visx-shape/test/Bar.test.tsx b/packages/visx-shape/test/Bar.test.tsx index a5c185853..ba0617544 100644 --- a/packages/visx-shape/test/Bar.test.tsx +++ b/packages/visx-shape/test/Bar.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Bar } from '../src'; @@ -19,17 +21,13 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGRectElement) => { - expect(ref.tagName).toMatch('rect'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + const { container } = render( + + + , + ); + const RectElement = container.querySelector('rect'); + expect(fakeRef.current).toContainElement(RectElement); }); }); diff --git a/packages/visx-shape/test/BarRounded.test.tsx b/packages/visx-shape/test/BarRounded.test.tsx index 776d36923..32e031d13 100644 --- a/packages/visx-shape/test/BarRounded.test.tsx +++ b/packages/visx-shape/test/BarRounded.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { BarRounded } from '../src'; @@ -20,18 +22,14 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGPathElement) => { - expect(ref.tagName).toMatch('path'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + const { container } = render( + + + , + ); + const PathElement = container.querySelector('path'); + expect(fakeRef.current).toContainElement(PathElement); }); test('it should set top left corner radius', () => { diff --git a/packages/visx-shape/test/Circle.test.tsx b/packages/visx-shape/test/Circle.test.tsx index c7b77eebf..05b6aca42 100644 --- a/packages/visx-shape/test/Circle.test.tsx +++ b/packages/visx-shape/test/Circle.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Circle } from '../src'; @@ -19,17 +21,13 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGCircleElement) => { - expect(ref.tagName).toMatch('circle'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + const { container } = render( + + + , + ); + const CircleElement = container.querySelector('circle'); + expect(fakeRef.current).toContainElement(CircleElement); }); }); diff --git a/packages/visx-shape/test/Line.test.tsx b/packages/visx-shape/test/Line.test.tsx index 715baa919..d0df3ff0c 100644 --- a/packages/visx-shape/test/Line.test.tsx +++ b/packages/visx-shape/test/Line.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; - +import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { Line } from '../src'; const LineWrapper = (restProps = {}) => shallow(); @@ -19,18 +20,14 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGLineElement) => { - expect(ref.tagName).toMatch('line'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + const { container } = render( + + + , + ); + const LineElement = container.querySelector('line'); + expect(fakeRef.current).toContainElement(LineElement); }); test('it should set shapeRendering to auto if not rectilinear', () => { diff --git a/packages/visx-shape/test/LinePath.test.tsx b/packages/visx-shape/test/LinePath.test.tsx index a570be8fb..b22ac0ade 100644 --- a/packages/visx-shape/test/LinePath.test.tsx +++ b/packages/visx-shape/test/LinePath.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { LinePath } from '../src'; import { LinePathProps } from '../src/shapes/LinePath'; @@ -54,17 +56,14 @@ describe('', () => { }); it('should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGPathElement) => { - expect(ref.tagName).toMatch('path'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + + const { container } = render( + + + , + ); + const PathElement = container.querySelector('path'); + expect(fakeRef.current).toContainElement(PathElement); }); }); diff --git a/packages/visx-shape/test/LineRadial.test.tsx b/packages/visx-shape/test/LineRadial.test.tsx index e0c69de2e..97c01112e 100644 --- a/packages/visx-shape/test/LineRadial.test.tsx +++ b/packages/visx-shape/test/LineRadial.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; - +import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { LineRadial } from '../src'; import { LineRadialProps } from '../src/shapes/LineRadial'; @@ -50,17 +51,13 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGPathElement) => { - expect(ref.tagName).toMatch('path'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + const { container } = render( + + + , + ); + const PathElement = container.querySelector('path'); + expect(fakeRef.current).toContainElement(PathElement); }); }); diff --git a/packages/visx-shape/test/LinkHorizontal.test.tsx b/packages/visx-shape/test/LinkHorizontal.test.tsx index abdb67685..8c4299046 100644 --- a/packages/visx-shape/test/LinkHorizontal.test.tsx +++ b/packages/visx-shape/test/LinkHorizontal.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { mount } from 'enzyme'; - +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { hierarchy } from 'd3-hierarchy'; import { LinkHorizontal } from '../src'; @@ -23,17 +23,13 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGPathElement) => { - expect(ref.tagName).toMatch('path'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + const { container } = render( + + + , + ); + const PathElement = container.querySelector('path'); + expect(fakeRef.current).toContainElement(PathElement); }); }); diff --git a/packages/visx-shape/test/LinkVertical.test.tsx b/packages/visx-shape/test/LinkVertical.test.tsx index 9b6b4f979..0c9e6a8e2 100644 --- a/packages/visx-shape/test/LinkVertical.test.tsx +++ b/packages/visx-shape/test/LinkVertical.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { mount } from 'enzyme'; - +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { hierarchy } from 'd3-hierarchy'; import { LinkVertical } from '../src'; @@ -22,17 +22,14 @@ describe('', () => { }); test('it should expose its ref via an innerRef prop', () => { - // eslint-disable-next-line jest/no-test-return-statement - return new Promise(done => { - const refCallback = (ref: SVGPathElement) => { - expect(ref.tagName).toMatch('path'); - done(); - }; - mount( - - - , - ); - }); + const fakeRef = React.createRef(); + + const { container } = render( + + + , + ); + const PathElement = container.querySelector('path'); + expect(fakeRef.current).toContainElement(PathElement); }); }); diff --git a/packages/visx-stats/package.json b/packages/visx-stats/package.json index e0cbb35e7..85c2d1657 100644 --- a/packages/visx-stats/package.json +++ b/packages/visx-stats/package.json @@ -37,7 +37,7 @@ "prop-types": "^15.5.10" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" }, "publishConfig": { "access": "public" diff --git a/packages/visx-text/package.json b/packages/visx-text/package.json index 5fe416875..853654d4a 100644 --- a/packages/visx-text/package.json +++ b/packages/visx-text/package.json @@ -36,7 +36,7 @@ "reduce-css-calc": "^1.3.0" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" }, "publishConfig": { "access": "public" diff --git a/packages/visx-text/test/Text.test.tsx b/packages/visx-text/test/Text.test.tsx index f025c67ab..89278fdc2 100644 --- a/packages/visx-text/test/Text.test.tsx +++ b/packages/visx-text/test/Text.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { renderHook } from '@testing-library/react-hooks'; +import '@testing-library/jest-dom'; import { Text, getStringWidth, useText } from '../src'; import { addMock, removeMock } from './svgMock'; @@ -18,11 +19,6 @@ describe('', () => { expect(Text).toBeDefined(); }); - it('should not throw', () => { - expect(() => shallow()).not.toThrow(); - expect(() => shallow(Hi)).not.toThrow(); - }); - it('Does not wrap long text if enough width', () => { const { result: { @@ -87,54 +83,56 @@ describe('', () => { }); it('Render 0 success when specify the width', () => { - const wrapper = mount( + const { container } = render( 0 , ); - console.log('wrapper', wrapper.text()); - expect(wrapper.text()).toContain('0'); + const text = container.querySelector('tspan'); + expect(text?.textContent).toEqual('0'); }); it('Render 0 success when not specify the width', () => { - const wrapper = mount( + const { container } = render( 0 , ); - - expect(wrapper.text()).toContain('0'); + const text = container.querySelector('tspan'); + expect(text?.textContent).toEqual('0'); }); it('Render text when x or y is a percentage', () => { - const wrapper = mount( + const { container } = render( anything , ); - - expect(wrapper.text()).toContain('anything'); + const text = container.querySelector('tspan'); + expect(text?.textContent).toEqual('anything'); }); it("Don't Render text when x or y is NaN", () => { - const wrapperNan = mount( + const { container } = render( anything , ); - - expect(wrapperNan.text()).not.toContain('anything'); + const text = container.querySelector('tspan'); + expect(text).toBeNull(); }); it('Render text when children 0 is a number', () => { - const wrapper = mount( + const num = 0; + const { container } = render( - {0} + {num} , ); - expect(wrapper.text()).toContain('0'); + const text = container.querySelector('tspan'); + expect(text?.textContent).toEqual('0'); }); it('Applies transform if scaleToFit is set', () => { @@ -154,42 +152,38 @@ describe('', () => { }); it('Applies transform if angle is given', () => { - const wrapper = shallow( + const { container } = render( This is really long text , ); - const text = wrapper.find('text').first(); - expect(text.prop('transform')).toBe('rotate(45, 0, 0)'); + const text = container.querySelector('text'); + expect(text).toHaveAttribute('transform', 'rotate(45, 0, 0)'); }); it('Offsets vertically if verticalAnchor is given', () => { - let wrapper = mount( + let { container } = render( This is really long text , ); - const getVerticalOffset = (w: typeof wrapper) => - w - .find('tspan') - .first() - .prop('dy'); + const getVerticalOffset = (c: HTMLElement) => c?.querySelector('tspan')?.getAttribute('dy'); - expect(getVerticalOffset(wrapper)).toBe('-1em'); + expect(getVerticalOffset(container)).toBe('-1em'); - wrapper = mount( + ({ container } = render( This is really long text , - ); - expect(getVerticalOffset(wrapper)).toBe('-0.145em'); + )); + expect(getVerticalOffset(container)).toBe('-0.145em'); - wrapper = mount( + ({ container } = render( This is really long text , - ); - expect(getVerticalOffset(wrapper)).toBe('0.71em'); + )); + expect(getVerticalOffset(container)).toBe('0.71em'); }); }); diff --git a/packages/visx-threshold/package.json b/packages/visx-threshold/package.json index 45ec280a0..cd028142d 100644 --- a/packages/visx-threshold/package.json +++ b/packages/visx-threshold/package.json @@ -31,7 +31,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-tooltip/package.json b/packages/visx-tooltip/package.json index b6b8f10b4..7f73975e2 100644 --- a/packages/visx-tooltip/package.json +++ b/packages/visx-tooltip/package.json @@ -35,8 +35,8 @@ "react-use-measure": "^2.0.4" }, "peerDependencies": { - "react": "^16.8.0-0", - "react-dom": "^16.8.0-0" + "react": "^16.8.0-0 || ^17.0.0-0", + "react-dom": "^16.8.0-0 || ^17.0.0-0" }, "publishConfig": { "access": "public" diff --git a/packages/visx-visx/package.json b/packages/visx-visx/package.json index e62cbb5ec..d777b84e0 100644 --- a/packages/visx-visx/package.json +++ b/packages/visx-visx/package.json @@ -30,7 +30,7 @@ "access": "public" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" }, "dependencies": { "@visx/annotation": "1.18.1", diff --git a/packages/visx-voronoi/package.json b/packages/visx-voronoi/package.json index cac679139..f6f94e3e9 100644 --- a/packages/visx-voronoi/package.json +++ b/packages/visx-voronoi/package.json @@ -38,6 +38,6 @@ "prop-types": "^15.6.1" }, "peerDependencies": { - "react": "^16.3.0-0" + "react": "^16.3.0-0 || ^17.0.0-0" } } diff --git a/packages/visx-xychart/package.json b/packages/visx-xychart/package.json index 2b549b185..61cab1af0 100644 --- a/packages/visx-xychart/package.json +++ b/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": { diff --git a/packages/visx-xychart/test/components/Annotation.test.tsx b/packages/visx-xychart/test/components/Annotation.test.tsx index ac21ab1bd..beb6510c5 100644 --- a/packages/visx-xychart/test/components/Annotation.test.tsx +++ b/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( {children} , @@ -22,20 +19,22 @@ describe('', () => { expect(Annotation).toBeDefined(); }); it('should render a VxAnnotation', () => { - const wrapper = setup( + const { getByText } = setup( {'test'} , ); - expect(wrapper.find(VxAnnotation)).toHaveLength(1); + expect(getByText('test')).toBeInTheDocument(); }); it('should render a VxEditableAnnotation when editable=true', () => { - const wrapper = setup( + const { container } = setup( {'test'} , ); - 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('', () => { expect(AnimatedAnnotation).toBeDefined(); }); it('should render a VxAnnotation', () => { - const wrapper = setup( + const { getByText } = setup( {'test'} , ); - expect(wrapper.find(VxAnnotation)).toHaveLength(1); + expect(getByText('test')).toBeInTheDocument(); }); it('should render a VxEditableAnnotation when editable=true', () => { - const wrapper = setup( + const { container } = setup( {'test'} , ); - 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'); }); }); diff --git a/packages/visx-xychart/test/components/AreaSeries.test.tsx b/packages/visx-xychart/test/components/AreaSeries.test.tsx index 9e8a39552..15c1e69f7 100644 --- a/packages/visx-xychart/test/components/AreaSeries.test.tsx +++ b/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,31 +14,33 @@ describe('', () => { }); it('should render an Area', () => { - const wrapper = mount( + const { container } = render( , ); - // @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( , ); - 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( @@ -47,34 +48,35 @@ describe('', () => { , ); - 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( , ); - // @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( {}} /> , ); - 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('', () => { expect(AnimatedAreaSeries).toBeDefined(); }); it('should render an animated.path', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find(animated.path)).toHaveLength(1); + const Path = container.querySelectorAll('path'); + expect(Path).toHaveLength(1); }); }); diff --git a/packages/visx-xychart/test/components/AreaStack.test.tsx b/packages/visx-xychart/test/components/AreaStack.test.tsx index 80aa41da2..a2acf1ef5 100644 --- a/packages/visx-xychart/test/components/AreaStack.test.tsx +++ b/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('', () => { }); it('should render Areas', () => { - const wrapper = mount( + const { container } = render( @@ -58,12 +57,12 @@ describe('', () => { , ); - // @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( @@ -73,12 +72,12 @@ describe('', () => { , ); - // @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( {}}> @@ -87,7 +86,8 @@ describe('', () => { , ); - 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('', () => { return null; } - mount( + render( @@ -165,7 +165,7 @@ describe('', () => { expect(AnimatedAreaStack).toBeDefined(); }); it('should render an animated.path', () => { - const wrapper = mount( + const { container } = render( @@ -175,6 +175,7 @@ describe('', () => { , ); - expect(wrapper.find(animated.path)).toHaveLength(2); + const Circles = container.querySelectorAll('path'); + expect(Circles).toHaveLength(2); }); }); diff --git a/packages/visx-xychart/test/components/Axis.test.tsx b/packages/visx-xychart/test/components/Axis.test.tsx index c1c5c266e..6a6e1450b 100644 --- a/packages/visx-xychart/test/components/Axis.test.tsx +++ b/packages/visx-xychart/test/components/Axis.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { mount } from 'enzyme'; -import VxAnimatedAxis from '@visx/react-spring/lib/axis/AnimatedAxis'; -import VxAxis from '@visx/axis/lib/axis/Axis'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { scaleLinear } from '@visx/scale'; import BaseAxis from '../../src/components/axis/BaseAxis'; import { Axis, AnimatedAxis, DataContext, lightTheme } from '../../src'; import getDataContext from '../mocks/getDataContext'; @@ -12,7 +12,7 @@ function setup( children: React.ReactNode, contextOverrides?: Partial>, ) { - return mount( + return render( {children} , @@ -24,7 +24,9 @@ describe('', () => { expect(Axis).toBeDefined(); }); it('should render a VxAxis', () => { - expect(setup().find(VxAxis)).toHaveLength(1); + expect( + setup().container.querySelectorAll('.visx-axis'), + ).toHaveLength(1); }); }); @@ -33,70 +35,70 @@ describe('', () => { expect(AnimatedAxis).toBeDefined(); }); it('should render a VxAnimatedAxis', () => { - expect(setup().find(VxAnimatedAxis)).toHaveLength(1); + expect( + setup().container.querySelectorAll('.visx-axis'), + ).toHaveLength(1); }); }); -const AxisComponent = (_: unknown) => null; - describe('', () => { it('should be defined', () => { expect(BaseAxis).toBeDefined(); }); - it('should use scale=xScale for orientation=top/bottom', () => { - const xScale = jest.fn(); - const axes = setup( - <> - - - , + it(' renders', () => { + const { container } = setup( + } />, + ); + const AxisComponents = container.querySelectorAll('.visx-axis'); + expect(AxisComponents).toHaveLength(1); + }); + + it('should use scale=xScale for orientation=top (or bottom)', () => { + const xScale = scaleLinear({ domain: [0, 4], range: [0, 10] }); + const { container } = setup( + } />, { xScale }, - ).find(AxisComponent); - expect(axes.at(0).prop('scale')).toBe(xScale); - expect(axes.at(1).prop('scale')).toBe(xScale); + ); + const TickLabels = container.querySelectorAll('tspan'); + expect(TickLabels[0].textContent).toEqual('0.0'); + expect(TickLabels[0]).toHaveAttribute('x', '0'); + expect(TickLabels[TickLabels.length - 1].textContent).toEqual('4.0'); + expect(TickLabels[TickLabels.length - 1]).toHaveAttribute('x', '10'); }); - it('should use scale=yScale for orientation=left/right', () => { - const yScale = jest.fn(); - const axes = setup( - <> - - - , + + it('should use scale=yScale for orientation=left (or right)', () => { + const yScale = scaleLinear({ domain: [0, 4], range: [0, 10] }); + const { container } = setup( + } />, { yScale }, - ).find(AxisComponent); - expect(axes.at(0).prop('scale')).toBe(yScale); - expect(axes.at(1).prop('scale')).toBe(yScale); + ); + const TickLabels = container.querySelectorAll('tspan'); + expect(TickLabels[0].textContent).toEqual('0.0'); + expect(TickLabels[0].parentNode).toHaveAttribute('y', '0'); + expect(TickLabels[TickLabels.length - 1].textContent).toEqual('4.0'); + expect(TickLabels[TickLabels.length - 1].parentNode).toHaveAttribute('y', '10'); }); + it('should use axis styles from context theme unless specified in props', () => { const axisStyles = lightTheme.axisStyles.x.top; - const axis = setup( + const { container } = setup( } />, - ).find(AxisComponent); - expect(axis.prop('labelProps')).toBe(axisStyles.axisLabel); - expect(axis.prop('stroke')).toBe('violet'); - expect(axis.prop('strokeWidth')).toBe(axisStyles.axisLine.strokeWidth); - expect(axis.prop('tickLength')).toBe(12345); - expect(axis.prop('tickStroke')).toBe(axisStyles.tickLine.stroke); - }); - it('should use props.tickLabelProps if passed', () => { - const tickLabelProps = jest.fn(() => ({ fill: 'visx' })); - const axis = setup( - , - ).find(AxisComponent); - const tickLabelPropsFn = axis.prop('tickLabelProps') as Function; - expect(tickLabelPropsFn()).toMatchObject({ fill: 'visx' }); - }); - it('should construct tickLabelProps from theme if props.tickLabelProps is not passed', () => { - const tickStyles = lightTheme.axisStyles.y.left.tickLabel; - const axis = setup().find( - AxisComponent, ); - const tickLabelProps = axis.prop('tickLabelProps') as Function; - expect(tickLabelProps()).toMatchObject(tickStyles); + + const VisxAxisLine = container.querySelector('.visx-axis-line'); + const VisxLine = container.querySelector('.visx-line'); + + // specified styles in the props + expect(VisxAxisLine).toHaveAttribute('stroke', '#22222'); + // tick length = y1-y2 of axis line + expect(VisxLine).toHaveAttribute('y1', '0'); + expect(VisxLine).toHaveAttribute('y2', '-12345'); + + // context theme styles + expect(VisxLine).toHaveAttribute('stroke-width', `${axisStyles.axisLine.strokeWidth}`); + expect(VisxLine).toHaveAttribute('stroke', axisStyles.tickLine.stroke); }); }); diff --git a/packages/visx-xychart/test/components/BarGroup.test.tsx b/packages/visx-xychart/test/components/BarGroup.test.tsx index 7bb1f1cfa..04ccbca43 100644 --- a/packages/visx-xychart/test/components/BarGroup.test.tsx +++ b/packages/visx-xychart/test/components/BarGroup.test.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect } from 'react'; -import { animated } from 'react-spring'; -import { mount } from 'enzyme'; +import '@testing-library/jest-dom'; +import { render } from '@testing-library/react'; import { AnimatedBarGroup, BarGroup, @@ -53,7 +53,7 @@ describe('', () => { }); it('should render rects', () => { - const wrapper = mount( + const { container } = render( @@ -63,11 +63,11 @@ describe('', () => { , ); - expect(wrapper.find('rect')).toHaveLength(4); + expect(container.querySelectorAll('rect')).toHaveLength(4); }); it('should use colorAccessor if passed', () => { - const wrapper = mount( + const { container } = render( @@ -81,15 +81,15 @@ describe('', () => { , ); - const rects = wrapper.find('rect'); - expect(rects.at(0).prop('fill')).not.toBe('banana'); - expect(rects.at(1).prop('fill')).not.toBe('banana'); - expect(rects.at(2).prop('fill')).toBe('banana'); - expect(rects.at(3).prop('fill')).not.toBe('banana'); + const rects = container.querySelectorAll('rect'); + expect(rects[0]).not.toHaveAttribute('fill', 'banana'); + expect(rects[1]).not.toHaveAttribute('fill', 'banana'); + expect(rects[2]).toHaveAttribute('fill', 'banana'); + expect(rects[3]).not.toHaveAttribute('fill', 'banana'); }); it('should not render rects with invalid x or y', () => { - const wrapper = mount( + const { container } = render( @@ -99,7 +99,7 @@ describe('', () => { , ); - expect(wrapper.find('rect')).toHaveLength(3); + expect(container.querySelectorAll('rect')).toHaveLength(3); }); it('should invoke showTooltip/hideTooltip on pointermove/pointerout', () => { @@ -146,7 +146,7 @@ describe('', () => { expect(AnimatedBarGroup).toBeDefined(); }); it('should render an animated.rect', () => { - const wrapper = mount( + const { container } = render( @@ -156,6 +156,6 @@ describe('', () => { , ); - expect(wrapper.find(animated.rect)).toHaveLength(4); + expect(container.querySelectorAll('rect')).toHaveLength(4); }); }); diff --git a/packages/visx-xychart/test/components/BarSeries.test.tsx b/packages/visx-xychart/test/components/BarSeries.test.tsx index 35707adb0..8f5a983ed 100644 --- a/packages/visx-xychart/test/components/BarSeries.test.tsx +++ b/packages/visx-xychart/test/components/BarSeries.test.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect } from 'react'; -import { animated } from 'react-spring'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { DataContext, AnimatedBarSeries, BarSeries, useEventEmitter } from '../../src'; import getDataContext from '../mocks/getDataContext'; import setupTooltipTest from '../mocks/setupTooltipTest'; @@ -20,18 +20,18 @@ describe('', () => { }); it('should render rects', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('rect')).toHaveLength(2); + expect(container.querySelectorAll('rect')).toHaveLength(2); }); it('should use colorAccessor if passed', () => { - const wrapper = mount( + const { container } = render( ', () => { , ); - const rects = wrapper.find('rect'); - expect(rects.at(0).prop('fill')).toBe('banana'); - expect(rects.at(1).prop('fill')).not.toBe('banana'); + const rects = container.querySelectorAll('rect'); + expect(rects[0]).toHaveAttribute('fill', 'banana'); + expect(rects[1]).not.toHaveAttribute('fill', 'banana'); }); it('should not render rects if x or y is invalid', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('rect')).toHaveLength(1); + expect(container.querySelectorAll('rect')).toHaveLength(1); }); it('should invoke showTooltip/hideTooltip on pointermove/pointerout', () => { @@ -104,13 +104,13 @@ describe('', () => { expect(AnimatedBarSeries).toBeDefined(); }); it('should render an animated.rect', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find(animated.rect)).toHaveLength(series.data.length); + expect(container.querySelectorAll('rect')).toHaveLength(series.data.length); }); }); diff --git a/packages/visx-xychart/test/components/BarStack.test.tsx b/packages/visx-xychart/test/components/BarStack.test.tsx index 7c9eac890..4f06326f0 100644 --- a/packages/visx-xychart/test/components/BarStack.test.tsx +++ b/packages/visx-xychart/test/components/BarStack.test.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect } from 'react'; -import { mount } from 'enzyme'; -import { animated } from 'react-spring'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { BarStack, BarSeries, @@ -52,7 +52,7 @@ describe('', () => { }); it('should render rects', () => { - const wrapper = mount( + const { container } = render( @@ -62,11 +62,12 @@ describe('', () => { , ); - expect(wrapper.find('rect')).toHaveLength(4); + const RectElements = container.querySelectorAll('rect'); + expect(RectElements).toHaveLength(4); }); it('should use colorAccessor if passed', () => { - const wrapper = mount( + const { container } = render( @@ -80,15 +81,15 @@ describe('', () => { , ); - const rects = wrapper.find('rect'); - expect(rects.at(0).prop('fill')).not.toBe('banana'); - expect(rects.at(1).prop('fill')).not.toBe('banana'); - expect(rects.at(2).prop('fill')).toBe('banana'); - expect(rects.at(3).prop('fill')).not.toBe('banana'); + const RectElements = container.querySelectorAll('rect'); + expect(RectElements[0]).not.toHaveAttribute('fill', 'banana'); + expect(RectElements[1]).not.toHaveAttribute('fill', 'banana'); + expect(RectElements[2]).toHaveAttribute('fill', 'banana'); + expect(RectElements[3]).not.toHaveAttribute('fill', 'banana'); }); it('should not render rects if x or y are invalid', () => { - const wrapper = mount( + const { container } = render( @@ -98,7 +99,8 @@ describe('', () => { , ); - expect(wrapper.find('rect')).toHaveLength(3); + const RectElements = container.querySelectorAll('rect'); + expect(RectElements).toHaveLength(3); }); it('should update scale domain to include stack sums including negative values', () => { @@ -112,7 +114,7 @@ describe('', () => { return null; } - mount( + render( @@ -176,7 +178,7 @@ describe('', () => { expect(AnimatedBarStack).toBeDefined(); }); it('should render an animated.rect', () => { - const wrapper = mount( + const { container } = render( @@ -186,6 +188,7 @@ describe('', () => { , ); - expect(wrapper.find(animated.rect)).toHaveLength(4); + const RectElements = container.querySelectorAll('rect'); + expect(RectElements).toHaveLength(4); }); }); diff --git a/packages/visx-xychart/test/components/GlyphSeries.test.tsx b/packages/visx-xychart/test/components/GlyphSeries.test.tsx index 009bad7ad..6f0a84e75 100644 --- a/packages/visx-xychart/test/components/GlyphSeries.test.tsx +++ b/packages/visx-xychart/test/components/GlyphSeries.test.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect } from 'react'; -import { animated } from 'react-spring'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { AnimatedGlyphSeries, DataContext, GlyphSeries, useEventEmitter } from '../../src'; import getDataContext from '../mocks/getDataContext'; import setupTooltipTest from '../mocks/setupTooltipTest'; @@ -20,18 +20,18 @@ describe('', () => { }); it('should render a DefaultGlyph for each Datum', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('circle')).toHaveLength(series.data.length); + expect(container.querySelectorAll('circle')).toHaveLength(series.data.length); }); it('should use colorAccessor if passed', () => { - const wrapper = mount( + const { container } = render( ', () => { , ); - const circles = wrapper.find('circle'); - expect(circles.at(0).prop('fill')).toBe('banana'); - expect(circles.at(1).prop('fill')).not.toBe('banana'); + const circles = container.querySelectorAll('circle'); + expect(circles[0]).toHaveAttribute('fill', 'banana'); + expect(circles[1]).not.toHaveAttribute('fill', 'banana'); }); it('should not render Glyphs if x or y is invalid', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('circle')).toHaveLength(1); + expect(container.querySelectorAll('circle')).toHaveLength(1); }); it('should render a custom Glyph for each Datum', () => { const customRenderGlyph = () => ; - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('.custom-glyph')).toHaveLength(series.data.length); + expect(container.querySelectorAll('.custom-glyph')).toHaveLength(series.data.length); }); it('should invoke showTooltip/hideTooltip on pointermove/pointerout', () => { @@ -116,13 +116,13 @@ describe('', () => { expect(AnimatedGlyphSeries).toBeDefined(); }); it('should render an animated.g for each datum', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find(animated.g)).toHaveLength(series.data.length); + expect(container.querySelectorAll('g')).toHaveLength(series.data.length); }); }); diff --git a/packages/visx-xychart/test/components/Grid.test.tsx b/packages/visx-xychart/test/components/Grid.test.tsx index 8706cb183..a13bcff3e 100644 --- a/packages/visx-xychart/test/components/Grid.test.tsx +++ b/packages/visx-xychart/test/components/Grid.test.tsx @@ -1,9 +1,5 @@ import * as React from 'react'; -import { mount } from 'enzyme'; -import VxAnimatedGridRows from '@visx/react-spring/lib/grid/AnimatedGridRows'; -import VxAnimatedGridColumns from '@visx/react-spring/lib/grid/AnimatedGridColumns'; -import VxGridRows from '@visx/grid/lib/grids/GridRows'; -import VxGridColumns from '@visx/grid/lib/grids/GridColumns'; +import { render } from '@testing-library/react'; import { Grid, AnimatedGrid, DataContext } from '../../src'; import getDataContext from '../mocks/getDataContext'; @@ -14,26 +10,26 @@ describe('', () => { expect(Grid).toBeDefined(); }); it('should render VxGridRows if rows=true', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find(VxGridRows)).toHaveLength(1); - expect(wrapper.find(VxGridColumns)).toHaveLength(0); + expect(container.querySelectorAll('.visx-rows')).toHaveLength(1); + expect(container.querySelectorAll('.visx-columns')).toHaveLength(0); }); it('should render VxGridColumns if columns=true', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find(VxGridRows)).toHaveLength(0); - expect(wrapper.find(VxGridColumns)).toHaveLength(1); + expect(container.querySelectorAll('.visx-rows')).toHaveLength(0); + expect(container.querySelectorAll('.visx-columns')).toHaveLength(1); }); }); @@ -42,25 +38,25 @@ describe('', () => { expect(AnimatedGrid).toBeDefined(); }); it('should render VxAnimatedGridRows if rows=true', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find(VxAnimatedGridRows)).toHaveLength(1); - expect(wrapper.find(VxAnimatedGridColumns)).toHaveLength(0); + expect(container.querySelectorAll('.visx-rows')).toHaveLength(1); + expect(container.querySelectorAll('.visx-columns')).toHaveLength(0); }); it('should render VxAnimatedGridColumns if columns=true', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find(VxAnimatedGridRows)).toHaveLength(0); - expect(wrapper.find(VxAnimatedGridColumns)).toHaveLength(1); + expect(container.querySelectorAll('.visx-rows')).toHaveLength(0); + expect(container.querySelectorAll('.visx-columns')).toHaveLength(1); }); }); diff --git a/packages/visx-xychart/test/components/LineSeries.test.tsx b/packages/visx-xychart/test/components/LineSeries.test.tsx index d02ccb96b..e10777640 100644 --- a/packages/visx-xychart/test/components/LineSeries.test.tsx +++ b/packages/visx-xychart/test/components/LineSeries.test.tsx @@ -1,7 +1,6 @@ import React, { useContext, useEffect } from 'react'; -import { animated } from 'react-spring'; -import { mount } from 'enzyme'; -import { LinePath } from '@visx/shape'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { AnimatedLineSeries, DataContext, LineSeries, useEventEmitter } from '../../src'; import getDataContext from '../mocks/getDataContext'; import setupTooltipTest from '../mocks/setupTooltipTest'; @@ -15,37 +14,36 @@ describe('', () => { }); it('should render a LinePath', () => { - const wrapper = mount( + const { container } = render( , ); - // @ts-ignore produces a union type that is too complex to represent.ts(2590) - expect(wrapper.find(LinePath)).toHaveLength(1); + expect(container.querySelectorAll('path')).toHaveLength(1); }); it('should set strokeLinecap="round" to make datum surrounded by nulls visible', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('path').prop('strokeLinecap')).toBe('round'); + expect(container.querySelector('path')).toHaveAttribute('stroke-linecap', 'round'); }); it('should render Glyphs if focus/blur handlers are set', () => { - const wrapper = mount( + const { container } = render( {}} /> , ); - expect(wrapper.find('circle')).toHaveLength(series.data.length); + expect(container.querySelectorAll('circle')).toHaveLength(series.data.length); }); it('should invoke showTooltip/hideTooltip on pointermove/pointerout', () => { @@ -94,13 +92,13 @@ describe('', () => { expect(AnimatedLineSeries).toBeDefined(); }); it('should render an animated.path', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find(animated.path)).toHaveLength(1); + expect(container.querySelectorAll('path')).toHaveLength(1); }); }); diff --git a/packages/visx-xychart/test/components/Tooltip.test.tsx b/packages/visx-xychart/test/components/Tooltip.test.tsx index ef2b04708..3a32d222b 100644 --- a/packages/visx-xychart/test/components/Tooltip.test.tsx +++ b/packages/visx-xychart/test/components/Tooltip.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ResizeObserver from 'resize-observer-polyfill'; -import { mount } from 'enzyme'; -import { Tooltip as BaseTooltip } from '@visx/tooltip'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import { DataContext, DataRegistryEntry, @@ -17,12 +17,14 @@ describe('', () => { | { props?: Partial>; context?: Partial>; + // eslint-disable-next-line @typescript-eslint/no-explicit-any dataEntries?: DataRegistryEntry[]; } | undefined; function setup({ props, context, dataEntries = [] }: SetupProps = {}) { - const wrapper = mount( + // Disable Warning: render(): Rendering components directly into document.body is discouraged. + const wrapper = render( ', () => { }); it('should not render a BaseTooltip when TooltipContext.tooltipOpen=false', () => { - const wrapper = setup(); - expect(wrapper.find(BaseTooltip)).toHaveLength(0); + const { container } = setup(); + expect(container?.parentNode?.querySelectorAll('.visx-tooltip')).toHaveLength(0); }); it('should not render a BaseTooltip when TooltipContext.tooltipOpen=true and renderTooltip returns false', () => { - const wrapper = setup({ context: { tooltipOpen: true }, props: { renderTooltip: () => null } }); - expect(wrapper.find(BaseTooltip)).toHaveLength(0); + const { container } = setup({ + context: { tooltipOpen: true }, + props: { renderTooltip: () => null }, + }); + expect(container?.parentNode?.querySelectorAll('.visx-tooltip')).toHaveLength(0); }); it('should render a BaseTooltip when TooltipContext.tooltipOpen=true and renderTooltip returns non-null', () => { - const wrapper = setup({ + const { container } = setup({ props: { renderTooltip: () =>
, snapTooltipToDatumX: true }, context: { tooltipOpen: true }, }); - expect(wrapper.find(BaseTooltip)).toHaveLength(1); + expect(container?.parentNode?.querySelectorAll('.visx-tooltip')).toHaveLength(1); }); it('should not invoke props.renderTooltip when TooltipContext.tooltipOpen=false', () => { @@ -87,23 +92,25 @@ describe('', () => { }); it('should render a vertical crosshair if showVerticalCrossHair=true', () => { - const wrapper = setup({ + const { container } = setup({ props: { showVerticalCrosshair: true }, context: { tooltipOpen: true }, }); - expect(wrapper.find('div.visx-crosshair-vertical')).toHaveLength(1); + expect(container?.parentNode?.querySelectorAll('div.visx-crosshair-vertical')).toHaveLength(1); }); it('should render a horizontal crosshair if showVerticalCrossHair=true', () => { - const wrapper = setup({ + const { container } = setup({ props: { showHorizontalCrosshair: true }, context: { tooltipOpen: true }, }); - expect(wrapper.find('div.visx-crosshair-horizontal')).toHaveLength(1); + expect(container?.parentNode?.querySelectorAll('div.visx-crosshair-horizontal')).toHaveLength( + 1, + ); }); it('should not render a glyph if showDatumGlyph=true and there is no nearestDatum', () => { - const wrapper = setup({ + const { container } = setup({ props: { showDatumGlyph: true }, context: { tooltipOpen: true, @@ -120,10 +127,11 @@ describe('', () => { }, ], }); - expect(wrapper.find('div.visx-tooltip-glyph')).toHaveLength(0); + expect(container?.parentNode?.querySelectorAll('div.visx-tooltip-glyph')).toHaveLength(0); }); + it('should render a glyph if showDatumGlyph=true if there is a nearestDatum', () => { - const wrapper = setup({ + const { container } = setup({ props: { showDatumGlyph: true }, context: { tooltipOpen: true, @@ -141,10 +149,11 @@ describe('', () => { }, ], }); - expect(wrapper.find('div.visx-tooltip-glyph')).toHaveLength(1); + expect(container?.parentNode?.querySelectorAll('.visx-tooltip-glyph')).toHaveLength(1); }); + it('should render a glyph for each series if showSeriesGlyphs=true', () => { - const wrapper = setup({ + const { container } = setup({ props: { showSeriesGlyphs: true }, context: { tooltipOpen: true, @@ -170,6 +179,6 @@ describe('', () => { }, ], }); - expect(wrapper.find('div.visx-tooltip-glyph')).toHaveLength(2); + expect(container?.parentNode?.querySelectorAll('div.visx-tooltip-glyph')).toHaveLength(2); }); }); diff --git a/packages/visx-xychart/test/components/XYChart.test.tsx b/packages/visx-xychart/test/components/XYChart.test.tsx index 3e3af2c8b..a5509aa35 100644 --- a/packages/visx-xychart/test/components/XYChart.test.tsx +++ b/packages/visx-xychart/test/components/XYChart.test.tsx @@ -1,13 +1,8 @@ import React, { useContext } from 'react'; import { mount } from 'enzyme'; -import ParentSize from '@visx/responsive/lib/components/ParentSize'; -import { - XYChart, - DataContext, - DataProvider, - EventEmitterProvider, - TooltipProvider, -} from '../../src'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { XYChart, DataProvider, DataContext } from '../../src'; const chartProps = { xScale: { type: 'linear' }, @@ -21,24 +16,18 @@ describe('', () => { expect(XYChart).toBeDefined(); }); - it('should render a ParentSize if width or height is not provided', () => { - const wrapper = mount( - - - , + it('should render with parent size if width or height is not provided', () => { + const { getByTestId } = render( +
+ + + +
, ); - expect(wrapper.find(ParentSize)).toHaveLength(1); - }); - it('should render DataProvider, EventEmitterProvider, and TooltipProvider if not available in context', () => { - const wrapper = mount( - - - , - ); - expect(wrapper.find(DataProvider)).toHaveLength(1); - expect(wrapper.find(EventEmitterProvider)).toHaveLength(1); - expect(wrapper.find(TooltipProvider)).toHaveLength(1); + // the XYChart should auto-resize to it's parent size + const Wrapper = getByTestId('wrapper'); + expect(Wrapper.firstChild).toHaveStyle('width: 100%; height: 100%'); }); it('should warn if DataProvider is not available and no x- or yScale config is passed', () => { @@ -54,21 +43,23 @@ describe('', () => { }); it('should render an svg', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('svg')).toHaveLength(1); + const SVGElement = container.querySelector('svg'); + expect(SVGElement).toBeDefined(); }); it('should render children', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('#xychart-child')).toHaveLength(1); + const XYChartChild = container.querySelector('#xychart-child'); + expect(XYChartChild).toBeDefined(); }); it('should update the registry dimensions', () => { @@ -85,7 +76,7 @@ describe('', () => { return null; }; - mount( + render( diff --git a/packages/visx-xychart/test/enhancers/withRegisteredData.test.tsx b/packages/visx-xychart/test/enhancers/withRegisteredData.test.tsx index 6adc0642b..b98a977fb 100644 --- a/packages/visx-xychart/test/enhancers/withRegisteredData.test.tsx +++ b/packages/visx-xychart/test/enhancers/withRegisteredData.test.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; import withRegisteredData from '../../src/enhancers/withRegisteredData'; import getDataContext from '../mocks/getDataContext'; import { DataContext } from '../../src'; @@ -28,19 +29,19 @@ describe('withRegisteredData', () => { const BaseComponent = () =>
; const WrappedComponent = withRegisteredData(BaseComponent); - const wrapperNoContext = mount( + const { container: containerNoContext } = render( , ); - const wrapperCompleteContext = mount( + const { container: containerCompleteContext } = render( , ); - expect(wrapperNoContext.find('div')).toHaveLength(0); - expect(wrapperCompleteContext.find('div')).toHaveLength(1); + expect(containerNoContext.querySelectorAll('div')).toHaveLength(0); + expect(containerCompleteContext.querySelectorAll('div')).toHaveLength(1); }); it('should pass data and accessors to BaseComponent from context not props', () => { @@ -54,7 +55,7 @@ describe('withRegisteredData', () => { }; const WrappedComponent = withRegisteredData(BaseComponent); - mount( + render( { @@ -17,6 +17,6 @@ describe('useDataRegistry', () => { return null; }; - mount(); + render(); }); }); diff --git a/packages/visx-xychart/test/hooks/useEventEmitter.test.tsx b/packages/visx-xychart/test/hooks/useEventEmitter.test.tsx index 9efd11410..df16f945a 100644 --- a/packages/visx-xychart/test/hooks/useEventEmitter.test.tsx +++ b/packages/visx-xychart/test/hooks/useEventEmitter.test.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import useEventEmitter from '../../src/hooks/useEventEmitter'; import { EventEmitterProvider } from '../../src'; @@ -21,7 +21,7 @@ describe('useEventEmitter', () => { return null; }; - mount( + render( , @@ -45,7 +45,7 @@ describe('useEventEmitter', () => { return null; }; - mount( + render( , @@ -78,7 +78,7 @@ describe('useEventEmitter', () => { return null; }; - mount( + render( , diff --git a/packages/visx-xychart/test/hooks/useEventEmitters.test.tsx b/packages/visx-xychart/test/hooks/useEventEmitters.test.tsx index 6967e5025..0a622f880 100644 --- a/packages/visx-xychart/test/hooks/useEventEmitters.test.tsx +++ b/packages/visx-xychart/test/hooks/useEventEmitters.test.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { EventEmitterProvider, useEventEmitter } from '../../src'; import useEventEmitters from '../../src/hooks/useEventEmitters'; @@ -28,7 +28,7 @@ describe('useEventEmitters', () => { return null; }; - mount( + render( , @@ -53,7 +53,7 @@ describe('useEventEmitters', () => { return null; }; - mount( + render( , diff --git a/packages/visx-xychart/test/hooks/useEventHandlers.test.tsx b/packages/visx-xychart/test/hooks/useEventHandlers.test.tsx index df1824e0b..c61379d54 100644 --- a/packages/visx-xychart/test/hooks/useEventHandlers.test.tsx +++ b/packages/visx-xychart/test/hooks/useEventHandlers.test.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { EventEmitterProvider, useEventEmitter, DataContext } from '../../src'; import useEventHandlers, { POINTER_EVENTS_ALL } from '../../src/hooks/useEventHandlers'; import getDataContext from '../mocks/getDataContext'; @@ -12,7 +12,7 @@ const getEvent = (eventType: string) => describe('useEventHandlers', () => { function setup(children: React.ReactNode) { - return mount( + return render( {children} , diff --git a/packages/visx-xychart/test/hooks/useStackedData.test.tsx b/packages/visx-xychart/test/hooks/useStackedData.test.tsx index b56d87fdd..bdcb5411f 100644 --- a/packages/visx-xychart/test/hooks/useStackedData.test.tsx +++ b/packages/visx-xychart/test/hooks/useStackedData.test.tsx @@ -1,5 +1,5 @@ import React, { useContext, useEffect } from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { AreaSeries, DataContext, DataProvider } from '../../src'; import useStackedData from '../../src/hooks/useStackedData'; @@ -25,7 +25,7 @@ const seriesBProps = { }; function setup(children: React.ReactElement | React.ReactElement[]) { - return mount( + return render( >, ) { - return mount( + return render( diff --git a/packages/visx-xychart/test/providers/DataProvider.test.tsx b/packages/visx-xychart/test/providers/DataProvider.test.tsx index 842bcd369..b7c2abe20 100644 --- a/packages/visx-xychart/test/providers/DataProvider.test.tsx +++ b/packages/visx-xychart/test/providers/DataProvider.test.tsx @@ -1,11 +1,11 @@ import React, { useContext, useEffect } from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { DataProvider, DataContext } from '../../src'; import { DataProviderProps } from '../../lib/providers/DataProvider'; // eslint-disable-next-line @typescript-eslint/no-explicit-any const getWrapper = (consumer: React.ReactNode, props?: DataProviderProps) => { - mount( + render( {consumer} , diff --git a/packages/visx-xychart/test/providers/EventEmitterProvider.test.tsx b/packages/visx-xychart/test/providers/EventEmitterProvider.test.tsx index 325daedeb..f432f6a81 100644 --- a/packages/visx-xychart/test/providers/EventEmitterProvider.test.tsx +++ b/packages/visx-xychart/test/providers/EventEmitterProvider.test.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { EventEmitterProvider, EventEmitterContext } from '../../src'; describe('', () => { @@ -17,7 +17,7 @@ describe('', () => { return null; }; - mount( + render( , diff --git a/packages/visx-xychart/test/providers/ThemeProvider.test.tsx b/packages/visx-xychart/test/providers/ThemeProvider.test.tsx index 3402b011f..4970110b4 100644 --- a/packages/visx-xychart/test/providers/ThemeProvider.test.tsx +++ b/packages/visx-xychart/test/providers/ThemeProvider.test.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { ThemeProvider, ThemeContext } from '../../src'; describe('', () => { @@ -17,7 +17,7 @@ describe('', () => { return null; }; - mount( + render( , diff --git a/packages/visx-xychart/test/providers/TooltipProvider.test.tsx b/packages/visx-xychart/test/providers/TooltipProvider.test.tsx index 80b929fdb..8e14c0ead 100644 --- a/packages/visx-xychart/test/providers/TooltipProvider.test.tsx +++ b/packages/visx-xychart/test/providers/TooltipProvider.test.tsx @@ -1,5 +1,5 @@ import React, { useContext, useEffect } from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { TooltipProvider, TooltipContext, TooltipData } from '../../src'; describe('', () => { @@ -22,7 +22,7 @@ describe('', () => { return null; }; - mount( + render( , @@ -70,7 +70,7 @@ describe('', () => { return null; }; - mount( + render( , diff --git a/packages/visx-zoom/package.json b/packages/visx-zoom/package.json index ae78b0b0a..34b8b0876 100644 --- a/packages/visx-zoom/package.json +++ b/packages/visx-zoom/package.json @@ -31,7 +31,7 @@ "access": "public" }, "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/yarn.lock b/yarn.lock index dc6e6d0e7..9de1c8f1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1979,6 +1979,14 @@ "@babel/helper-plugin-utils" "^7.10.1" "@babel/plugin-transform-typescript" "^7.10.1" +"@babel/runtime-corejs3@^7.10.2": + version "7.14.7" + resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz#0ef292bbce40ca00f874c9724ef175a12476465c" + integrity sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA== + dependencies: + core-js-pure "^3.15.0" + regenerator-runtime "^0.13.4" + "@babel/runtime-corejs3@^7.8.3": version "7.10.2" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.10.2.tgz#3511797ddf9a3d6f3ce46b99cc835184817eaa4e" @@ -1994,6 +2002,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.9.2": + version "7.14.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d" + integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.12.5": version "7.12.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e" @@ -2549,6 +2564,17 @@ "@types/yargs" "^15.0.0" chalk "^3.0.0" +"@jest/types@^26.6.2": + version "26.6.2" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e" + integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ== + dependencies: + "@types/istanbul-lib-coverage" "^2.0.0" + "@types/istanbul-reports" "^3.0.0" + "@types/node" "*" + "@types/yargs" "^15.0.0" + chalk "^4.0.0" + "@lerna/add@3.21.0": version "3.21.0" resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.21.0.tgz#27007bde71cc7b0a2969ab3c2f0ae41578b4577b" @@ -3592,7 +3618,36 @@ dependencies: type-detect "4.0.8" -"@testing-library/react-hooks@^3.4.2": +"@testing-library/dom@^7.22.3": + version "7.31.2" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.31.2.tgz#df361db38f5212b88555068ab8119f5d841a8c4a" + integrity sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/runtime" "^7.12.5" + "@types/aria-query" "^4.2.0" + aria-query "^4.2.2" + chalk "^4.1.0" + dom-accessibility-api "^0.5.6" + lz-string "^1.4.4" + pretty-format "^26.6.2" + +"@testing-library/jest-dom@^5.9.0": + version "5.14.1" + resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz#8501e16f1e55a55d675fe73eecee32cdaddb9766" + integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ== + dependencies: + "@babel/runtime" "^7.9.2" + "@types/testing-library__jest-dom" "^5.9.1" + aria-query "^4.2.2" + chalk "^3.0.0" + css "^3.0.0" + css.escape "^1.5.1" + dom-accessibility-api "^0.5.6" + lodash "^4.17.15" + redent "^3.0.0" + +"@testing-library/react-hooks@^3.2.1", "@testing-library/react-hooks@^3.4.2": version "3.7.0" resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.7.0.tgz#6d75c5255ef49bce39b6465bf6b49e2dac84919e" integrity sha512-TwfbY6BWtWIHitjT05sbllyLIProcysC0dF0q1bbDa7OHLC6A6rJOYJwZ13hzfz3O4RtOuInmprBozJRyyo7/g== @@ -3600,11 +3655,31 @@ "@babel/runtime" "^7.12.5" "@types/testing-library__react-hooks" "^3.4.0" +"@testing-library/react@^10.2.0": + version "10.4.9" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.4.9.tgz#9faa29c6a1a217bf8bbb96a28bd29d7a847ca150" + integrity sha512-pHZKkqUy0tmiD81afs8xfiuseXfU/N7rAX3iKjeZYje86t9VaB0LrxYVa+OOsvkrveX5jCK3IjajVn2MbePvqA== + dependencies: + "@babel/runtime" "^7.10.3" + "@testing-library/dom" "^7.22.3" + +"@testing-library/user-event@^11.0.1": + version "11.4.2" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-11.4.2.tgz#90d98fd18455ae81d008e9b26e94d25e8d5bf846" + integrity sha512-Kut7G1L+ffozEhYTDNjV9C6RFbUfsKA05rGr1arwbSUoDZQ82OMmsyaXEDznT22Qc0PtZ1Hz3soX0pPosu8+Sw== + dependencies: + "@babel/runtime" "^7.10.2" + "@types/anymatch@*": version "1.3.1" resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a" integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA== +"@types/aria-query@^4.2.0": + version "4.2.2" + resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc" + integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig== + "@types/babel__core@^7.1.7": version "7.1.8" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.8.tgz#057f725aca3641f49fc11c7a87a9de5ec588a5d7" @@ -3807,6 +3882,21 @@ "@types/istanbul-lib-coverage" "*" "@types/istanbul-lib-report" "*" +"@types/istanbul-reports@^3.0.0": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff" + integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw== + dependencies: + "@types/istanbul-lib-report" "*" + +"@types/jest@*": + version "26.0.24" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.24.tgz#943d11976b16739185913a1936e0de0c4a7d595a" + integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w== + dependencies: + jest-diff "^26.0.0" + pretty-format "^26.0.0" + "@types/jest@^24.0.18": version "24.9.1" resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.9.1.tgz#02baf9573c78f1b9974a5f36778b366aa77bd534" @@ -3946,6 +4036,13 @@ resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.5.tgz#9adbc12950582aa65ead76bffdf39fe0c27a3c02" integrity sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ== +"@types/testing-library__jest-dom@^5.9.1": + version "5.14.0" + resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz#98eb7537cb5502bcca7a0d82acf5f245a2e6c322" + integrity sha512-l2P2GO+hFF4Liye+fAajT1qBqvZOiL79YMpEvgGs1xTK7hECxBI8Wz4J7ntACJNiJ9r0vXQqYovroXRLPDja6A== + dependencies: + "@types/jest" "*" + "@types/testing-library__react-hooks@^3.4.0": version "3.4.1" resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.4.1.tgz#b8d7311c6c1f7db3103e94095fe901f8fef6e433" @@ -4601,6 +4698,14 @@ aria-query@^3.0.0: ast-types-flow "0.0.7" commander "^2.11.0" +aria-query@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b" + integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA== + dependencies: + "@babel/runtime" "^7.10.2" + "@babel/runtime-corejs3" "^7.10.2" + arity-n@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745" @@ -5516,6 +5621,14 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +chalk@^4.0.0, chalk@^4.1.0: + version "4.1.1" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad" + integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + change-case@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e" @@ -6061,6 +6174,11 @@ core-js-pure@^3.0.0: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813" integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA== +core-js-pure@^3.15.0: + version "3.15.2" + resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.15.2.tgz#c8e0874822705f3385d3197af9348f7c9ae2e3ce" + integrity sha512-D42L7RYh1J2grW8ttxoY1+17Y4wXZeKe7uyplAI3FkNQyI5OgBIAjUfFiTPfL1rs0qLpxaabITNbjKl1Sp82tA== + core-js@^1.0.0: version "1.2.7" resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" @@ -6253,7 +6371,7 @@ css-what@2.1: resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg== -css.escape@^1.5.0: +css.escape@^1.5.0, css.escape@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s= @@ -6268,6 +6386,15 @@ css@^2.0.0: source-map-resolve "^0.5.2" urix "^0.1.0" +css@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d" + integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ== + dependencies: + inherits "^2.0.4" + source-map "^0.6.1" + source-map-resolve "^0.6.0" + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -6743,6 +6870,11 @@ diff-sequences@^25.2.6: resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd" integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg== +diff-sequences@^26.6.2: + version "26.6.2" + resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1" + integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q== + diff@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d" @@ -6791,6 +6923,11 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-accessibility-api@^0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz#3f5d43b52c7a3bd68b5fb63fa47b4e4c1fdf65a9" + integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw== + dom-serializer@0, dom-serializer@^0.2.1: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -9472,6 +9609,16 @@ jest-diff@^25.5.0: jest-get-type "^25.2.6" pretty-format "^25.5.0" +jest-diff@^26.0.0: + version "26.6.2" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394" + integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA== + dependencies: + chalk "^4.0.0" + diff-sequences "^26.6.2" + jest-get-type "^26.3.0" + pretty-format "^26.6.2" + jest-docblock@^25.3.0: version "25.3.0" resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-25.3.0.tgz#8b777a27e3477cd77a168c05290c471a575623ef" @@ -9524,6 +9671,11 @@ jest-get-type@^25.2.6: resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877" integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig== +jest-get-type@^26.3.0: + version "26.3.0" + resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0" + integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig== + jest-haste-map@^25.5.1: version "25.5.1" resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-25.5.1.tgz#1df10f716c1d94e60a1ebf7798c9fb3da2620943" @@ -10433,6 +10585,11 @@ lru-cache@^5.1.1: dependencies: yallist "^3.0.2" +lz-string@^1.4.4: + version "1.4.4" + resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" + integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY= + macos-release@^2.2.0: version "2.3.0" resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.3.0.tgz#eb1930b036c0800adebccd5f17bc4c12de8bb71f" @@ -12189,6 +12346,16 @@ pretty-format@^25.5.0: ansi-styles "^4.0.0" react-is "^16.12.0" +pretty-format@^26.0.0, pretty-format@^26.6.2: + version "26.6.2" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93" + integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg== + dependencies: + "@jest/types" "^26.6.2" + ansi-regex "^5.0.0" + ansi-styles "^4.0.0" + react-is "^17.0.1" + pretty-ms@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-5.1.0.tgz#b906bdd1ec9e9799995c372e2b1c34f073f95384" @@ -12477,7 +12644,16 @@ react-docgen-typescript@^1.15.0: resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.16.5.tgz#b305563425ab370f5a3c82b42579eb5069449b87" integrity sha512-guXnx6a554IDVUoVIkX/BGRTrwc2n2w/kMxo7TKLNLJW1qszhT6BRHX4qV8eWq5eaJxRxuesOW5AOLiOI9WQOA== -"react-dom@^15.0.0-0 || ^16.0.0-0", react-dom@^16.9.0: +"react-dom@^16.0.0-0 || ^17.0.0-0": + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + scheduler "^0.20.2" + +react-dom@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== @@ -12499,6 +12675,11 @@ react-is@16.13.1, react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4, react-i resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^17.0.1: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" + integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== + react-markdown@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-4.3.1.tgz#39f0633b94a027445b86c9811142d05381300f2f" @@ -12552,7 +12733,15 @@ react-use-measure@^2.0.4: dependencies: debounce "^1.2.0" -"react@^15.0.0-0 || ^16.0.0-0", react@^16.9.0: +"react@^16.0.0-0 || ^17.0.0-0": + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + +react@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== @@ -13261,6 +13450,14 @@ scheduler@^0.19.1: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@2.7.1, schema-utils@^2.7.1: version "2.7.1" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7" @@ -13550,6 +13747,14 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: source-map-url "^0.4.0" urix "^0.1.0" +source-map-resolve@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2" + integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w== + dependencies: + atob "^2.1.2" + decode-uri-component "^0.2.0" + source-map-support@^0.5.17, source-map-support@^0.5.6, source-map-support@^0.5.9, source-map-support@~0.5.12: version "0.5.19" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"