deps: migrate from Enzyme to RTL #88
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Enzyme only has unofficial support for React 17 and no support what-so-ever for React 18, so forced to migrate
- RTL is most certainly more of an integration testing library than a unit test library
- can't access the instance through RTL, even though this component actually _needs_ to use refs (bc canvas)
- I managed to hack around this by using refs, but I honestly wasn't even sure that this was possible
- notably hooks like `useRef` don't work since they can only be used inside of a React component or another hook
- but callback refs and `createRef` do work fortunately
- tried to use `react-dom-instance` initially, as suggested in blog post by the author, but it only works with React 16
- in React 17 and React 18 it just returns `false` and doesn't get an instance
- `querySelector` is an escape hatch that is not recommended, enough so that I read through the docs multiple times before finding it was even possible
- was using `document.querySelector` directly before finding this
- somewhat replaces Enzyme's `exists`
- `rerender` is also a bit of an escape hatch
- notably, you can't set props directly on a `ref`, `.props` is a read-only property, so had to find some alternative to be able to run the tests
- replaces Enzyme's `setProps`
- had to change `clearOnResize` to an optional type as it was required without this
- despite that it's in `defaultProps`; the interface itself can't infer this, so probably makes sense to make it optional here as well
agilgur5
added
kind: internal
Codecov Report
@@ Coverage Diff @@
## main #88 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 1 1
Lines 75 75
Branches 9 9
=========================================
Hits 75 75
Continue to review full report at Codecov.
|
This was referenced Jun 15, 2022
agilgur5
commented
Jun 15, 2022
agilgur5
added a commit
that referenced
this pull request
Jun 16, 2022
* deps: migrate from Enzyme to RTL
- Enzyme only has unofficial support for React 17 and no support what-so-ever for React 18, so forced to migrate
- RTL is most certainly more of an integration testing library than a unit test library
- can't access the instance through RTL, even though this component actually _needs_ to use refs (bc canvas)
- I managed to hack around this by using refs, but I honestly wasn't even sure that this was possible
- notably hooks like `useRef` don't work since they can only be used inside of a React component or another hook
- but callback refs and `createRef` do work fortunately
- tried to use `react-dom-instance` initially, as suggested in blog post by the author, but it only works with React 16
- in React 17 and React 18 it just returns `false` and doesn't get an instance
- `querySelector` is an escape hatch that is not recommended, enough so that I read through the docs multiple times before finding it was even possible
- was using `document.querySelector` directly before finding this
- somewhat replaces Enzyme's `exists`
- `rerender` is also a bit of an escape hatch
- notably, you can't set props directly on a `ref`, `.props` is a read-only property, so had to find some alternative to be able to run the tests
- replaces Enzyme's `setProps`
- had to change `clearOnResize` to an optional type as it was required without this
- despite that it's in `defaultProps`; the interface itself can't infer this, so probably makes sense to make it optional here as well
* fix lint issues
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Migrate testing framework from Enzyme to React Testing Library (RTL).
This paves the way for support for React 18 (#76), as it was not possible to test with Enzyme due to the lack of React 18 adapter.
Details
Enzyme only has unofficial, partial support for React 17 (Support for React 17 enzymejs/enzyme#2429) and no support what-so-ever for React 18 (Support for React 18 enzymejs/enzyme#2524), so forced to migrate (see also add React 17 to peerDep range -- needs to update devDeps and tests #64 (review) and React 18 support in peerDeps #76 (comment))
RTL is most certainly more of an integration testing library than a unit test library
useRefdon't work since they can only be used inside of a React component or another hookcreateRefdo work fortunatelyreact-dom-instanceinitially, as suggested in a blog post by the author, but it only works with React 16 (see the issue I filed w/ repro: Doesn't work with React 17 or React 18 arqex/react-dom-instance#14)falseand doesn't get an instancequerySelectoris an escape hatch that is not recommended, enough so that I read through the docs multiple times before finding it was even possibledocument.querySelectordirectly before finding thisexistsrerenderis also a bit of an escape hatchref,.propsis a read-only property, so had to find some alternative to be able to run the testssetPropshad to change
clearOnResizeto an optional type as it was required without thisdefaultProps; the interface itself can't infer this, so probably makes sense to make it optional here as wellNext Steps
I tested this with React 18 as well and everything worked, so next PRs will add support for React 18 in peerDeps (#76)