Search code examples
jestjsenzymereact-apollorecompose

Recompose: renderComponent gives errors with jest / enzyme testing

I have a higher order component that uses renderComponent with branch to show a loading screen when my data is still loading (the data comes from a react-apollo query):

import { branch, renderComponent } from 'recompose';

const waitForLoad = branch(
  ({ data: { loading } }) => loading,
  renderComponent(() => <div>LOADING...</div>),
);

This works fine, but it's giving me trouble when I try testing with jest and enzyme. My test includes the line

import { ApolloProvider } from 'react-apollo';
import MockRouter from 'react-mock-router';

...

mount(
    <ApolloProvider client={client}>
      <MockRouter push={push}>
        <Backups />
      </MockRouter>
    </ApolloProvider>
  )

where Backups is wrapped with waitForLoad().

The test gives the following errors enter image description here

Everything works fine when removing renderComponent.

I have a setup file running before everything else:

import { JSDOM } from 'jsdom';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import 'jsdom-global/register';

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;
window.URL = {
  createObjectURL: () => ({}),
  revokeObjectURL: () => ({}),
};

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === 'undefined')
    .reduce((result, prop) => ({
      ...result,
      [prop]: Object.getOwnPropertyDescriptor(src, prop),
    }), {});
  Object.defineProperties(target, props);
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);

Enzyme.configure({ adapter: new Adapter() });

I have tried a lot of solutions to the above errors, including:

Any ideas?

Solution

  • In case anyone else ends up here: Upgrading react from 15.* to 16.* solved the issue.