Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 44 commits into from
Aug 10, 2021

Conversation

gazcn007
Copy link
Collaborator

@gazcn007 gazcn007 commented Jul 8, 2021

💥 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:
  • visx-annotation : Upgrade and Rewriting tests to RTL
  • visx-axis : Pass without fixes
  • visx-bounds : Rewriting tests to RTL
  • visx-brush : Pass without fixes
  • visx-chord : Pass without fixes
  • visx-clip-path : Pass without fixes
  • visx-curve : No React Dependencies, No Upgrade needed
  • visx-demo : Pass without fixes (no tests)
  • visx-drag : Rewriting tests to RTL
  • visx-event : No React Dependencies, No Upgrade needed
  • visx-geo : Pass without fixes (mount is not used, only shallow is used for enzyme, no failures)
  • visx-glyph : Pass without fixes (mount is not used, only shallow is used for enzyme, no failures)
  • visx-gradient : Rewriting tests to RTL
  • visx-grid : Pass without fixes
  • visx-group : Pass without fixes
  • visx-heatmap : Pass without fixes
  • visx-hierarchy : Pass without fixes
  • visx-legend : Pass without fixes
  • visx-marker : Pass without fixes
  • visx-mock-data : No React Dependencies, No Upgrade needed
  • visx-network : Pass without fixes
  • visx-pattern : Pass without fixes
  • visx-point : No React Dependencies, No Upgrade needed
  • visx-react-spring : Pass without fixes
  • visx-responsive : Upgrade and Rewriting tests to RTL
  • visx-scale : No React Dependencies, No Upgrade needed
  • visx-shape : Upgrade and Rewriting tests to RTL
  • visx-stats : Pass without fixes
  • visx-text : Upgrade and Rewriting tests to RTL
  • visx-threshold : Pass without fixes
  • visx-tooltip : Pass without fixes
  • visx-visx : Pass without fixes (no unit tests in this package)
  • visx-voronoi : Pass without fixes
  • visx-xychart : Upgrade and Rewriting tests to RTL
  • visx-zoom : Pass without fixes

🐛 Bug Fix

🏠 Internal

  • TBD


expect(Element.prototype.getBoundingClientRect).toHaveBeenCalled();
expect(RenderedComponent.prop('rect')).toEqual(expectedRectShape);
expect(RenderedComponent.prop('parentRect')).toEqual(expectedRectShape);
Copy link
Collaborator Author

@gazcn007 gazcn007 Jul 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@gazcn007 gazcn007 changed the title [WIP] Add react-17 and react-testing-library [deps] react 17 and react-testing-library Jul 19, 2021
@gazcn007 gazcn007 changed the title [deps] react 17 and react-testing-library [deps] upgrade to react 17 and react-testing-library Jul 19, 2021
@gazcn007 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
Copy link
Collaborator

@williaster williaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL getByTestId

@@ -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",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@williaster
Copy link
Collaborator

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

@gazcn007
Copy link
Collaborator Author

gazcn007 commented Aug 3, 2021

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

Copy link
Collaborator

@williaster williaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 👍

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@gazcn007 gazcn007 merged commit 6319867 into airbnb:master Aug 10, 2021
@github-actions
Copy link

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

@github-actions
Copy link

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

@github-actions
Copy link

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

@github-actions
Copy link

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

@github-actions
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants