Comment tester le style d'un attribut de composant React avec Enzyme
Je suis en train de tester un attribut de style pour une Réagir composant. Quelle est la meilleure façon d'obtenir style params dans le test?
En ce moment, ma meilleure option est de tester si le code HTML contient la chaîne de caractères, mais je pense qu'il y est une meilleure option.
Cas:
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>
);
});
Le Composant à tester est:
//@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;
source d'informationauteur cristian camilo cedeño gallego
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser cette méthode. Il retourne ReactElement.
expect(component.find('#item-id').prop('style')).to.deep.equal({display: 'none'})
Ont un coup d'oeil à chaiEnzyme, qui fournit une pratique peu affirmation que vous pouvez utiliser avec chai de vérifier si un wrapper a un style particulier (https://github.com/producthunt/chai-enzyme#stylekey-val), devrait aider à faire vos tests à l'air un peu plus propre.
Vous pouvez essayer d'utiliser un
regex
sur.html()
valeur:Ou pour obtenir tout autre attribut:
Légèrement en élaborant des réponses des autres:
Il s'agira de vérifier la
style
prop de#item-id
. Cet accessoire est un objet, et icitoHaveProperty
matcher vérifie si cet objet contientbackgroundSize
bien et si sa valeur est100%
.Cette façon, les autres propriétés de style sont ignorés.
Si vous utilisez jest-style-composants ensuite, vous pouvez utiliser
toHaveStyleRule
comme suit:expect(component.find('#item-id')).toHaveStyleRule('opacity', 'red');