Comment tester le style d'un attribut du composant React avec L'Enzyme
j'essaie de tester un attribut de style pour un composant React. Quelle est la meilleure façon d'obtenir style params dans le test?
pour le moment, ma meilleure option est de tester si le HTML inclut la chaîne, mais je pense qu'il y a une meilleure option.
Boîtier:
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;
6 réponses
Vous pouvez utiliser méthode. Il retourne ReactElement.
let containerStyle = container.get(0).style;
expect(containerStyle).to.have.property('opacity', '1');
expect(component.find('#item-id').prop('style')).to.deep.equal({display: 'none'})
développant légèrement les réponses des autres:
expect(component.find('#item-id').prop('style')).toHaveProperty('backgroundSize', '100%');
les style
prop de #item-id
. Cet accessoire est un objet, et ici toHaveProperty
matcher vérifie si cet objet contient backgroundSize
bien et si sa valeur est 100%
.
de cette façon, les autres propriétés du style sont ignorées.
jetez un coup d'oeil à chaiEnzyme, qui fournit une petite assertion pratique que vous pouvez utiliser avec chai pour vérifier si un papier d'emballage a un style particulier (https://github.com/producthunt/chai-enzyme#stylekey-val), devrait aider à rendre vos tests un peu plus propres.
Vous pouvez essayer d'utiliser un regex
.html()
valeur:
const span = mount(<Test />).find('span');
expect(span.html().match(/style="([^"]*)"/i)[1]).toBe('color: #000;');
Ou pour obtenir tout autre attribut:
const getAttr = ( html, name ) => html.match(new RegExp(`${name}="([^"]*)"`, 'i'))[1];
let type = getAttr('<input type="text" value=""/>', 'type');
console.log(type); // "text"
Si vous utilisez jest-style-composants alors vous pouvez utiliser toHaveStyleRule
comme suit:
expect(component.find('#item-id')).toHaveStyleRule('opacity', 'red');