wie man element text mit react + enzym wählen

Question

Genau das, was es sagt. Einige Beispiel-Code:

let wrapper = shallow(<div><button class='btn btn-primary'>OK</button></div>); 

const b = wrapper.find('.btn'); 

expect(b.text()).to.be.eql('OK'); // fails, 

Auch die html Methode gibt den Inhalt des Elements, sondern auch das Element selbst und alle Attribute, z.B. es gibt <button class='btn btn-primary'>OK</button>. Also ich schätze, schlimmstenfalls kann ich html anrufen und regex es, aber ...

Gibt es einen Weg, um nur den Inhalt des Elements zu bekommen, damit ich darauf behaupten kann.

Answer 1

Vergessen Sie nicht, dass Sie einen Knoten (ReactElement) zu shallow Funktion sind vorbei, und es gibt kein HTML-Attribut class in React. Sie müssen className verwenden.

Von React Dokumentation

Alle Attribute sind Kamel verrohrten und die Attribute class und for sind className und htmlFor jeweils der DOM API Spezifikation entsprechen.

Dieser Test sollte funktioniert

const wrapper = shallow(<div><button className='btn btn-primary'>OK</button></div>); 
const button = wrapper.find('.btn'); 
expect(button.text()).to.be.eql('OK'); 

Answer 2

Ich denke, @ Louis-barranqueiro hat wahrscheinlich die zugrunde liegende Frage beantwortet. Das heißt, Sie möchten einen CSS-Selektor, und Sie sollten className nicht class verwenden.

jedoch zu versuchen, die Frage zu beantworten, wie ein Element des Textes wählen Sie das aktuelle Beispiel verwenden Sie gab:

let wrapper = shallow(<div><button class='btn btn-primary'>OK</button></div>);

Sie so etwas wie ein object property selector verwenden bräuchten, zB:

expect(wrapper.find({ class: "btn btn-primary" }).text()).to.equal('OK');

oder prop Syntax:

expect(wrapper.find('[class="btn btn-primary"]').text()).to.equal('OK');

(oder sogar mehr explizit):

expect(wrapper.find('button[class="btn btn-primary"]').text()).to.equal('OK');