重组：renderComponent 给出了玩笑/酶测试的错误

Question

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

import { branch, renderComponent } from 'recompose';

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

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

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

针对上述错误，我尝试了很多解决方案，包括：

有什么想法吗？

Answer 1

以防其他人在这里结束：将 React 从 15.* 升级到 16.* 解决了问题。

重组：renderComponent 给出了玩笑/酶测试的错误

Recompose: renderComponent gives errors with jest / enzyme testing

jestjs

enzyme

recompose

react-apollo