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;
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.
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.
You can use this method. It returns ReactElement.
let containerStyle = container.get(0).style; expect(containerStyle).to.have.property('opacity', '1');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With