Skip to content

Commit

Permalink
deps: migrate from Enzyme to RTL (#88)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
agilgur5 committed Jun 16, 2022
1 parent 17ba39d commit 6d6dcd1
Show file tree
Hide file tree
Showing 5 changed files with 487 additions and 1,328 deletions.
2 changes: 0 additions & 2 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ module.exports = {
// Jest 24 defaults to JSDOM 11, upgrade to 15 to support canvas@2
testEnvironment: 'jest-environment-jsdom-fifteen',
setupFilesAfterEnv: [
// configure enzyme w/ react adapter
'<rootDir>/test/config/configure-enzyme.js',
// polyfill window.resizeTo
'window-resizeto/polyfill'
],
Expand Down
Loading

0 comments on commit 6d6dcd1

Please sign in to comment.