Was ist falsch an meinem Enzym/Mokka-Test?

Question

React Komponente:

import React, { Component, PropTypes } from 'react'; 

export default class Simple extends Component { 
    render() { 
    return <div className="Simple"> 
     Result: {this.props.value * 4} 
    </div> 
    } 
} 

Simple.propTypes = { 
    value: PropTypes.number, 
}; 

Test:

describe('<Simple />', _ => { 
    it('should display', done => { 
    const wrapper = shallow(<Simple />); 

    expect(wrapper.find('div.Simple')).to.have.length(1); 
    done(); 
    }); 

    it('should quadruple a value passed into it', done => { 
    const wrapper = shallow(<Simple value={3} />); 

    expect(wrapper.contains(<div className="Simple">Result: 12</div>)).to.equal(true); 
    done(); 
    }) 
}); 

Der erste Test besteht, der zweite (Quadruple ein Wert) ausfällt. Ich kann nicht herausfinden, was ich hier falsch mache.

EDIT:

Wenn ich die Komponente ändern, um nur diese zurück:

return <div className="Simple"> 
    Result: 
</div> 

und der Test wie folgt:

expect(wrapper.contains(
    <div className="Simple"> 
    Result: 
    </div> 
)).to.equal(true); 

Dann geht es. So ist es, wenn ich Rechenrequisiten einführe, dass der Test fehlschlägt. Ich bin mir nicht wirklich sicher warum.

Answer 1

Dies funktioniert:

it('should quadruple a value passed into it', done => { 
    const wrapper = shallow(<Simple value={3} />); 

    expect(wrapper.contains(<div className="Simple">Result: {12}</div>)).to.equal(true); 
    done(); 
    }) 

Das ist, weil es zwei untergeordnete Elemente in den div sind. Sie können dies sehen, wenn Sie console.log(wrapper.find('div').childAt(1).text()) verwenden, dies gibt Ihnen 12.

shallow ist im Grunde ein Wrapper für den flachen Renderer von react-addons-test-utils. In diesem Fall führen Sie die Rendermethode "Komponenten" aus und geben die resultierenden reaktiven Elemente zurück. In diesem Fall würde react zwei Elemente für Result: und eins für 12 erstellen. Dan Abramov hat eine excellent post, die genau beschreibt, ein reaktives Element ist.

In Ihrem Test, der nicht funktionierte, suchten Sie nach einem Div mit einem Textknoten, aber was gerendert wurde, war ein Div mit zwei Textknoten. Indem Sie 12 in geschweifte Klammern setzen, haben Sie es in einen neuen Textknoten gezwungen