dagda1 dagda1 - 14 days ago 6
React JSX Question

correct syntax for react higher order compon

I have the following test which works:

describe('<UploadForm />', ()=> {
it('should render a <Form />', () => {
const wrapper = mount(
<Provider store={store}>
<UploadForm />
</Provider>
);

expect(wrapper.find('form').length).to.equal(1);
});
})


I then wanted to move the wrapping of the form in to a higher order function.

export function TestWrapper(WrappedComponent) {
return class extends React.Component {
render() {
return (
<Provider store={store}>
<WrappedComponent />
</Provider>
);
};
}
}


And my calling code looks like this:

describe('<UploadForm />', ()=> {
it('should render a <Form />', () => {
const wrapper = mount(
TestWrapper(UploadForm)
);

expect(wrapper.find('form').length).to.equal(1);
});
})


But I get this error message:

VM456 context.js:219 Warning: Failed prop type: The prop `Component` is marked as required in `<<anonymous>>`, but its value is `undefined`.
in UnknownlocalConsole.(anonymous function) @ VM456 context.js:219printWarning @ warning.js:36warning @ warning.js:60checkReactTypeSpec @ checkReactTypeSpec.js:80validatePropTypes @ ReactElementValidator.js:151createElement @ ReactElementValidator.js:187ReactWrapper @ ReactWrapper.js:94mount @ mount.js:19(anonymous function) @ UploadForm-test.js:31callFn @ VM460 mocha.js?bc2b9e2…:4445Runnable.run @ VM460 mocha.js?bc2b9e2…:4437Runner.runTest @ VM460 mocha.js?bc2b9e2…:4934(anonymous function) @ VM460 mocha.js?bc2b9e2…:5040next @ VM460 mocha.js?bc2b9e2…:4851(anonymous function) @ VM460 mocha.js?bc2b9e2…:4861next @ VM460 mocha.js?bc2b9e2…:4785(anonymous function) @ VM460 mocha.js?bc2b9e2…:4829timeslice @ VM460 mocha.js?bc2b9e2…:82
VM456 context.js:219 Warning: Failed prop type: The prop `props` is marked as required in `<<anonymous>>`, but its value is `undefined`.
in UnknownlocalConsole.(anonymous function) @ VM456 context.js:219printWarning @ warning.js:36warning @ warning.js:60checkReactTypeSpec @ checkReactTypeSpec.js:80validatePropTypes @ ReactElementValidator.js:151createElement @ ReactElementValidator.js:187ReactWrapper @ ReactWrapper.js:94mount @ mount.js:19(anonymous function) @ UploadForm-test.js:31callFn @ VM460 mocha.js?bc2b9e2…:4445Runnable.run @ VM460 mocha.js?bc2b9e2…:4437Runner.runTest @ VM460 mocha.js?bc2b9e2…:4934(anonymous function) @ VM460 mocha.js?bc2b9e2…:5040next @ VM460 mocha.js?bc2b9e2…:4851(anonymous function) @ VM460 mocha.js?bc2b9e2…:4861next @ VM460 mocha.js?bc2b9e2…:4785(anonymous function) @ VM460 mocha.js?bc2b9e2…:4829timeslice @ VM460 mocha.js?bc2b9e2…:82
VM456 context.js:219 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Answer

In your working test, you give a React.Component instance to mount(), and in your broken test, you give a React.Component class (which is returned from TestWrapper()). Shouldn't you instantiate it like this?

const WrappedComponent = TestWrapper(UploadForm);
mount(<WrappedComponent />);