私の酵素/モカ試験で何が問題になっていますか？

Question

成分を反応させる：

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, 
}; 

試験：

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

最初のテストでは、第二（四値）が失敗し、通過します。私はここで間違っていることを理解できません。

EDIT：

私はちょうどこの返すようにコンポーネントを変更する場合は、次のよう

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

とテストを：

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

そして、それが渡されます。それでは、テストが失敗する小道具の計算を紹介します。なぜ私は本当にわからない。

Answer 1

これは動作します：

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

divの中に2つのつの子要素があるためです。あなたはconsole.log(wrapper.find('div').childAt(1).text())を使用している場合、これは12

shallowは基本的にreact-addons-test-utilsから浅いレンダラのラッパーであるあなたに与え、これを見ることができます。これはコンポーネントのレンダリングメソッドを実行し、結果の反応要素を返します。この場合、反応はResult:と12の2つの要素を作成します。 Dan Abramovには​​があり、反応要素が正確に記述されています。

あなたのテストでは、1つのテキストノードでdivを探していましたが、レンダリングされたものは2つのテキストノードを持つdivでした。中括弧で12を入れると、新しいテキストノードに強制されました