Render Kind Komponenten mit Enzymejs Tests

Question

Ich versuche, eine einfache Komponente zu testen, die einige Requisiten (es haben keinen Status, oder Redux-Verbindung) mit Enzyme, es funktioniert für die einfachen Elemente wie <div /> und so weiter, aber wenn ich Versuchen Sie zu testen, ob das von der untergeordneten Komponente gerenderte Element vorhanden ist, es schlägt fehl.

Ich versuche Halterung zu verwenden, aber es spucken mir viele Fehler, ich in dieser neuen bin so, hier ist mein Code:

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; 

Es ist nur ein Wrapper für <WordCloud />, und es nur erhält 3 Requisiten direkt von seinem Elternteil: <PredictWordCloud data={wordcloud} size={cloudSize} show={wordcloud ? true : false} />, alles andere.

Die Tests ist sehr, sehr einfach für jetzt:

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

Denn es jetzt passieren, aber wenn wir die Wähler zu ändern: const selector = wrapper.find('#predict-word-cloud svg'); wo der svg Tag der Rückkehr der <Wordcloud /> Komponente ist, schlagen die Tests wegen Die Assertion gibt false zurück.

Ich versuchte Berg statt flach, genau den gleichen Test zu verwenden, aber ich bekomme einen großen Fehler fomr react-d3-cloud:

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

Diese besonders seltsam ist, weil es in der Testumgebung passiert einfach, die UI und alle Verhaltensweisen funktionieren perfekt im Browser.

Answer 1

Sie können Ihre Komponente direkt nach Komponentenname finden. Dann können Sie auch innerhalb Ihrer Sub-Komponente finden.

beispiels

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

    }); 

oder Sie können über

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

    }); 

und erzeugt HTML-Struktur vergleichen