測試React-Bootstrap組件的問題

我在使用與Mocha，Chai和Enzyme一起使用React-Bootstrap的組件時遇到一些困難。希望有人能讓我知道我做錯了什麼。測試React-Bootstrap組件的問題

當測試不使用React-Bootstrap的組件時，我注意到輸出是原始html（），因爲在測試React-Bootstrap時我只回收組件而不是原始html（）。這在嘗試測試時會引起巨大的頭痛。如果我使用淺，掛載和渲染，會發生這種情況。

如果任何人有線索，爲什麼我不能得到原始的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'); 
    }); 
})

來源

2016-12-08 user3079061

你可以發佈測試的實際輸出？ –

如果我理解這個問題正確的問題是，如果

item = shallow(<MyReactComponent>)

和MyReactComponent包含陣營與，比如說引導項目，id = itemId然後

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

回報像

"<Button/>"

，而不是實際按鈕中的文本。如果按類或組件名稱查找，則同樣適用。

我以解決此工作：

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

，然後使用一個輔助函數來分析出從HTML文本：

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

我不是很滿意這個解決方案所以會很高興聽到更好的，但它的工作原理...

來源

2017-01-08 12:02:06 Aston

測試React-Bootstrap組件的問題

回答

相關問題