कैसे एनजाइम

Question

के साथ एक प्रतिक्रिया घटक विशेषता के लिए शैली का परीक्षण करने के मैं एक घटक प्रतिक्रिया के लिए एक शैली विशेषता का परीक्षण करने की कोशिश कर रहा हूँ। परीक्षण में स्टाइल पैरा प्राप्त करने का सबसे अच्छा तरीका क्या है?

इस समय, मेरी सबसे अच्छा विकल्प है, तो एचटीएमएल स्ट्रिंग शामिल परीक्षण करने के लिए है, लेकिन मुझे लगता है कि वहाँ एक बेहतर विकल्प है।

मामला:

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

परीक्षण करने के लिए घटक है:

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

chaiEnzyme पर एक नज़र है, जो एक आवरण एक है कि क्या जांच करने के लिए एक आसान थोड़ा जोर आप चाय के साथ उपयोग कर सकते हैं प्रदान करता है है विशेष शैली (https://github.com/producthunt/chai-enzyme#stylekey-val), अपने परीक्षण एक छोटे से क्लीनर बनाने में मदद मिलेगी।

Answer 2

आप एक regex.html() पर मूल्य का उपयोग कर प्रयास कर सकते हैं:

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

या किसी अन्य विशेषता पाने के लिए:

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

Answer 3

आप this विधि का उपयोग कर सकते हैं। यह रिएक्ट एलिमेंट देता है।

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

Answer 4

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

Answer 5

थोड़ा दूसरों के उत्तरों पर व्याख्या:

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

यह #item-id की style प्रोप की जाँच करेगा। इस प्रोप एक वस्तु और यहां toHaveProperty मिलान जांच करता है कि इस वस्तु backgroundSize प्रॉपर्टी वाला है और अगर अपने मूल्य 100% है।

इस तरह अन्य शैली गुण अनदेखी कर रहे हैं।