title: React testing library toHaveStyle for css sheet (ButtonFace)
body: <p>I have styles applied to a button via a css sheet. When the app starts the button has only a .Button class. When the button is clicked an extra <code>.clicked</code> class is added, which then modifies the styling for the button. The button text also changes from 'button' to 'button clicked'. </p>
  
  <p>I would like RTL to look for these styling changes (which are plainly visible when running the app).</p>
  
  <p>button.css:</p>
  
  <pre><code>.Button {
      background-color: blueviolet;
  }
  
  .clicked {
      transform: scale(8.0);
      background-color: red;
  }
  </code></pre>
  
  <p>test code:</p>
  
  <pre><code>import React from 'react';
  import { cleanup, render, fireEvent } from '@testing-library/react';
  import '@testing-library/jest-dom/extend-expect';
  import App from './App';
  
  
  describe('clicking on the button', () =&gt; {
  
    afterAll(cleanup);
  
    let upDatedButton: HTMLElement;
  
    beforeAll(async () =&gt; {
      const { getByText, findByText } = render(&lt;App /&gt;);
      const button = getByText('button');
  
      fireEvent(
        button,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )
  
      upDatedButton = await findByText('button clicked');
    });
  
    // the button has been click: it's text is now different
    it('button text changes', async () =&gt; {
      expect(upDatedButton).toBeInTheDocument();
      expect(upDatedButton).toBeInstanceOf(HTMLButtonElement);
    });
  
    it('style changes after click', async () =&gt; {
      expect(upDatedButton).toHaveClass('Button clicked');  //clicked class is picked up
  
      // fails here: only style is background-color: ButtonFace
      expect(upDatedButton).toHaveStyle(`
        transform: scale(8.0);
        background-color: red;
      `);
    });
  
  });
  </code></pre>
  
  <p><code>toHaveStyle()</code> is not picking up these new styles but rather something completely different, a background color of "ButtonFace":</p>
  
  <blockquote>
  <pre><code>expect(element).toHaveStyle()
  
  - Expected
  
  - background-color: red;
  - transform: scale(8.0);
  + background-color: ButtonFace;
  </code></pre>
  </blockquote>
  
  <p>How do I test for the styles that the user should be seeing? Cheers!</p>