title: enzyme simulate submit form, Cannot read property 'value' of undefined
body: <p>I'm having some difficulty testing a component with jest and enzyme.  What I would like to do is test submitting the form without a value in the name field.  This will make certain that the component is displaying an error.  However, when I run the rest I am getting an error in my console:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'value' of undefined</p>
  </blockquote>
  
  <p>I'm fairly new to front-end testing, and testing in general.  So, I'm not entirely sure I'm using enzyme correctly for this type of test.  I don't know if my tests are incorrect or if I've just written a component that is not easily tested.  I'm open to changing my component if that will make it easier to test?</p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>class InputForm extends Component {
    constructor(props) {
      super(props);
      this.onFormSubmit = this.onFormSubmit.bind(this);
    }
  
    onFormSubmit(e) {
      e.preventDefault();
      // this is where the error comes from
      const name = this.name.value;
      this.props.submitForm(name);
    }
  
    render() {
      let errorMsg = (this.props.validationError ? 'Please enter your name.' : null);
      return (
        &lt;form onSubmit={(e) =&gt; this.onFormSubmit(e)}&gt;
          &lt;input
            type="text"
            placeholder="Name"
            ref={ref =&gt; {
                   this.name = ref
                 }}
          /&gt;
          &lt;p className="error"&gt;
            {errorMsg}
          &lt;/p&gt;
          &lt;input
            type="submit"
            className="btn"
            value="Submit"
          /&gt;
        &lt;/form&gt;
        );
    }
  }
  InputForm.propTypes = {
    submitForm: React.PropTypes.func.isRequired,
  };
  </code></pre>
  
  <p><strong>Test</strong></p>
  
  <pre><code>  // all other code omitted
    // bear in mind I am shallow rendering the component
  
    describe('the user does not populate the input field', () =&gt; {
  
      it('should display an error', () =&gt; {
        const form = wrapper.find('form').first();
        form.simulate('submit', {
          preventDefault: () =&gt; {
          },
          // below I am trying to set the value of the name field
          target: [
            {
              value: '',
            }
          ],
        });
        expect(
          wrapper.text()
        ).toBe('Please enter your name.');
      });
  
    });
  </code></pre>