問題React-Bootstrapコンポーネントのテスト

Question

React-BootstrapをMocha、Chai、およびEnzymeで使用するコンポーネントをテストする際に、いくつかの問題があります。 うまくいけば、誰かが私が間違っていることを私に知らせることができます。

React-Bootstrapを使用しないコンポーネントをテストすると、React-Bootstrapをテストするときのraw html（）の出力がraw html（）ではなくコンポーネントを返すことに気付きました。これは、テストしようとすると大きな頭痛を引き起こしています。これは、shallow、mount、renderを使用すると発生します。

誰かが私が生のHTMLを得ることができない理由についての手掛かりを持っていれば、それは大いに評価されるでしょう！ 私が話していることを示すためにいくつかのコードが含まれています。

ReactTest.jsx

import React from 'react'; 

const ReactTest =() => (
    <div> 
    <button>ReactTest</button> 
    </div> 
); 

export default ReactTest; 

ReactBootstrapTest.jsx

import React from 'react'; 
import { Button } from 'react-bootstrap'; 

const ReactBootstrapTest =() => (
    <div> 
    <Button>ReactBootstrapTest</Button> 
    </div> 
); 

export default ReactBootstrapTest; 

reactTest.js

import React from 'react'; 
import { expect } from 'chai'; 
import { shallow } from 'enzyme'; 

import ReactTest from '../../../../../../components/ReactTest'; 
import ReactBootstrapTest from '../../../../../../components/ReactBootstrapTest'; 

const reactTestEnzymeWrapper =() => (
    shallow(<ReactTest />) 
); 

const reactBootstrapTestEnzymeWrapper =() => (
    shallow(<ReactBootstrapTest />) 
); 

describe.only('ReactTest',() => { 
    it('should output debug',() => { 
    const reactTest = reactTestEnzymeWrapper(); 
    console.log('ReactTest', reactTest.debug()); 
    }); 

    it('should find the <button>',() => { 
    const reactButton = reactTestEnzymeWrapper().find('button'); 
    expect(reactButton.at(0).text()).to.equal('ReactTest'); 
    }); 
}); 

describe.only('ReactBootstrapTest',() => { 
    it('should output debug',() => { 
    const reactBootstrapTest = reactBootstrapTestEnzymeWrapper(); 
    console.log('ReactBootstrapTest', reactBootstrapTest.debug()); 
    }); 

    it('should find the <button>',() => { 
    const bootstrapButton = reactBootstrapTestEnzymeWrapper().find('button'); 
    expect(bootstrapButton.at(0).text()).to.equal('ReactBoostrapTest'); 
    }); 
}) 

Answer 1

もしI質問を理解し、正しく問題は

item = shallow(<MyReactComponent>) 

とMyReactComponentが含まれている場合たとえば、とブートストラップアイテム、id = itemIdその後、

item.find('#itemId').text() 

戻って何か

"<Button/>" 

のように反応し、実際ではないということですボタン内のテキストクラスまたはコンポーネント名で検索する場合も同じです。

私が使用してこの問題を回避働いている：私は、このソリューションに非常に満足していないよ

chai.expect(getBootstrapText(item.find('#butRemove').html())).to.equal('Remove Design'); 

：HTMLからテキストを解析するためにヘルパー関数を使用して、その後

item.find('#itemId').html() 

をし、もっと良いものを聞いてうれしいですが、それは動作します...