How to test style for a React component attribute with Enzyme

Question

I am trying to test a style attribute for a React component. What is the best way to get style params in the test?

At this moment, my best option is to test if the HTML includes the string, but I think there is a better option.

Case:

it('Should render large image when desktop', () => {     const dummyUrl = 'http://dummyUrl';     const wrapper = shallow(       <MockedStore         initialState={{           app: fromJS({ browser: { desktop: true } }),         }}       >         <LandingHero bigImage={dummyUrl} />       </MockedStore>     );   }); 

The Component to test is:

// @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 }) => ({ app })) class LandingHero extends Component {   componentDidMount() {     if ($(window).height() > 0) { // Necesary for webpack dev server       $(this.hero).css('height', $(window).height() - 46);     }   }    hero: HTMLElement;    props: {     app: Map<string, any>,     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 (       <div         className={`${c.hero} ${gc.textCenter}` +         ` ${gc.alignMiddle} ${gc.alignCenter} ${gc.row} ${gc.expanded}`}         ref={(hero) => { this.hero = hero; }}         style={{           margin: 0,           position: 'relative',           background: `linear-gradient(to bottom, rgba($ixdarkprimary, .3), rgba($ixdarkprimary, .3)), url(${backgroundImage || ''})`,         }}       >         <div className={`${gc.row} ${gc.alignCenter} ${gc.alignMiddle} ${gc.column} ${gc.medium10}`}>           <div className={`${gc.textCenter}`}>             <div               className={`${gc.white} ${c.mainText} ${c.copy}`}             >               { copy }             </div>             <div className={`${gc.small6} ${gc.smallOffset3} ${gc.medium4} ${gc.mediumOffset4}`} style={{ marginBottom: 45 }}>               <DownloadButton />             </div>             <div className={`${gc.white} ${gc.fontBold} ${gc.font24}`}>{secondaryText}</div>             <p className={`${gc.white} ${gc.font20}`}>{thirdText}</p>           </div>           <DownArrow goTo="#content" />         </div>       </div>     );   } }  export default LandingHero; 

Answer 1

You can use this method. It returns ReactElement.

let containerStyle = container.get(0).style; expect(containerStyle).to.have.property('opacity', '1');