渲染子組件與Enzymejs測試

我想測試一個簡單的組件，它需要一些道具（它沒有狀態，或終極版連接）與Enzyme，它的工作原理像<div />平原等元素，但是當我嘗試測試子組件呈現的元素是否存在，它失敗。渲染子組件與Enzymejs測試

我試圖使用安裝，但它吐了我很多的錯誤，我在這如此是新，這裏是我的代碼：

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;

它只是<WordCloud />的包裝，它只是直接從他的父母接收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(); 
    }); 
});

現在它傳遞，但如果我們改變選擇到：const selector = wrapper.find('#predict-word-cloud svg');其中svg標籤<Wordcloud />組件的迴歸，測試失敗，因爲斷言返回false。

我嘗試使用，而不是淺，完全相同的測試安裝，但我得到一個很大的錯誤FOMR react-d3-cloud：

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

這是特別奇怪，因爲它只是在測試環境中發生， UI和所有行爲在瀏覽器中完美運行。

來源

2017-02-27 Nano

您可以通過組件名直接找到您的組件。然後，您也可以在子組件中使用find。

e.g

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

    });

或您可以比較生成的html結構，以及通過

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

    });

來源

2017-02-28 06:32:37 WitVault

渲染子組件與Enzymejs測試

回答

相關問題