title: How to test if a prop is rendered correctly in a Component using Jest and Enzyme in React
body: <p>I have a React component named <strong>Product</strong> which looks like this:</p>
  
  <pre><code>&lt;div&gt;
              &lt;Wrapper&gt;
                  &lt;Heading&gt;{props.headerText}&lt;/Heading&gt;
                  &lt;Service&gt;({props.items.length})&lt;/Service&gt;
              &lt;/Wrapper&gt;
              {props.items !== undefined &amp;&amp; props.items.length &gt; 0 ? (
                  &lt;TableWrapper&gt;
                      {props.items &amp;&amp;
                          props.items.length &gt; 0 &amp;&amp; (
                              &lt;DataTable paginationSize={props.paginationSize}&gt;
                                  &lt;DataTable.Heading accessor="name"&gt; Name &lt;/DataTable.Heading&gt;
                                  &lt;DataTable.Heading accessor="id"&gt; Service ID &lt;/DataTable.Heading&gt;
                                  &lt;DataTable.Heading accessor="type"&gt; Access &lt;/DataTable.Heading&gt;
                                  &lt;DataTable.Heading accessor="band"&gt; Band &lt;/DataTable.Heading&gt;
                                  &lt;DataTable.Heading accessor="noUsers"&gt; Users &lt;/DataTable.Heading&gt;
  
                                  {props.tableItems.map((p, i) =&gt; {
                                      return &lt;DataTable.Row key={i} data={p} /&gt;;
                                  })}
                              &lt;/DataTable&gt;
                          )}
                  &lt;/TableWrapper&gt;
              ) : (
                  &lt;NoMessage&gt;{props.noItemMessage}&lt;/NoMessage&gt;
              )}
          &lt;/div&gt;
  </code></pre>
  
  <p>where <strong>Wrapper</strong>, <strong>Heading</strong>, <strong>Service</strong>, <strong>TableWrapper</strong> are styled-components. I am trying <strong>to test this component using Jest and Enzyme to check if the headerText prop is being rendered correctly</strong>.The below given code is how I am trying to write my test case:</p>
  
  <pre><code> test("header text is being passed through correctly", () =&gt; {
          const wrapper = mount(
              &lt;Product items={data} headerText="Service" paginationSize="5" noItemMessage="No results found" /&gt;
          );
          expect(wrapper.find(HeaderText).text()).toEqual("Service");
  </code></pre>
  
  <p>but I get this error as: </p>
  
  <pre><code>TypeError: Cannot read property 'blue' of undefined
  
        at Object.&lt;anonymous&gt;.exports.RightArrow.Icons.RightArrow.extend.props (src/lib/DataTable.js:149:129)
  </code></pre>
  
  <p>and the line 149 in DataTable.js is:</p>
  
  <pre><code>color: ${props =&gt; props.theme.secondary.blue};
  </code></pre>
  
  <p>I am not able to figure out why I am getting this error. Can anyone please guide me with this issue? I am just trying to check if the headerText is rendered properly from the props.</p>