title: Testing Input Data in React using Jest
body: <p>I have created a simple form in React and I am using Jest to practice my unit testing. I am currently testing my Form Component that renders the input values into the DOM and it keeps on failing because of the TypeError: Cannot read property 'firstName' of undefined. My goal is for all the input labels to be able to pass.</p>
  <p><strong>FormComponent.js</strong></p>
  <pre><code>import React from 'react'
  
  const FormComponent = (props) =&gt; {
  return (
      &lt;main&gt;
  
          &lt;form&gt;
              &lt;input type=&quot;text&quot; value = {props.data.firstName}  name = &quot;firstName&quot; placeholder = &quot;First Name&quot; onChange = {props.handleChange} /&gt; &lt;br/&gt;
              &lt;input type=&quot;text&quot; value = {props.data.lastName}  name = &quot;lastName&quot; placeholder = &quot;Last Name&quot; onChange = {props.handleChange} /&gt; &lt;br/&gt;
              &lt;input type=&quot;text&quot; value = {props.data.age}  name = &quot;age&quot; placeholder = &quot;Age&quot; onChange = {props.handleChange} /&gt; &lt;br/&gt;
              &lt;input type=&quot;text&quot; value = {props.data.location}  name = &quot;location&quot; placeholder = &quot;Location&quot; onChange = {props.handleChange} /&gt; &lt;br/&gt;
              &lt;br/&gt;
              &lt;label&gt;
                  &lt;input 
                      type = &quot;radio&quot;
                      value = &quot;Male&quot;
                      name = &quot;gender&quot;
                      checked = {props.data.gender === &quot;Male&quot;}
                      onChange = {props.handleChange}
                      /&gt; Male
                      &lt;br/&gt;
              &lt;/label&gt;
              &lt;label&gt;
                  &lt;input 
                      type = &quot;radio&quot;
                      value = &quot;Female&quot;
                      name = &quot;gender&quot;
                      checked = {props.data.gender === &quot;Female&quot;}
                      onChange = {props.handleChange}
                      /&gt; Female
                      &lt;br/&gt;
              &lt;/label&gt;
  
              &lt;br /&gt;
              &lt;br /&gt;
              
              &lt;button&gt;Submit&lt;/button&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;h1&gt;Entered information: &lt;/h1&gt;
              &lt;h3&gt;Your name: {props.data.firstName} {props.data.lastName} &lt;/h3&gt;
              &lt;h3&gt;Your age: {props.data.age} &lt;/h3&gt;
              &lt;h3&gt;Gender: {props.data.gender} &lt;/h3&gt;
              &lt;h3&gt;Location: {props.data.location} &lt;/h3&gt;
                     
          &lt;/form&gt;
      &lt;/main&gt;
    )
  }
  
  
  export default FormComponent
  </code></pre>
  <p><strong>FormComponent.test.js</strong></p>
  <pre><code>import React from 'react'
  import FormComponent from './FormComponent'
  import Enzyme,{
  configure,
  shallow,
  mount,
  render } from 'enzyme'
  import Adapter from &quot;enzyme-adapter-react-16&quot;
  
  Enzyme.configure({adapter: new Adapter() });
  
  global.React = React;
  global.Enzyme = Enzyme;
  global.shallow = shallow;
  global.render = render;
  global.mount = mount;
  
  describe(&quot;Form Input Data&quot;, () =&gt; {
      it(&quot;should render the first name&quot;, () =&gt; {
          const component = shallow(&lt;FormComponent 
            name = &quot;firstName&quot; label = &quot;First Name&quot;  /&gt;)
          const label = component.find('label')
          expect(label).toHaveLength(1);
          expect(label.prop('htmlFor')).toEqual('firstName');
          expect(label.text()).toEqual('First Name');
      
          const input = component.find('input');
          expect(input).toHaveLength(1)
          expect(input.prop('type')).toEqual('text')
          expect(input.prop('name')).toEqual('firstName')
          expect(input.prop('id')).toEqual('firstName')
      })
  })
  </code></pre>
  <p><strong>Testing Results</strong></p>
  <p><a href="https://i.stack.imgur.com/XBPnw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XBPnw.png" alt="Test Results" /></a></p>
  <p>This is my first time testing in React using Jest and I have no idea how to get my component to pass. I really appreciate all possible solutions. Thanks.</p>