title: React jest testing: Cannot read properties of undefined (reading 'id')
body: <p>I am testing  a react component with jest. it gives the bellow mention error in the terminal. can somebody help me to solve this. here I have attached my js file and its test file.</p>
  <p>//------------------------------------------------------------------------------------------</p>
  <p>ERROR</p>
  <pre><code> FAIL  src/features/dashboard/components/jest-tests/ExpandedInstancDetails.test.js (19.767 s)
    ExpandedInstancDetails component
      × navigation of the page to nxt page (216 ms)
  
    ● ExpandedInstancDetails component › navigation of the page to nxt page
  
      TypeError: Cannot read properties of undefined (reading 'id')
  
        25 |           &lt;/Text&gt;
        26 |           &lt;Text className=&quot;poppins expanded-content-id&quot;&gt;
      &gt; 27 |             ID :{props.instanceDetails.id}
           |                                        ^
        28 |           &lt;/Text&gt;
        29 |         &lt;/div&gt;
        30 |
  
        at ExpandedInstancDetails (src/features/dashboard/components/ExpandedInstancDetails.js:27:40)
        at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14803:18)
        at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17482:13)
        at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18596:16)
        at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
        at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
        at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
        at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16)
        at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
        at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
        at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
        at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
        at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)
        at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21188:7)
        at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24373:3)
        at node_modules/react-dom/cjs/react-dom.development.js:24758:7
        at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21903:12)
        at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24757:5)
        at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
        at node_modules/@testing-library/react/dist/pure.js:101:25
        at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)
        at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
        at render (node_modules/@testing-library/react/dist/pure.js:97:26)
        at Object.&lt;anonymous&gt; (src/features/dashboard/components/jest-tests/ExpandedInstancDetails.test.js:36:27)
  </code></pre>
  <p>//------------------------------------------------------------------------------------------</p>
  <p>ExpandedInstancDetails.js</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;../styles/ExpandedInstancDetails.less&quot;;
  import { useHistory } from &quot;react-router-dom&quot;;
  import ExpandedInstanceSchedule from &quot;./ExpandedInstanceShedule&quot;;
  import { Typography } from &quot;antd&quot;;
  import moment from &quot;moment&quot;;
  const { Text } = Typography;
  
  const ExpandedInstancDetails = (props) =&gt; {
    const history = useHistory();
  
    const MoreDetailsClick = () =&gt; {
      history.push({
        pathname: &quot;/dashboard/instancedetails&quot;,
        state: { instanceId: &quot;i-0b3db6cb7bebde704&quot; },
      });
    //   history.push( &quot;/dashboard/instancedetails&quot;);
    };
    return (
      &lt;div&gt;
        &lt;div className=&quot;expanded-content&quot;&gt;
          &lt;div className=&quot;expanded-content-title-section&quot;&gt;
            &lt;Text className=&quot;poppins expanded-content-title&quot;&gt;
              Instance Details
            &lt;/Text&gt;
            &lt;Text className=&quot;poppins expanded-content-id&quot;&gt;
              ID :{props.instanceDetails.id}
            &lt;/Text&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;expanded-detail-section&quot;&gt;
           &lt;div className=&quot;expanded-detail-box-type&quot;&gt;
              &lt;div className=&quot;expanded-detail-box-content&quot;&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-title&quot;&gt;
                  TYPE
                &lt;/Text&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-value&quot;&gt;
                  {props.instanceDetails.type}
                &lt;/Text&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;expanded-detail-box-lounchtime&quot;&gt;
              &lt;div className=&quot;expanded-detail-box-content&quot;&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-title&quot;&gt;
                  LOUNCHTIME
                &lt;/Text&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-value&quot;&gt;
                {props.instanceDetails.launchTime}
                &lt;/Text&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;expanded-detail-box-region&quot;&gt;
              &lt;div className=&quot;expanded-detail-box-content&quot;&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-title&quot;&gt;
                  REGION
                &lt;/Text&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-value&quot;&gt;
                  {props.instanceDetails.region}
                &lt;/Text&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;expanded-detail-box-1&quot;&gt;
              &lt;div className=&quot;expanded-detail-box-content&quot;&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-title&quot;&gt;
                  SUBNET ID
                &lt;/Text&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-value&quot;&gt;
                  {props.instanceDetails.subnetId}
                &lt;/Text&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;expanded-detail-box-2&quot;&gt;
              &lt;div className=&quot;expanded-detail-box-content&quot;&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-title&quot;&gt;
                  VPC ID
                &lt;/Text&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-value&quot;&gt;
                  {props.instanceDetails.vpcId}
                &lt;/Text&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;expanded-detail-box-3&quot;&gt;
              &lt;div className=&quot;expanded-detail-box-content&quot;&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-title&quot;&gt;
                  AVAILABILITY ZONE
                &lt;/Text&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-value&quot;&gt;
                  {props.instanceDetails.availabilityZone}
                &lt;/Text&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;expanded-detail-box-4&quot;&gt;
              &lt;div className=&quot;expanded-detail-box-content&quot;&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-title&quot;&gt;
                  CREATION TIME
                &lt;/Text&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-value&quot;&gt;
                  {props.instanceDetails.launchTime}
                &lt;/Text&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;expanded-detail-box-5&quot;&gt;
              &lt;div className=&quot;expanded-detail-box-content&quot;&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-title&quot;&gt;
                  PRIVATE IP ADDRESS
                &lt;/Text&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-value&quot;&gt;
                  {props.instanceDetails.privateIpAddress}
                &lt;/Text&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;expanded-detail-box-6&quot;&gt;
              &lt;div className=&quot;expanded-detail-box-content&quot;&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-title&quot;&gt;
                  PUBLIC IP ADDRESS
                &lt;/Text&gt;
                &lt;Text className=&quot;poppins expanded-content-detail-value&quot;&gt;
                  {props.instanceDetails.publicIpAddress}
                &lt;/Text&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt; 
  
          &lt;Text
            className=&quot;poppins expanded-content-pointer-button&quot;
            data-testid=&quot;button&quot;          
            style={{ cursor: &quot;pointer&quot; }}
            onClick={MoreDetailsClick}
          &gt;
            more details
          &lt;/Text&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  export default ExpandedInstancDetails ;
  </code></pre>
  <p>//------------------------------------------------------------------------------------------</p>
  <p>ExpandedInstancDetails.test.js</p>
  <pre><code>import { render, screen, act, getByTestId } from &quot;@testing-library/react&quot;;
  import userEvent from &quot;@testing-library/user-event&quot;;
  import ExpandedInstancDetails from &quot;../ExpandedInstancDetails&quot;;
  import { shallow, configure } from &quot;enzyme&quot;;
  import React from &quot;react&quot;;
  import { MemoryRouter } from &quot;react-router-dom&quot;;
  import { fireEvent } from &quot;@testing-library/react&quot;;
  import { createMemoryHistory } from &quot;history&quot;;
  import { Router } from &quot;react-router-dom&quot;;
  import configureMockStore from &quot;redux-mock-store&quot;;
  import thunk from &quot;redux-thunk&quot;;
  import Adapter from &quot;enzyme-adapter-react-16&quot;;
  import { MoreDetailsClick } from &quot;../ExpandedInstancDetails&quot;;
  import reactRouterDom from &quot;react-router-dom&quot;;
  
  const mockStore = configureMockStore([thunk]);
  configure({ adapter: new Adapter() });
  
  describe(&quot;ExpandedInstancDetails component&quot;, () =&gt; {
    const history = createMemoryHistory();
  
    const props = {
      id: &quot;100&quot;,
      type: &quot;Total Instances&quot;,
      launchTime: &quot;TotalInstances.svg&quot;,
      region: &quot;Total Instances&quot;,
      subnetId: &quot;Total Instances&quot;,
      vpcId: &quot;Total Instances&quot;,
      availabilityZone: &quot;Total Instances&quot;,
      launchTime: &quot;Total Instances&quot;,
      privateIpAddress: &quot;Total Instances&quot;,
      publicIpAddress: &quot;Total Instances&quot;,
    };
  
    it(&quot;navigation of the page to nxt page&quot;, () =&gt; {
      const { getByRole } = render(
        &lt;Router history={history}&gt;
          &lt;ExpandedInstancDetails props={props} onClick={MoreDetailsClick} /&gt;
        &lt;/Router&gt;
      );
  
      fireEvent.click(screen.getByText(/more details/i));
      expect(history.location.pathname).toBe(&quot;/dashboard/instancedetails&quot;);
    });
  });
  </code></pre>