Field must be inside a component decorated with reduxForm()

[valdemars]

Hello. I try to test checkbox like this

<Field  
  name="my-checkbox"
  id="my-checkbox"
  type="checkbox"
  component="input"
/>

simple test for this checkbox

it("click checkbox", () => {
  _wrapper.find('#my-checkbox').simulate('click');
  expect(_wrapper.find('#my-checkbox')).to.be.checked();
}

and get this error

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

I quess the Field after click simulate require redux-form context or smth like this

[ssilve1989]

bump

[apleduardo]

@valdemars i've had the same issue, it fix to me https://github.com/erikras/redux-form/issues/849

[sangel10]

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

[ssilve1989]

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

[sangel10]

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

[ashkart]

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

[mbanda1]

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

[quantuminformation]

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

[tylercollier]

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.