web-dev-qa-db-fra.com

Comment tester le style d'un attribut de composant React avec Enzyme

J'essaie de tester un attribut de style pour un composant React. Quel est le meilleur moyen d'obtenir des paramètres de style dans le test?

Pour le moment, ma meilleure option est de vérifier si le code HTML inclut la chaîne, mais je pense qu’il existe 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;
reactjsenzyme
36
cristian camilo cedeño gallego

Vous pouvez utiliser la méthode this . Il retourne ReactElement.

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

Expliquant légèrement les réponses des autres:

expect(component.find('#item-id').prop('style')).toHaveProperty('backgroundSize', '100%');

Ceci vérifiera le style accessoire de #item-id. Ce prop est un objet et ici toHaveProperty matcher vérifie si cet objet contient la propriété backgroundSize et si sa valeur est 100%.

De cette façon, les autres propriétés de style sont ignorées.

17
TranslucentCloud

expect(component.find('#item-id').prop('style')).to.deep.equal({display: 'none'})

17
cyberjar09

Si vous utilisez jest-styled-components , vous pouvez utiliser toHaveStyleRule comme suit:

expect(component.find('#item-id')).toHaveStyleRule('opacity', 'red');

5
DenisH
const elem = wrapper.find(Element);
expect(getComputedStyle(elem.getDOMNode()).getPropertyValue('opacity')).toBe('0.4');
4
Mahdi Abdi

Regardez chaiEnzyme, qui fournit une petite assertion pratique que vous pouvez utiliser avec chai pour vérifier si un wrapper a un style particulier ( https://github.com/producthunt/chai-enzyme#stylekey-val) =), devrait vous aider à rendre vos tests un peu plus propres.

3
Ben Hare

Vous pouvez essayer d’utiliser une valeur regex sur .html():

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"
2
Freezystem