我有一个更高阶的组件，当我的数据仍在加载（数据来自查询）时，它使用renderComponentwith来显示加载屏幕：branchreact-apollo
import { branch, renderComponent } from 'recompose';
const waitForLoad = branch(
({ data: { loading } }) => loading,
renderComponent(() => <div>LOADING...</div>),
);
这很好用，但是当我尝试用玩笑和酶进行测试时，它给我带来了麻烦。我的测试包括该行
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() });
针对上述错误，我尝试了很多解决方案，包括：
- https://github.com/airbnb/enzyme/issues/395
- https://github.com/airbnb/enzyme/issues/58
- React + Enzyme 错误：Invariant Violation：dangerousRenderMarkup(...)：无法在工作线程中渲染标记
有任何想法吗？