web-dev-qa-db-fra.com

comment sélectionner le texte de l'élément avec react + enzyme

Exactement ce qu'il dit. Un exemple de 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,

La méthode html renvoie également le contenu de l'élément mais également l'élément lui-même ainsi que tous les attributs, par exemple il donne <button class='btn btn-primary'>OK</button>. Donc je suppose que, dans le pire des cas, je peux appeler html et le regex, mais ...

Existe-t-il un moyen d'obtenir simplement le contenu de l'élément, donc je peux l'affirmer.

reactjsenzyme
18
Kevin

N'oubliez pas que vous passez un nœud (ReactElement) à la fonction shallow et qu'il n'y a pas d'attribut HTML class dans React. Vous devez utiliser className.

De React documentation

Tous les attributs sont en chameau et les attributs class et for sont className et htmlFor, respectivement, pour correspondre à la spécification de l'API DOM.

Ce test devrait fonctionner

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

Si vous avez trouvé cela en recherchant "inclut le texte", essayez:

it('should show correct text', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.text().includes('my text')).toBe(true);
});
12
Nelu

Je pense que @ louis-barranqueiro a probablement répondu à votre question sous-jacente. Autrement dit, vous voulez un sélecteur CSS et vous auriez donc dû utiliser className pas class.

Cependant, pour essayer de répondre à la question de savoir comment sélectionner le texte d'un élément en utilisant l'exemple réel que vous avez donné:

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

vous devez utiliser quelque chose comme un sélecteur de propriété d'objet , par exemple:

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

ou la syntaxe prop:

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

(ou encore plus explicitement):

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

3
eddies