Needs better client/server side detection for test cases

[nickretallack]

What is the current behavior?

If I run this jest test:

import React from 'react';
import {render} from 'enzyme';
import {connect, Provider} from 'react-redux';
import {createStore} from 'redux';

describe('Component', () => {
  it('renders', () => {
    const Component = () => <div>Hello</div>;
    const ConnectedComponent = connect()(Component);
    const reducer = () => {};
    const store = createStore(reducer);
    render(
      <Provider store={store}>
        <ConnectedComponent />
      </Provider>,
    );
  });
});

I get a 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.%s

My test suite is configured to consider warnings to be failures, so tests like this are a problem. The warning doesn't happen when I used react-redux 6.x, but when I upgrade to 7.x it does.

Based on this thread, I would assume the problem is that react and react-redux disagree about whether this is server-side rendering or not. react thinks it's server-side. react-redux thinks it's client-side. This is probably because jest creates a window object.

They provide a solution: switch the jest environment to node. This doesn't work in my case since my tests do rely on the window object in practice.

What is the expected behavior?

React and React-Redux should agree about whether server-side rendering is occurring. No warning should be produced when running tests with jest and enzyme.

I imagine this could be a problem for legitimate server-side rendering as well if they're using jsdom.

[timdorr]

#1492 is essentially a duplicate of this.

As I stated in that issue, if you're creating a global window object, you are effectively creating a browser environment. That's going to affect a lot of libraries, not just us.

We also use the exact same logic as React to detect the browser vs server:

https://github.com/facebook/react/blob/1eb2b892dfffedfdb57039ef715fc7049f4d538a/packages/shared/ExecutionEnvironment.js#L11-L13

react-redux/src/utils/useIsomorphicLayoutEffect.js

Lines 13 to 15 in d8070ab

	typeof window !== 'undefined' &&
	typeof window.document !== 'undefined' &&
	typeof window.document.createElement !== 'undefined'

I think what's likely happening is you're setting up that browser environment incorrectly. We shouldn't disagree with React, so your window is created at the wrong time or in the wrong way. I'm not sure without seeing your full project. This doesn't appear to be a bug in React Redux, though.