title: How to test css attributes using enzyme and jest?
body: <p>I'm testing the css attributes of a component. For instance, I need to check if the default 'color' attribute of a &lt;p&gt; tag is black </p>
  
  <p>I tried using props().style but it doesn't work if styling is not inline. I also tried toHaveStyleRule() but it also doesn't help</p>
  
  <pre><code>//imports----------------------------------------------
  import React from 'react';
  import {shallow,configure,mount,render} from 'enzyme';
  import toJson from 'enzyme-to-json';
  import Adapter from 'enzyme-adapter-react-16';
  import "jest-styled-components";
  //-----------------------------------------------------
  
  configure({adapter: new Adapter()});
  
  //-----------------------------------------------------
  
  describe ('Checking if default color of paragraph is black',() =&gt;{
  
  it("doesn't work",()=&gt;{
    expect(
           mount(&lt;p&gt;Lorem Ipsum&lt;/p&gt;).find('p')
        ).toHaveStyleRule('color','black');
  });
  
  it("also doesn't work",()=&gt;{
    expect(
          mount(&lt;p&gt;Lorem Ipsum&lt;/p&gt;).find('p').props().style.color
        ).toEqual('black');
  });
  });
  </code></pre>
  
  <p>I expect that the test should pass (as default color of paragraph is indeed black).</p>
  
  <p>The first test fails with message:</p>
  
  <pre><code>No style rules found on passed Component
  </code></pre>
  
  <p>The second one fails with message</p>
  
  <pre><code>TypeError: Cannot read property 'color' of undefined
  </code></pre>