Probleme Test React-Bootstrap-Komponenten

Question

Ich habe einige Schwierigkeiten beim Testen von Komponenten, die React-Bootstrap mit Mocha, Chai und Enzym verwenden. Hoffentlich kann jemand mich in das einstecken, was ich falsch mache.

Beim Testen von Komponenten, die nicht React-Bootstrap verwenden, bemerke ich, dass die Ausgabe hwtml() ist, wobei ich beim Testen von React-Bootstrap nur die Komponente und nicht raw html() zurückbekomme. Dies verursacht beim Testen große Kopfschmerzen. Dies passiert, wenn ich shallow, mount und render verwende.

Wenn jemand eine Ahnung hat, warum ich nicht raw HTML beim Testen bekommen kann, würde sehr geschätzt werden! Ich habe einen Code eingefügt, um zu zeigen, worüber ich spreche.

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

Wenn ich verstehen die Frage richtig das Problem ist, dass, wenn

item = shallow(<MyReactComponent>) 

und MyReactComponent enthält ein Reagieren Bootstrap Element mit, sagen wir, id = itemId dann

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

kehrt so etwas wie

"<Button/>" 

und nicht die tatsächliche Text in der Schaltfläche. Gleiches gilt, wenn Sie nach Klasse oder dem Komponentennamen suchen.

Ich habe um diese arbeitete unter Verwendung:

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

und dann eine Hilfsfunktion mit dem Text aus dem HTML parsen:

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

ich mit dieser Lösung nicht sehr glücklich bin also würde ich mich freuen, von einem besseren zu hören, aber es funktioniert ...