title: Jest UI React js components - unit tests
body: <p>I am pretty new to React and Jest unit test framework. I have my component and trying to write few unit test cases , tried few ways and unable to proceed further. Here is my code and test case. Can anyone guide /suggest the best approaches please.
  Non of the tests work and 
  Thanks</p>
  
  <p>React UI component Header</p>
  
  <pre><code>import React from 'react';
  import { Navbar, NavbarBrand } from 'reactstrap';
  import { Link } from 'react-router-dom';
  
  
  const Header = ({children}) =&gt;
      &lt;Navbar light className="sticky-top navbar-expand-lg navbar-toggleable-sm bg-white border-bottom"&gt;
          &lt;NavbarBrand tag={Link} to="/"&gt;Abc: Customer Portal&lt;/NavbarBrand&gt;
          &lt;div className="d-flex w-100 justify-content-end"&gt;
              {children}
          &lt;/div&gt;
      &lt;/Navbar&gt;
  
  export default Header
  </code></pre>
  
  <p>Tests - non of them pass, could anyone please guide me in the right direction.</p>
  
  <pre><code>import React from 'react'
  import { Navbar, NavbarBrand } from 'reactstrap';
  import renderer from 'react-test-renderer';
  import { render, unmountComponentAtNode, ReactDOM } from "react-dom";
  import { act } from "react-dom/test-utils";
  import GlobalSettings from './../features/Header/GlobalSettings';
  import UserDisplayName from './../features/Header/UserDisplayName';
  import Header from './../features/Header/';
  
  let container = null;
  beforeEach(() =&gt; {
      // setup a DOM element as a render target
      container = document.createElement("div");
      document.body.appendChild(container);
  });
  
  afterEach(() =&gt; {
      // cleanup on exiting
      unmountComponentAtNode(container);
      container.remove();
      container = null;
  });
  
  test('test Header component', () =&gt; {
      //const nav = document.createElement('Navbar');
      ReactDOM.render(&lt;Header&gt;
          &lt;Link to="/"&gt;Damage Matrix: Customer Portal&lt;/Link&gt;
                      &lt;/Header&gt;, Navbar);
      ReactDOM.unmountComponentAtNode(nav);
  });
  
  
  test('test Header', () =&gt; {
      act(() =&gt; {
          render(&lt;Header /&gt;, container);
      });
      expect(container.appendChild).toBe("Hello");
  
      act(() =&gt; {
          render(&lt;Header children="GlobalSettings" /&gt;, container);
      });
      expect(container.textContent).toBe("GlobalSettings");
  
  });
  
  test('renders correctly', () =&gt; {
      const tree = renderer.create(
          &lt;Header /&gt;
      ).toJSON();
      expect(tree).toMatchSnapshot();
  });
  
  
  
  </code></pre>