How to test style for a React component attribute with Enzyme
<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>