title: How can I test React component's style with Jest + Enzyme?
body: <p>Alright I have a component called <code>&lt;TestButton /&gt;</code>. Inside the <code>&lt;TestButton /&gt;</code> there are two Semantic UI React component, <code>&lt;Button /&gt;</code> and <code>&lt;Header&gt;</code>.</p>
  
  <p>Basically, when the <code>&lt;Button&gt;</code> is clicked, it toggles <code>display: none;</code> to <code>&lt;Header&gt;</code>.</p>
  
  <p>I want to check (I want to learn) on how to assert <code>&lt;Header&gt;</code>'s <code>display: none;</code> when <code>&lt;Button&gt;</code> is clicked.</p>
  
  <p>TestButton.js</p>
  
  <pre><code>const TestButton = (props) =&gt; {
    return (
      &lt;div id='test-button'&gt;
        &lt;Header id='please-hide-me' size='huge'&gt;Please Hide Me&lt;/Header&gt;
        &lt;Button
          onClick={
            () =&gt; {
              hiding = !hiding;
              let findDOM = document.getElementById(searchForThisID);
              if (findDOM) { findDOM.style.display = hiding ? 'none' : ''; }
              return hiding;
            }
          }
        &gt;
          Sample Toggle
        &lt;/Button&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>My unit test is based on <a href="https://stackoverflow.com/questions/40795850/how-to-test-style-for-a-react-component-attribute-with-enzyme">How to test style for a React component attribute with Enzyme</a>. It looks like this:</p>
  
  <pre><code>test(`
  
    `, () =&gt; {
      const wrapper = shallow(&lt;TestButton /&gt;);
      const button = wrapper.find('Button');
      const header = wrapper.find('Header');
      const headerStyle = header.get(0).style;
  
      expect(headerStyle).to.have.property('display', '');
      wrapper.find('Button').simulate('click');
      expect(headerStyle).to.have.property('display', 'none');
    }
  );
  </code></pre>
  
  <p>But it has this error: </p>
  
  <pre><code>TypeError: Cannot read property 'have' of undefined
  </code></pre>
  
  <p>What should I do?</p>