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;
13
demandé sur jacefarm 2016-11-25 02:41:49

6 réponses

Vous pouvez utiliser méthode. Il retourne ReactElement.

let containerStyle = container.get(0).style;
expect(containerStyle).to.have.property('opacity', '1');
23
répondu visortelle 2017-03-30 09:29:09

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

8
répondu cyberjar09 2017-11-28 03:31:07

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.

5
répondu TranslucentCloud 2017-12-29 08:50:28

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.

2
répondu Ben Hare 2016-12-14 04:21:39

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"
2
répondu Freezystem 2017-02-07 16:00:46

Si vous utilisez jest-style-composants alors vous pouvez utiliser toHaveStyleRule comme suit:

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

0
répondu DenisH 2018-06-01 16:40:38