title: How to get full test coverage for the react code
body: <p>Im new to unit testing , there is a functional component for which I have written some test cases , but unable to get full test coverage with jest and enzyme . Other than function coverage all are covered which I tested with 
  <code>npm test -- --coverage</code> . I have added the test coverage command and the test coverage html in the code snippet</p>
  
  <pre><code>const TargetAudience = ({ searchResults }) =&gt; (
      &lt;React.Fragment&gt;
          &lt;div className="target-audience-header"&gt;Target Audience&lt;/div&gt;
      {searchResults.length &gt; 0 ?
        &lt;Table columns={columns} dataSource={data} /&gt;
        :
        null
      }
  
      &lt;/React.Fragment&gt;
  );
  </code></pre>
  
  <pre><code>describe('search results props test', () =&gt; {
      it('expect to render targetAudience component with search results props length &gt; 0 ', ()=&gt; {
          const searchRes = ['a', 'b']; 
          expect(shallow(&lt;TargetAudience searchResults={searchRes} /&gt;)).toMatchSnapshot();
      })
  
      it('expect to render targetAudience component with search results props length = 0', () =&gt; {
          const searchRes = [];
          expect(shallow(&lt;TargetAudience searchResults={searchRes} /&gt;)).toMatchSnapshot();
      })
  })
  </code></pre>
  
  <pre><code>describe('test the table component', () =&gt; {
      it('expect to render table component when searchResults props has some 
          values ', ()=&gt; {
          const searchRes = ['a', 'b'];
  
          const wrapper = shallow(&lt;TargetAudience searchResults={searchRes} /&gt;)
  
          expect(wrapper.find('Table').length).toBe(1);
          expect(wrapper.find('.target-audience-header').length).toBe(1)
      }) 
      it('render date input correctly with null value', () =&gt; {
          const searchRes = [1, 2];
          const columns = {};
          const wrapper = shallow(&lt;TargetAudience searchResults={searchRes} /&gt;);
          expect(wrapper.find('Table').props().columns).toBe({});
      });
  })
  </code></pre>
  
  <p>The test Coverage is:</p>
  
  <pre><code>File                                    |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
   src/containers/audience/targetAudience |       80 |      100 |       50 |       80 |                   |
    index.js                              |       80 |      100 |       50 |       80 |                 9 |
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Code coverage report for src/containers/audience/targetAudience&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="..\..\..\..\prettify.css" /&gt;
      &lt;link rel="stylesheet" href="..\..\..\..\base.css" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;style type='text/css'&gt;
          .coverage-summary .sorter {
              background-image: url(..\..\..\..\sort-arrow-sprite.png);
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class='wrapper'&gt;
    &lt;div class='pad1'&gt;
      &lt;h1&gt;
        &lt;a href="..\..\..\..\index.html"&gt;All files&lt;/a&gt; src/containers/audience/targetAudience
      &lt;/h1&gt;
      &lt;div class='clearfix'&gt;
        &lt;div class='fl pad1y space-right2'&gt;
          &lt;span class="strong"&gt;80% &lt;/span&gt;
          &lt;span class="quiet"&gt;Statements&lt;/span&gt;
          &lt;span class='fraction'&gt;4/5&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class='fl pad1y space-right2'&gt;
          &lt;span class="strong"&gt;100% &lt;/span&gt;
          &lt;span class="quiet"&gt;Branches&lt;/span&gt;
          &lt;span class='fraction'&gt;2/2&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class='fl pad1y space-right2'&gt;
          &lt;span class="strong"&gt;50% &lt;/span&gt;
          &lt;span class="quiet"&gt;Functions&lt;/span&gt;
          &lt;span class='fraction'&gt;1/2&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class='fl pad1y space-right2'&gt;
          &lt;span class="strong"&gt;80% &lt;/span&gt;
          &lt;span class="quiet"&gt;Lines&lt;/span&gt;
          &lt;span class='fraction'&gt;4/5&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='status-line high'&gt;&lt;/div&gt;
  &lt;div class="pad1"&gt;
  &lt;table class="coverage-summary"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
     &lt;th data-col="file" data-fmt="html" data-html="true" class="file"&gt;File&lt;/th&gt;
     &lt;th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"&gt;&lt;/th&gt;
     &lt;th data-col="statements" data-type="number" data-fmt="pct" class="pct"&gt;Statements&lt;/th&gt;
     &lt;th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"&gt;&lt;/th&gt;
     &lt;th data-col="branches" data-type="number" data-fmt="pct" class="pct"&gt;Branches&lt;/th&gt;
     &lt;th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"&gt;&lt;/th&gt;
     &lt;th data-col="functions" data-type="number" data-fmt="pct" class="pct"&gt;Functions&lt;/th&gt;
     &lt;th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"&gt;&lt;/th&gt;
     &lt;th data-col="lines" data-type="number" data-fmt="pct" class="pct"&gt;Lines&lt;/th&gt;
     &lt;th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;&lt;tr&gt;
   &lt;td class="file high" data-value="index.js"&gt;&lt;a href="index.js.html"&gt;index.js&lt;/a&gt;&lt;/td&gt;
   &lt;td data-value="80" class="pic high"&gt;&lt;div class="chart"&gt;&lt;div class="cover-fill" style="width: 80%;"&gt;&lt;/div&gt;&lt;div class="cover-empty" style="width:20%;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
   &lt;td data-value="80" class="pct high"&gt;80%&lt;/td&gt;
   &lt;td data-value="5" class="abs high"&gt;4/5&lt;/td&gt;
   &lt;td data-value="100" class="pct high"&gt;100%&lt;/td&gt;
   &lt;td data-value="2" class="abs high"&gt;2/2&lt;/td&gt;
   &lt;td data-value="50" class="pct medium"&gt;50%&lt;/td&gt;
   &lt;td data-value="2" class="abs medium"&gt;1/2&lt;/td&gt;
   &lt;td data-value="80" class="pct high"&gt;80%&lt;/td&gt;
   &lt;td data-value="5" class="abs high"&gt;4/5&lt;/td&gt;
   &lt;/tr&gt;
  
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;&lt;div class='push'&gt;&lt;/div&gt;&lt;!-- for sticky footer --&gt;
  &lt;/div&gt;&lt;!-- /wrapper --&gt;
  &lt;div class='footer quiet pad2 space-top1 center small'&gt;
    Code coverage
    generated by &lt;a href="https://istanbul.js.org/" target="_blank"&gt;istanbul&lt;/a&gt; at Sat Aug 24 2019 09:12:32 GMT+0530 (India Standard Time)
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="..\..\..\..\prettify.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  window.onload = function () {
          if (typeof prettyPrint === 'function') {
              prettyPrint();
          }
  };
  &lt;/script&gt;
  &lt;script src="..\..\..\..\sorter.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>