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

gazcn007 · 2021-07-08T11:19:16Z

💥 Breaking Changes

Add react-testing-lib
Add React v17:
- Which enzyme doesn't have a good support of, mount will fail. Thread Here
Remove React v15

🚀 Enhancements

Improve unit tests by rewriting some of them to RTL (react-testing-library)

📝 Documentation

Tests to fix:

🐛 Bug Fix

🏠 Internal

TBD

gazcn007 · 2021-07-12T12:14:44Z

packages/visx-bounds/test/withBoundingRects.test.tsx


-    expect(Element.prototype.getBoundingClientRect).toHaveBeenCalled();
-    expect(RenderedComponent.prop('rect')).toEqual(expectedRectShape);
-    expect(RenderedComponent.prop('parentRect')).toEqual(expectedRectShape);


@williaster This is where RTL's philosophy of testing differs from Enzyme. Directly checking internal props & states is a NO-NO in RTL

^I agree the RTL philosophy is better for things like this 💯 this is why enzyme struggles with adapters for each react release 😅

packages/visx-glyph/test/Cross.test.tsx

gazcn007 · 2021-07-13T13:08:49Z

packages/visx-grid/test/GridPolar.test.tsx

 import { GridPolar, GridAngle, GridRadial } from '../src';
-import { scaleLinear } from '../../visx-scale';


this will cause tests to fail when visx-scale in the upper folder is not built

great catch. this used to happen in several packages and was mostly cleaned up in the TS re-write but clearly missed some 🙉

packages/visx-responsive/test/ScaleSVG.test.tsx

packages/visx-text/test/Text.test.tsx

williaster

Nice! this looks great to me, I think I only had one real suggestion which was to set @visx/demo to ^17.0.0.

For the react-spring@9 issues, do you think we should merge that in and then rebase? Looks like it has a few remaining issues but I'll try to get it to pass CI today.

williaster · 2021-07-21T19:02:23Z

packages/visx-bounds/test/withBoundingRects.test.tsx

-    expect(RenderedComponent.prop('parentRect')).toEqual(expectedRectShape);
-    expect(typeof RenderedComponent.prop('getRects')).toBe('function');
+    const RenderedComponent = getByTestId('BoundingRectsComponent');
+    const RenderedComponentParent = getByTestId('BoundingRectsComponentParent');


TIL getByTestId

williaster · 2021-07-21T19:04:26Z

packages/visx-demo/package.json

@@ -87,7 +87,7 @@
    "nprogress": "^0.2.0",
    "prismjs": "^1.19.0",
    "raw-loader": "^4.0.0",
-    "react": "^16.9.0",
+    "react": "^16.9.0 || ^17.0.0-0",


since this one is a dependency (and not really intended to be installed) we could probably just use ^17.0.0 here? this would also let us test and make sure everything works with 17 in the demo site.

williaster · 2021-07-21T19:07:56Z

packages/visx-grid/test/GridPolar.test.tsx

 import { GridPolar, GridAngle, GridRadial } from '../src';
-import { scaleLinear } from '../../visx-scale';


great catch. this used to happen in several packages and was mostly cleaned up in the TS re-write but clearly missed some 🙉

packages/visx-responsive/test/ScaleSVG.test.tsx

williaster · 2021-07-21T19:10:24Z

packages/visx-responsive/test/withParentSize.test.tsx

    const HOC = withParentSize(Component);
-    const wrapper = mount(<HOC />);
+    const { getByTestId } = render(<HOC initialWidth={200} initialHeight={200} />);


nice way to avoid getBoundingClientRect, I think when we initially wrote this test it didn't take the initialWidth/Height

williaster · 2021-07-21T19:11:22Z

packages/visx-shape/test/Arc.test.tsx

 import { Arc } from '../src';
 import { ArcProps } from '../src/shapes/Arc';
+import '@testing-library/jest-dom';


not sure if this will throw a lint error for being after local imports 🤔 fine if it doesn't throw!

williaster · 2021-07-21T19:12:56Z

packages/visx-shape/test/Area.test.tsx

