title: How to get the result 'toHaveStyle' in testing-library-react?
body: <p>Testing library react does not catch 'toHaveStyle'.<br>
  When I clicked on the 'Content', its children which have a <code>blue</code> color were changed to the <code>red</code> color.</p>
  <p>However, in my test, they always have the <code>blue</code> color.</p>
  <p>What should I do to solve this problem?</p>
  <pre class="lang-js prettyprint-override"><code>[...]
  &lt;Content data-testid={&quot;list-element-content&quot;} id={data.id} toggle={state[data.id - 1]}&gt;
    &lt;div&gt;{data.titleUnBold}&lt;/div&gt;
    &lt;BoldTitle&gt;{data.titleBold}&lt;/BoldTitle&gt;
  &lt;/Content&gt;
  [...]
  
  const Content = styled.div`
    color: ${ (props) =&gt; props.toggle ? &quot;red&quot; : &quot;blue&quot; };
  `;
  </code></pre>
  <p>Below the test code:</p>
  <pre class="lang-js prettyprint-override"><code>test(&quot;color changed&quot;, () =&gt; {
    const mockState = [false];
    const mockSwitchGuide = jest.fn();
    const { getAllByTestId, rerender } = render(
      &lt;GuideListPresenter
        data={mockListData}
        state={mockState} 
        onClick={mockSwitchGuide}
      /&gt;
    );
  
    act(() =&gt; {
      fireEvent.change(getAllByTestId(&quot;list-element-content&quot;)[0],{
        target: {toggle: true},
      });
    });
  
    rerender(
      &lt;GuideListPresenter data={mockListData} state={mockState} onClick={mockSwitchGuide} /&gt;
    );
    expect(getAllByTestId(&quot;list-element-content&quot;)[0].toggle).toEqual(true);  // success 
    expect(getAllByTestId(&quot;list-element-content&quot;)[0]).toHaveStyle(&quot;color: red&quot;);   // failed
  })
  </code></pre>