From 2c0f08673aaa3428ce4954ab69fd85b24a4743f9 Mon Sep 17 00:00:00 2001 From: gazcn007 Date: Sun, 25 Jul 2021 18:44:12 +0800 Subject: [PATCH 1/9] update visx-xychart --- packages/visx-xychart/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-xychart/package.json b/packages/visx-xychart/package.json index 2b549b185..c33749278 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": "^17.0.0", "react-spring": "^9.2.0" }, "dependencies": { From ae6a329f4e394ce9f7860160b29315a42ca80e6e Mon Sep 17 00:00:00 2001 From: gazcn007 Date: Sun, 25 Jul 2021 18:50:26 +0800 Subject: [PATCH 2/9] rewrote tests --- .../test/components/Annotation.test.tsx | 30 ++++++------ .../test/components/XYChart.test.tsx | 49 ++++++++----------- 2 files changed, 36 insertions(+), 43 deletions(-) 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/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( From 1e5f22c9ffe1f9a4897fbe3a25db768653ae0ce1 Mon Sep 17 00:00:00 2001 From: gazcn007 Date: Sun, 25 Jul 2021 19:45:56 +0800 Subject: [PATCH 3/9] update AreaSeries test --- .../test/components/AreaSeries.test.tsx | 45 ++++++++++--------- .../test/mocks/setupTooltipTest.tsx | 4 +- 2 files changed, 26 insertions(+), 23 deletions(-) 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/mocks/setupTooltipTest.tsx b/packages/visx-xychart/test/mocks/setupTooltipTest.tsx index 20cf74472..123397235 100644 --- a/packages/visx-xychart/test/mocks/setupTooltipTest.tsx +++ b/packages/visx-xychart/test/mocks/setupTooltipTest.tsx @@ -1,6 +1,6 @@ /* eslint import/no-extraneous-dependencies: 'off' */ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { DataProvider, EventEmitterProvider, TooltipContext, TooltipContextType } from '../../src'; const providerProps = { @@ -23,7 +23,7 @@ export default function setupTooltipTest( children: React.ReactNode, tooltipContext?: Partial>, ) { - return mount( + return render( From 74e7e304b869c699123447f775dbeb1da7be2759 Mon Sep 17 00:00:00 2001 From: gazcn007 Date: Sun, 25 Jul 2021 19:49:22 +0800 Subject: [PATCH 4/9] update Hooks and Providers unit tests --- packages/visx-xychart/test/hooks/useDataRegistry.test.tsx | 4 ++-- packages/visx-xychart/test/hooks/useEventEmitter.test.tsx | 8 ++++---- .../visx-xychart/test/hooks/useEventEmitters.test.tsx | 6 +++--- .../visx-xychart/test/hooks/useEventHandlers.test.tsx | 4 ++-- packages/visx-xychart/test/hooks/useStackedData.test.tsx | 4 ++-- .../visx-xychart/test/providers/DataProvider.test.tsx | 4 ++-- .../test/providers/EventEmitterProvider.test.tsx | 4 ++-- .../visx-xychart/test/providers/ThemeProvider.test.tsx | 4 ++-- .../visx-xychart/test/providers/TooltipProvider.test.tsx | 6 +++--- 9 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/visx-xychart/test/hooks/useDataRegistry.test.tsx b/packages/visx-xychart/test/hooks/useDataRegistry.test.tsx index 8a188554e..c6f502b80 100644 --- a/packages/visx-xychart/test/hooks/useDataRegistry.test.tsx +++ b/packages/visx-xychart/test/hooks/useDataRegistry.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import useDataRegistry from '../../src/hooks/useDataRegistry'; describe('useDataRegistry', () => { @@ -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( ) => { - 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( , From 4cbaaf59ad66380cb49a2b262ef7aab7741e3e0d Mon Sep 17 00:00:00 2001 From: gazcn007 Date: Mon, 26 Jul 2021 21:35:20 +0800 Subject: [PATCH 5/9] add AreaStack and BarStack tests --- .../test/components/AreaStack.test.tsx | 29 ++++++++-------- .../test/components/BarStack.test.tsx | 33 ++++++++++--------- 2 files changed, 33 insertions(+), 29 deletions(-) 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/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); }); }); From 84f54cf32c5e0a7599139193da47a29eb067558e Mon Sep 17 00:00:00 2001 From: gazcn007 Date: Wed, 4 Aug 2021 00:09:53 +0800 Subject: [PATCH 6/9] fix unit test for BarGroup, BarSeries, GlyphSeries, Grid, LineSeries, Tooltip, withRegisteredData --- .../test/components/BarGroup.test.tsx | 28 +++++------ .../test/components/BarSeries.test.tsx | 24 +++++----- .../test/components/GlyphSeries.test.tsx | 28 +++++------ .../test/components/Grid.test.tsx | 30 +++++------- .../test/components/LineSeries.test.tsx | 21 ++++----- .../test/components/Tooltip.test.tsx | 47 +++++++++++-------- .../enhancers/withRegisteredData.test.tsx | 13 ++--- 7 files changed, 98 insertions(+), 93 deletions(-) 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/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..75ee7dbfc 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,7 +14,7 @@ describe('', () => { }); it('should render a LinePath', () => { - const wrapper = mount( + const { container } = render( @@ -23,29 +22,29 @@ describe('', () => { , ); // @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 +93,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/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( Date: Wed, 4 Aug 2021 00:38:21 +0800 Subject: [PATCH 7/9] fix Axis.test.tsx --- .../test/components/Axis.test.tsx | 89 +++++++------------ 1 file changed, 32 insertions(+), 57 deletions(-) diff --git a/packages/visx-xychart/test/components/Axis.test.tsx b/packages/visx-xychart/test/components/Axis.test.tsx index c1c5c266e..b6100d98e 100644 --- a/packages/visx-xychart/test/components/Axis.test.tsx +++ b/packages/visx-xychart/test/components/Axis.test.tsx @@ -1,7 +1,6 @@ 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 BaseAxis from '../../src/components/axis/BaseAxis'; import { Axis, AnimatedAxis, DataContext, lightTheme } from '../../src'; import getDataContext from '../mocks/getDataContext'; @@ -12,7 +11,7 @@ function setup( children: React.ReactNode, contextOverrides?: Partial>, ) { - return mount( + return render( {children} , @@ -24,7 +23,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 +34,44 @@ 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( - <> - - - , - { xScale }, - ).find(AxisComponent); - expect(axes.at(0).prop('scale')).toBe(xScale); - expect(axes.at(1).prop('scale')).toBe(xScale); - }); - it('should use scale=yScale for orientation=left/right', () => { - const yScale = jest.fn(); - const axes = setup( - <> - - - , - { yScale }, - ).find(AxisComponent); - expect(axes.at(0).prop('scale')).toBe(yScale); - expect(axes.at(1).prop('scale')).toBe(yScale); + it(' renders', () => { + const { container } = setup( + } />, + ); + const AxisComponents = container.querySelectorAll('.visx-axis'); + expect(AxisComponents).toHaveLength(1); }); + 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); }); }); From 71596d66b7cd2ce571ed7333264a9008baeeba86 Mon Sep 17 00:00:00 2001 From: gazcn007 Date: Wed, 4 Aug 2021 23:16:32 +0800 Subject: [PATCH 8/9] fix comments --- .../test/components/Axis.test.tsx | 27 +++++++++++++++++++ .../test/components/LineSeries.test.tsx | 1 - 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/visx-xychart/test/components/Axis.test.tsx b/packages/visx-xychart/test/components/Axis.test.tsx index b6100d98e..6a6e1450b 100644 --- a/packages/visx-xychart/test/components/Axis.test.tsx +++ b/packages/visx-xychart/test/components/Axis.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; 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'; @@ -52,6 +53,32 @@ describe('', () => { 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 }, + ); + 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 (or right)', () => { + const yScale = scaleLinear({ domain: [0, 4], range: [0, 10] }); + const { container } = setup( + } />, + { 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 { container } = setup( diff --git a/packages/visx-xychart/test/components/LineSeries.test.tsx b/packages/visx-xychart/test/components/LineSeries.test.tsx index 75ee7dbfc..e10777640 100644 --- a/packages/visx-xychart/test/components/LineSeries.test.tsx +++ b/packages/visx-xychart/test/components/LineSeries.test.tsx @@ -21,7 +21,6 @@ describe('', () => { , ); - // @ts-ignore produces a union type that is too complex to represent.ts(2590) expect(container.querySelectorAll('path')).toHaveLength(1); }); From 28084a7b15945dd1dd1b2ef1e3ac682f60ed6fe9 Mon Sep 17 00:00:00 2001 From: gazcn007 Date: Thu, 5 Aug 2021 13:50:31 +0800 Subject: [PATCH 9/9] add react 16.8.0 as a dep --- packages/visx-xychart/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-xychart/package.json b/packages/visx-xychart/package.json index c33749278..61cab1af0 100644 --- a/packages/visx-xychart/package.json +++ b/packages/visx-xychart/package.json @@ -36,7 +36,7 @@ "access": "public" }, "peerDependencies": { - "react": "^17.0.0", + "react": "^16.8.0 || ^17.0.0", "react-spring": "^9.2.0" }, "dependencies": {