Field must be inside a component decorated with reduxForm() about redux-form-test HOT 9 CLOSED

I had this issue and it turns out I'd forgotten to wrap the component with reduxForm, doing that got it to work.

export default (reduxForm({
  form: formName,
})(MyComponent));

from redux-form-test.

import React from 'react'
import { Field, reduxForm } from 'redux-form'

class TrackerView extends Component {
render(){
  <form onSubmit={handleSubmit}>
<div>
        <label>Favorite Color</label>
        <div>
          <Field name="favoriteColor" component="select">
            <option></option>
            <option value="#ff0000">Red</option>
            <option value="#00ff00">Green</option>
            <option value="#0000ff">Blue</option>
          </Field>
        </div>
      </div>
</form>
}
}

const SelectingForm = reduxForm({
  form: 'selectingFormValues'  ,
  enableReinitialize: true,

})(TrackerView)

export default (SelectingForm);

from redux-form-test.

possible solution here https://stackoverflow.com/questions/44940778/field-error-while-using-redux-form-in-react-js?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
It is in my case at least =)

from redux-form-test.

bump

from redux-form-test.

@valdemars i've had the same issue, it fix to me redux-form/redux-form#849

from redux-form-test.

@sangel10 I believe we are talking about testing the undecorated component though, so it purposely doesn't have reduxForm wrapping it in that case.

from redux-form-test.

@ssilve1989 Didn't see this was in the test repo, sorry about that

from redux-form-test.

How do I get round this error by not having to import a connected component in a test?

ie

export class PersonProfileTab extends React.PureComponent<
vs

export default connect((state) => ({

I my test with import { PersonProfileTab } from './PersonProfileTab';
I get

Summary of all failing tests
 FAIL  Src/Pages/People/PersonProfileTab.test.tsx (6.71s)
  ● PersonProfileTab.test.tsx › Datestarted behaves correctly

    Field must be inside a component decorated with reduxForm()

from redux-form-test.

Regarding the error:

Error: Field must be inside a component decorated with reduxForm()

You have two choices when testing your component.

1. Do not actually hook up the component to Redux Form. This is useful for e.g. testing if the error message is shown if the user has input invalid values. However, because you're not connected to redux, there is no (store) state, and thus you can't try to change it. So, in these tests, you can't do things that would interact with redux/Redux Form.
2. Hook it up to Redux Form. It's more involved to set up, but is a more realistic test. You are integrating your component with Redux Form, and that's where the name integration test comes from.

In your case, since you are checking the box, and want the state to change, you must wrap your component with Redux Form. See tests/integration/index.js, and note how it's creating and using a store.

from redux-form-test.