arqex / arqex/react-dom-instance

Doesn't work with React 17 or React 18

Open
#14 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12
Forks
1
PR merge metrics
No merged PRs in 30d

Description

### Problem

When using React 17 or React 18, `findInstance` returns `false`. The current algorithm seems to _only_ support React 16.

### Reproduction

I've created a minimal reproduction environment on CodeSandbox [here](https://codesandbox.io/s/react-dom-instance-issue-14-mtmejg).
This uses React 17 and returns `false`. Upgrading to React 18 will have the same issue of returning `false`.
Downgrading to React 16, however, will make `findInstance` work.

I tried using this with React Testing Library as mentioned [in the docs](https://github.com/arqex/react-dom-instance#usage-with-react-testing-library), but was unfortunately unable to do so.

I was able to get something working with React `refs` instead though, but thought I'd file an issue anyway.

### Small backstory

I was trying to get this working for testing one of my libraries, [`react-signature-canvas`](https://github.com/agilgur5/react-signature-canvas), which _needs_ to use instance methods as the Canvas API is an imperative API.

Per https://github.com/agilgur5/react-signature-canvas/pull/64#pullrequestreview-876834510, Enzyme has no official support for React 17 (https://github.com/enzymejs/enzyme/issues/2429) or React 18 (https://github.com/enzymejs/enzyme/issues/2524) yet, which has created a big blocker in the community and a shift to using React Testing Library (RTL).
RTL, however, is a pretty different library (more an integration testing library than a unit testing one like Enzyme, plus many other differences), and [doesn't even support using instance methods](https://testing-library.com/docs/react-testing-library/migrate-from-enzyme#triggering-class-methods-in-tests-wrapperinstance), so this has been a pretty difficult shift in the community.
In https://github.com/agilgur5/react-signature-canvas/pull/64#issuecomment-1033256725, I found your [blog post](https://dev.to/arqex/testing-with-react-testing-library-using-component-instances-nl6) and so thought to use this library to bridge the gap therein.

I was able to use the [unofficial, partial adapter for React 17](https://github.com/wojtekmaj/enzyme-adapter-react-17) to stick with Enzyme for a bit, but there's no such workaround for [React 18](https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl).
So I decided to try to get RTL with this library working in https://github.com/agilgur5/react-signature-canvas/issues/76#issuecomment-1126129796, and unfortunately hit upon this issue.

Fortunately, I was able to workaround this by using `refs` (see https://github.com/agilgur5/react-signature-canvas/pull/88), but thought I should file this issue nonetheless for community awareness or possible future support.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.