useIsomorphicLayoutEffect check is incorrect in Jest + jsdom

[jamesarosen]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

I'm trying to test a Redux-connected React component. Whenever I run the test, I get the following warning:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.

The warning comes from React-DOM.

React-Redux is aware of the issue and defines useIsomorphicLayoutEffect based on the presence of window.document.createElement. In a normal server-side-rendering environment, that check works great.

But in a test environment, jsdom defines global.window.document.createElement, so React-Redux's check causes it to use useLayoutEffect, causing the warning.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to a CodeSandbox (https://codesandbox.io/s/new) or RN Snack (https://snack.expo.io/) example below:

What is the expected behavior?

useIsomorphicLayoutEffect is useEffect in a jest test.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?

• react@16.8.6
• react-dom@16.8.6
• redux@4.0.1
• react-redux@7.1.0
• jest@24.5.0
• jest-environment-jsdom@24.5.0
• jsdom@11.12.0

[markerikson]

I believe the suggestion that's come up is to define your Jest test environment as "node", or something like that.

Ultimately, there's only so much we can do here. React insists on logging this warning. We've done our best to feature-detect and work around it.

If you've got any suggestions for improving the behavior, I'm absolutely interested. Beyond that, we've got our best attempt at a solution in place already.

[jamesarosen]

I believe the suggestion that's come up is to define your Jest test environment as "node", or something like that.

I looked around online and didn’t find anything like that. Could we add it to the docs or a FAQ somewhere?

[markerikson]

The primary issue discussing the useLayoutEffect warning is facebook/react#14927 . Specifically, this comment makes that suggestion:

facebook/react#14927 (comment)

And yeah, go ahead and file a PR to mention that in the "Troubleshooting" docs page (which we really need to update anyway).