Enzymejsテストで子コンポーネントをレンダリングする

Question

Enzymeでいくつかの小道具（状態も持たない接続もあります）をテストしようとしていますが、<div />などのような単純な要素に対しても同様に動作しますが、子コンポーネントによってレンダリングされた要素が存在するかどうかをテストしようとすると失敗します。

私はマウントを使用しようとしているが、それは私のエラーの多くを吐く、私はこの中に新たなんだので、ここに私のコードは次のとおりです。それはちょうどそれが<WordCloud />ための単なるラッパーです

import React, { Component } from 'react'; 
import WordCloud from 'react-d3-cloud'; 

class PredictWordCloud extends Component { 
    render() { 
    const fontSizeMapper = word => Math.log2(word.value) * 3.3; 
    const { size, data, show } = this.props; 

    if (!show) 
     return <h3 className='text-muted text-center'>No data</h3> 

    return (
     <section id='predict-word-cloud'> 
     <div className='text-center'> 
      <WordCloud 
      data={data} 
      fontSizeMapper={fontSizeMapper} 
      width={size} 
      height={300} /> 
     </div> 
     </section> 
    ) 
    } 
} 

export default PredictWordCloud; 

、および彼の親から直接3小道具：<PredictWordCloud data={wordcloud} size={cloudSize} show={wordcloud ? true : false} />、何かを受け取る。今ではに合格するために

import React from 'react'; 
import { shallow } from 'enzyme'; 
import PredictWordCloud from '../../components/PredictWordCloud.component'; 
import cloudData from '../../helpers/cloudData.json'; 

describe('<PredictWordCloud />',() => { 
    let wrapper; 

    beforeEach(() => { 
    wrapper = shallow(<PredictWordCloud data={cloudData} size={600} show={true} />) 
    }); 

    it('Render without problems',() => { 
    const selector = wrapper.find('#predict-word-cloud'); 
    expect(selector.exists()).toBeTruthy(); 
    }); 
}); 

しかし、我々は、セレクタを変更した場合：：

テストは今のところ非常に非常に簡単ですsvgタグが<Wordcloud />コンポーネントのリターンですconst selector = wrapper.find('#predict-word-cloud svg');、テストがあるため失敗しますアサーションはfalseを返します。

私はまったく同じテスト、浅いの代わりにマウントを使用しようとしましたが、私はreact-d3-cloud fomr大きなエラーが表示されます。

PredictWordCloud Render without problems TypeError: Cannot read property 'getImageData' of null.

それだけでテスト環境で起こるので、これは特別に奇妙です、 UIとすべての動作はブラウザで完全に機能します。

Answer 1

コンポーネントはコンポーネント名で直接見つけることができます。 次に、サブコンポーネント内のfindも使用できます。

例えば

it('Render without problems',() => { 
    const selector = wrapper.find('WordCloud').first(); 
    expect(selector.find('svg')).to.have.length(1); 

    }); 

または あなたは

it('Render without problems',() => { 
    const selector = wrapper.find('WordCloud').first(); 
    expect(selector.html()).to.equal('<svg> Just an example </svg>'); 

    }); 

経由だけでなく、生成されたHTMLの構造を比較することができます