Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to test style for a React component attribute with Enzyme

Tags:

reactjs

enzyme

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; 
like image 266
cristian camilo cedeño gallego Avatar asked Nov 24 '16 23:11

cristian camilo cedeño gallego


People also ask

How do you get the style of an element in React?

To access styles of an element from React, we can assign a ref to the element that we want to get the styles for. And then we can use the window. getComputedStyle method to get the style from the element's ref. We create a ref with the useRef hook.

Can we use style tag in React?

Did you know that you can style a React component with raw CSS and no extra files? There are many ways to style a component in React, but some are more popular than others.


1 Answers

You can use this method. It returns ReactElement.

let containerStyle = container.get(0).style; expect(containerStyle).to.have.property('opacity', '1'); 
like image 173
visortelle Avatar answered Sep 23 '22 01:09

visortelle