RTL Performance Impact

Greetings!

I’ve been investigating React Testing Library performance issues on a test suite in my organization. After digging I finally traced the issue to <FocusLock>. We are wrapping our modal with this and when I remove <FocusLock> from our modal component, it nearly cuts my testing time in half from 110s (83 tests total) to 50s!

I haven’t had the time to dive into this repo so unfortunately I don’t know where to begin to fix it, so I thought I’d open an issue.

What information can I give that will help? Is this a known performance issue?

[theKashey]

The new version, 2.5.1, has been released with the potential fix for this issue (#151)

You can or update focus-lock, or update underlying focus-lock(just wipe it from yarn.lock or package.lock) which brought the fix - https://github.com/theKashey/focus-lock/pull/24

[nicolasschabram]

In our case, we’ve started seeing a test-performance regression after upgrading our create-react-app application to v4. The impact on the entire test suite was quite dramatic, something on the order of 4 to 5 times slower. We’re using React Testing Library as well. Judging from the profiler, most of that time is spent in react-focus-lock’s activateTrap() function: 15 seconds on our slowest test! That test is probably rendering a bit too much for its own good, but nothing crazy (some tables and a form in a dialog on top).

We’re consuming react-focus-lock via @reach/dialog, so we worked around the issue by disabling it in test environments like this:

 <DialogOverlay dangerouslyBypassFocusLock={process.env.NODE_ENV === "test"}>

CRA v4 came with jest and jsdom updates. Maybe something about those new versions doesn’t play well with react-focus-lock?