title: How to test style for a React component attribute with Enzyme
body: <p>I am trying to test a style attribute for a React component. What is the best way to get style params in the test?</p>
  
  <p>At this moment, my best option is to test if the HTML includes the string, but I think there is a better option.</p>
  
  <p>Case:</p>
  
  <pre><code>it('Should render large image when desktop', () =&gt; {
      const dummyUrl = 'http://dummyUrl';
      const wrapper = shallow(
        &lt;MockedStore
          initialState={{
            app: fromJS({ browser: { desktop: true } }),
          }}
        &gt;
          &lt;LandingHero bigImage={dummyUrl} /&gt;
        &lt;/MockedStore&gt;
      );
    });
  </code></pre>
  
  <p>The Component to test is:</p>
  
  <pre><code>// @flow
  import React, { Component } from 'react';
  import gc from 'styles/core.scss';
  import $ from 'jquery';
  import DownloadButton from 'components/DownloadButton';
  import withStyles from 'isomorphic-style-loader/lib/withStyles';
  import DownArrow from 'components/DownArrow';
  import { connect } from 'react-redux';
  import type { Map } from 'immutable';
  import c from './styles.scss';
  
  @withStyles([gc, c])
  @connect(({ app }) =&gt; ({ app }))
  class LandingHero extends Component {
    componentDidMount() {
      if ($(window).height() &gt; 0) { // Necesary for webpack dev server
        $(this.hero).css('height', $(window).height() - 46);
      }
    }
  
    hero: HTMLElement;
  
    props: {
      app: Map&lt;string, any&gt;,
      copy: string,
      secondaryText: string,
      thirdText: string,
      bigImage?: string,
      smallImage: string,
    }
  
    render() {
      const { copy, secondaryText, thirdText } = this.props;
      const browser = this.props.app.has('browser') ? this.props.app.get('browser') : {};
      const backgroundImage = browser.desktop ? this.props.bigImage : this.props.smallImage;
  
      return (
        &lt;div
          className={`${c.hero} ${gc.textCenter}` +
          ` ${gc.alignMiddle} ${gc.alignCenter} ${gc.row} ${gc.expanded}`}
          ref={(hero) =&gt; { this.hero = hero; }}
          style={{
            margin: 0,
            position: 'relative',
            background: `linear-gradient(to bottom, rgba($ixdarkprimary, .3), rgba($ixdarkprimary, .3)), url(${backgroundImage || ''})`,
          }}
        &gt;
          &lt;div className={`${gc.row} ${gc.alignCenter} ${gc.alignMiddle} ${gc.column} ${gc.medium10}`}&gt;
            &lt;div className={`${gc.textCenter}`}&gt;
              &lt;div
                className={`${gc.white} ${c.mainText} ${c.copy}`}
              &gt;
                { copy }
              &lt;/div&gt;
              &lt;div className={`${gc.small6} ${gc.smallOffset3} ${gc.medium4} ${gc.mediumOffset4}`} style={{ marginBottom: 45 }}&gt;
                &lt;DownloadButton /&gt;
              &lt;/div&gt;
              &lt;div className={`${gc.white} ${gc.fontBold} ${gc.font24}`}&gt;{secondaryText}&lt;/div&gt;
              &lt;p className={`${gc.white} ${gc.font20}`}&gt;{thirdText}&lt;/p&gt;
            &lt;/div&gt;
            &lt;DownArrow goTo="#content" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default LandingHero;
  </code></pre>