CODEWITHSUNDEEP
reactjs
dagda1
dagda1

Reputation: 28810

correct syntax for react higher order component

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).

Upvotes: 0

Views: 454

Answers (1)

Maarten ter Horst
Maarten ter Horst

Reputation: 2987

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 />);

Upvotes: 1

Related Questions