Question

我有一个更高阶的组件使用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() });

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

有什么想法吗？

Answer 1

如果有其他人在这里结束：升级从15. *升级到16. *解决了问题。

重构：renderComponent通过jest / enzyme测试给出错误

1 个答案: