渲染子组件与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测试

回答

相关问题