enzyme simulate submit form, Cannot read property 'value' of undefined
<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>