title: How to test the state of a functional component in React with Jest (No Enzyme)
body: <p>Hi everybody how can I test the state of a functional component from the useState hook?
  This my component:</p>
  
  <pre><code>const Container = styled.div
      display: flex;
      flex: 1;
      flex-direction: row;
      align-items: ${props =&gt; props.hasSubtitle ? 'flex-start' : 'center'};
      opacity: ${props =&gt; props.disabled ? 0.5 : 1.0};
      ${props =&gt; props.style}
  
  const Button = styled.button
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      outline: none;
  
  const TextContainer = styled.div
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-left: 12px;
  
  const CheckBox = props =&gt; {
      const [selected, setSelected] = useState(false);
  
      useEffect(() =&gt; {
          setSelected(props.selected);
      }, [props.selected]);
  
      return (
          &lt;Container data-testid={'checkbox'} style={props.style} hasSubtitle={props.subtitle}&gt;
              &lt;Button
                  data-testid={'checkBtn'}
                  onClick={() =&gt; {
                      if(!props.disabled){
                          setSelected(!selected);
                          if(props.onChange) props.onChange(!selected);
                      }
                  }}
              &gt;
                  {selected ? &lt;CheckBoxOn/&gt; : &lt;CheckBoxOff/&gt;}
              &lt;/Button&gt;
              &lt;TextContainer&gt;
                  &lt;Text style={{fontSize: 16}}&gt;
                      {props.title}
                  &lt;/Text&gt;
                  {props.subtitle &amp;&amp; &lt;Text style={{fontSize: 12}}&gt;{props.subtitle}&lt;/Text&gt;}
              &lt;/TextContainer&gt;
          &lt;/Container&gt;
      );
  };
  
  export default CheckBox;
  </code></pre>
  
  <p>How can I check the value of the state when I render the component with the selected props value to false and when I render it with selected prop to true? 
  And how I can test if the click event on the button trigger setSelected()? By the way we are not able to use Enzyme</p>