reactjs - spec - shallowwrapper enzyme

Cómo probar el estilo para un atributo de componente React con enzima

Question

Estoy tratando de probar un atributo de estilo para un componente React. ¿Cuál es la mejor manera de obtener parámetros de estilo en la prueba?

En este momento, mi mejor opción es probar si el HTML incluye la cadena, pero creo que hay una mejor opción.

Caso:

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>
    );
  });

El componente a probar es:

// @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;

Answer 1

Eche un vistazo a chaiEnzyme, que proporciona una pequeña aserción práctica que puede usar con chai para verificar si un envoltorio tiene un estilo particular ( https://github.com/producthunt/chai-enzyme#stylekey-val ), que lo ayude a hacer de su Las pruebas se ven un poco más limpias.

Answer 2

Elaborando un poco las respuestas de los demás:

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

Esto verificará el style prop de #item-id . Este prop es un objeto y aquí toHaveProperty tener un toHaveProperty propiedad que comprueba si este objeto contiene backgroundSize propiedad backgroundSize y si su valor es del 100% .

De esta manera se ignoran otras propiedades de estilo.

Answer 3

Puede utilizar this método. Devuelve ReactElement.

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

Answer 4

Puedes intentar usar una regex en el valor .html() :

const span = mount(<Test />).find(''span'');
expect(span.html().match(/style="([^"]*)"/i)[1]).toBe(''color: #000;'');

O para obtener cualquier otro atributo:

const getAttr = ( html, name ) => html.match(new RegExp(`${name}="([^"]*)"`, ''i''))[1];
let type = getAttr(''<input type="text" value=""/>'', ''type'');
console.log(type);  // "text"

Answer 5

Si usa jest-styled-components puede usar toHaveStyleRule siguiente manera:

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

Answer 6

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

Answer 7

const elem = wrapper.find(Element);
expect(getComputedStyle(elem.getDOMNode()).getPropertyValue(''opacity'')).toBe(''0.4'');