重构：renderComponent 给出了开玩笑/酶测试的错误答案

【问题标题】：Recompose: renderComponent gives errors with jest / enzyme testing重构：renderComponent 给出了开玩笑/酶测试的错误
【发布时间】：2018-10-05 17:20:18
【问题描述】：

我有一个高阶组件，它使用renderComponent 和branch 在我的数据仍在加载时显示加载屏幕（数据来自react-apollo 查询）：

import { branch, renderComponent } from 'recompose';

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

这很好用，但是当我尝试用 jest 和酶进行测试时它给我带来了麻烦。我的测试包括这一行

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

...

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

Backups 被 waitForLoad() 包裹。

测试出现以下错误

删除 renderComponent 后一切正常。

我有一个安装文件在其他所有东西之前运行：

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() });

我已经尝试了很多解决上述错误的方法，包括：

有什么想法吗？

【问题讨论】：

标签： jestjs enzyme react-apollo recompose

【解决方案1】：

万一其他人在这里结束：将 react 从 15.* 升级到 16.* 解决了这个问题。

【讨论】：