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 15, 2022
1 parent cc6cce9 commit 8e431f5
Show file tree
Hide file tree
Showing 6 changed files with 284 additions and 748 deletions.
2 changes: 0 additions & 2 deletions jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ const config: Config.InitialOptions = {
injectGlobals: false, // use @jest/globals
testEnvironment: 'jsdom',
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 8e431f5

Please sign in to comment.