+      </svg>,
+    );
+    const PathElement = container.querySelector('path');
+    expect(fakeRef.current).toContainElement(PathElement);


also TIL about the @testing-library/jest-dom selectors, nice 😎

williaster · 2021-07-21T20:34:12Z

ah, one other thing we should bump is the react + react-dom deps inside all of the visx-demo sandboxes (e.g., here)

… Tooltip, withRegisteredData

gazcn007 · 2021-08-03T16:41:43Z

visx-xychart has a huge amount of tests using mount and checking on implementation details with enzyme. I opened a separate PR that merges into this branch

williaster

Woot! 🔥 This is awesome, thanks for doing such a great and thorough job. There are a lot of packages, and going through them all is big task, so nicely done 🙌

I had one small remaining comment but otherwise think we could get this in! (we could also address that comment in a small followup / it's very minor)

As far as releases, there may be one more breaking change in #1305 and #1121 . So I think we should do another 2.0.0-alpha pre-release (I think we need a patch-release to force a change based on how our CI works) and then merge those two and graduate to 2.0.0 asap.

williaster · 2021-08-09T18:33:33Z

packages/visx-text/test/Text.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';


I can't comment on it since it wasn't changed, but wonder if we should just remove the two shallow tests here since they only assert that there are not errors. then we'd be fully on RTL as well 👍

yea sure, these tests are trivial. For later iterations, I would like to convert the shallow tests to RTL as well (these are relatively easier, most of them are just renaming work), so we can fully remove enzyme out of a devDependencies.

github-actions · 2021-08-10T07:13:19Z

🎉 This PR is included in version v3.0.0-alpha.0 of the packages modified 🎉

github-actions · 2021-08-11T23:18:07Z

🎉 This PR is included in version v2.0.1-alpha.0 of the packages modified 🎉

github-actions · 2021-08-11T23:49:36Z

🎉 This PR is included in version v2.0.2-alpha.0 of the packages modified 🎉

github-actions · 2021-08-12T00:10:52Z

🎉 This PR is included in version v2.0.3-alpha.0 of the packages modified 🎉

github-actions · 2021-08-17T20:43:01Z

🎉 This PR is included in version v2.1.0 of the packages modified 🎉

williaster added 💥 breaking changes major-release labels Jul 8, 2021

gazcn007 commented Jul 12, 2021

View reviewed changes

gazcn007 commented Jul 13, 2021

View reviewed changes

packages/visx-glyph/test/Cross.test.tsx Show resolved Hide resolved

gazcn007 commented Jul 13, 2021

View reviewed changes

This was referenced Jul 14, 2021

deps: upgrade react-spring to v9 #1218

Closed

deps: update to react-spring@9 #1277

Merged

gazcn007 commented Jul 15, 2021

View reviewed changes

packages/visx-responsive/test/ScaleSVG.test.tsx Show resolved Hide resolved

gazcn007 mentioned this pull request Jul 19, 2021

deps: upgrade deps to allow react@^17 #872

Closed

gazcn007 changed the title ~~[WIP] Add react-17 and react-testing-library~~ [deps] react 17 and react-testing-library Jul 19, 2021

gazcn007 changed the title ~~[deps] react 17 and react-testing-library~~ [deps] upgrade to react 17 and react-testing-library Jul 19, 2021

gazcn007 changed the title ~~[deps] upgrade to react 17 and react-testing-library~~ [deps] Upgrade to react v17 and react-testing-library Jul 19, 2021

keithyang reviewed Jul 19, 2021

View reviewed changes

packages/visx-text/test/Text.test.tsx Outdated Show resolved Hide resolved

williaster reviewed Jul 21, 2021

View reviewed changes

williaster added the alpha-release label Jul 21, 2021

Carl Liu and others added 14 commits July 23, 2021 14:30

add react-17 and react-testing-library

7af9d27

upgrade and fix unit tests for visx-annotation

50b491b

add react 17 and fix unit tests for withBoundingRects

1486bc6

nit fixes

13c4d31

ts fixes

0c31c0e

update visx-brush

7d1baf5

update visx-chord

1e72ca7

update visx-clip-path

56ea63d

update visx-demo

43e0298

update visx-drag

9ad75ba

update visx-geo

d4fc817

update visx-glyph

38cecc4

update visx-gradient

307c0df

update visx-grid

dee81c7

gazcn007 added 2 commits July 25, 2021 19:49

update Hooks and Providers unit tests

74e7e30

add AreaStack and BarStack tests

4cbaaf5

williaster mentioned this pull request Aug 3, 2021

deps: bump all dev config #1301

Merged

gazcn007 added 2 commits August 4, 2021 00:09

fix unit test for BarGroup, BarSeries, GlyphSeries, Grid, LineSeries,…

84f54cf

… Tooltip, withRegisteredData

fix Axis.test.tsx

e8e8fa4

gazcn007 added 4 commits August 4, 2021 23:16

fix comments

71596d6

add react 16.8.0 as a dep

28084a7

address comments

350fe0f

update visx-react-spring

7c8f061

gazcn007 force-pushed the carl--react-17 branch from 0611d48 to 7c8f061 Compare August 8, 2021 11:56

azemetre mentioned this pull request Aug 9, 2021

d3 v7 #1267

Open

gazcn007 added 2 commits August 9, 2021 10:10

update visx-demo dependencies

66f7e2e

update visx-axis depedencies

9ba1368

williaster added patch-release and removed major-release labels Aug 9, 2021

williaster approved these changes Aug 9, 2021

View reviewed changes

remove shallow from visx-text/Test.test.tsx

5d8da92

keithyang approved these changes Aug 10, 2021

View reviewed changes

gazcn007 merged commit 6319867 into airbnb:master Aug 10, 2021

williaster mentioned this pull request Aug 14, 2021

new(wordcloud): add @visx/wordcloud #1311

Merged

jackw mentioned this pull request Aug 16, 2021

Chore: Update NPM packages with react peer deps grafana/grafana#36598

Merged

eatyourgreens mentioned this pull request Aug 19, 2021

Upgrade visx zooniverse/front-end-monorepo#2371

Closed

This was referenced Mar 24, 2024

Switch @visx/annotation to use React Testing Library #968

Closed

Create hooks for @vx/responsive #485

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

gazcn007 commented Jul 8, 2021 •

edited

Loading

gazcn007 Jul 12, 2021 •

edited

Loading

williaster Jul 12, 2021

gazcn007 Jul 13, 2021

williaster Jul 21, 2021

williaster left a comment

williaster Jul 21, 2021

williaster Jul 21, 2021

williaster Jul 21, 2021

williaster Jul 21, 2021

williaster Jul 21, 2021

williaster Jul 21, 2021

williaster commented Jul 21, 2021

gazcn007 commented Aug 3, 2021 •

edited

Loading

williaster left a comment

williaster Aug 9, 2021

gazcn007 Aug 10, 2021

github-actions bot commented Aug 10, 2021

github-actions bot commented Aug 11, 2021

github-actions bot commented Aug 11, 2021

github-actions bot commented Aug 12, 2021

github-actions bot commented Aug 17, 2021

		import { GridPolar, GridAngle, GridRadial } from '../src';
		import { scaleLinear } from '../../visx-scale';

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

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

Conversation

gazcn007 commented Jul 8, 2021 • edited Loading

💥 Breaking Changes

🚀 Enhancements

📝 Documentation

Tests to fix:

🐛 Bug Fix

🏠 Internal

gazcn007 Jul 12, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

williaster left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

williaster commented Jul 21, 2021

gazcn007 commented Aug 3, 2021 • edited Loading

williaster left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Aug 10, 2021

github-actions bot commented Aug 11, 2021

github-actions bot commented Aug 11, 2021

github-actions bot commented Aug 12, 2021

github-actions bot commented Aug 17, 2021

gazcn007 commented Jul 8, 2021 •

edited

Loading

gazcn007 Jul 12, 2021 •

edited

Loading

gazcn007 commented Aug 3, 2021 •

edited

Loading