title: React Testing Library, Component Unit Tests
body: <p>I am trying to build a test unit for my simple React Application using React Testing Library. I readed all docs and get stuck in it.</p>
  
  <p>API was created by create React app. One of the feature is that user can change theme. There is setTheme hook that going to change theme "dark" and "light".</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>const App = () =&gt; { 
  const [theme, setTheme] = useState('dark'); 
  return ( &lt;div&gt;
             &lt;Header theme={theme} setTheme={setTheme} /&gt;
          &lt;/div&gt;)
  };
  </code></pre>
  
  <p><strong>Header.js</strong></p>
  
  <pre><code>import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  
  const Header = props =&gt; {
    return (
      &lt;header data-testid="header"&gt;
        &lt;h1&gt;&lt;span className="highlight"&gt;Github Users&lt;/span&gt;&lt;/h1&gt;
        {props.theme === "dark" ? 
          &lt;FontAwesomeIcon data-testid="button" icon="sun" size="2x" color="#dcba31"  onClick={ () =&gt; props.setTheme('light') }/&gt;
          :  &lt;FontAwesomeIcon icon="moon" size="2x" color="#1c132d" onClick={ () =&gt; props.setTheme('dark') }/&gt;}
      &lt;/header&gt;
    );
  }
  export default Header;
  </code></pre>
  
  <p>In Header component I added arrow function that changes color of theme.</p>
  
  <p>Now I am trying to write a test that's gonna test Header Component. 
  <strong>Expected result</strong> is that after first render Header component shall render icon "sun".
  After  user click on it header shall return icon "moon". </p>
  
  <p>There is something that i try but it's not working as I mention. </p>
  
  <p><strong>Header.test.js</strong></p>
  
  <pre><code>import React from 'react';
  import { render, cleanup } from "@testing-library/react"
  import '@testing-library/jest-dom/extend-expect';
  import { act } from "react-dom/test-utils";
  
  
  import Header from '../components/Header';
  
  afterEach(cleanup);
  
  describe("Header Component", () =&gt; { 
      it("first render should return a sun icon", () =&gt; {
          const {getByTestId } = render(&lt;Header /&gt;)
          expect(getByTestId("header"). // What method uses here? To check if it is icon sun or moon ? )
  
      })
      it("after mouse click event should return a moon icon", () =&gt; {
          const button = document.querySelector("svg"); // it is correct way to add a svg element as a button ?
          act( () =&gt; {
              button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
          })
          expect(getByTestId("header").  // again what to write here to test it after click ?
      })
  })
  </code></pre>
  
  <p>I am sure that there is some other way to check first render and then after click what's Header component rendering. I think that problem is that there is another Component  that is rendered conditionaly. If it is text there is no problem, but after render there is svg element with some attributes like icon="sun" / icon="moon". </p>
  
  <p><a href="https://szildaniel.github.io/Github-Users-API/" rel="nofollow noreferrer"><em>Live</em> version of project</a></p>
  
  <p><a href="https://github.com/szildaniel/Github-Users-API/" rel="nofollow noreferrer"><em>Github</em> Repo Link</a></p>
  
  <p>Questions:</p>
  
  <ol>
  <li>How to properly test that Header component ?</li>
  <li>How to pass props in test for example I want to use that setTheme hook in test how to do it ?</li>
  </ol>