web-dev-qa-db-fra.com

Comment obtenir un attribut d'un élément imbriqué dans un composant React à l'aide de Jest et/ou Enzyme?

Je souhaite tester si une image est correctement chargée dans une application React. J'ai décidé de vérifier l'attribut src de l'élément img imbriqué dans le composant React. Je souhaite utiliser le framework de test Jest et, si nécessaire, l'utilitaire de test Enzyme.

En fouillant dans le Object.keys d'un composant de test React peu profond, j'ai pu trouver la solution suivante. La ligne dont je ne suis pas sûr est indiquée par les astérisques.

import React     from 'react';
import {shallow} from 'enzyme';
import App       from './App';

it('should have the logo image', () => {
  const app = shallow(<App />);
  const img = app.find('img');
  const src = img.node.props.src; // ******
  expect(src).toBe('logo.svg');
});

Cette solution ne fonctionne pas mais elle semble un peu compliquée (elle nécessite la propriété d'une propriété d'une propriété d'un wrapper) et semble quelque peu obscure (je ne trouve pas facilement d'instructions claires pour cette mise en ligne). Alors, est-ce la manière correcte/la plus simple de faire cela?

  • Si oui, où est la documentation?
  • Sinon, comment pourrais-je/pourrais-je faire autrement? par exemple. Existe-t-il une méthode getAttribute ou retrieveProp prête à l'emploi, etc. en Enzyme? Y at-il une meilleure façon de faire cela en utilisant quelque chose d’autre au lieu d’Enzyme, par exemple react-addons-test-utils?

Cette question à propos des attributs de l’élément React ne semble pas y répondre, même si l’affiche indique également qu'il est difficile de trouver de la documentation sur l’affirmation d’une valeur d’attribut rendue. Un certain nombre d'autres questions (par exemple, ici , ici et ici ) traitent de React/Jest/Enzyme mais ne traitent pas de la récupération des valeurs d'attribut.

javascriptreactjsjestjsenzyme
5
Andrew Willems

Après quelques recherches, j'ai trouvé ce qui suit. La ligne indiquée dans la question:

const src = img.node.props.src;

peut être simplifié comme suit:

const src = img.prop('src');

La documentation peut être trouvée ici .

Si quelqu'un connaît une manière de le faire non-enzymatique, je serais tout de même intéressé à en entendre parler.

16
Andrew Willems

Avec React Utilitaires de test :

it('should have the logo image', () => 
  const app = TestUtils.renderIntoDocument(<App/>);
  var image = TestUtils.findRenderedDOMComponentWithTag(app, 'img');
  expect(image.getDOMNode().getAttribute('src')).toEqual('logo.svg');
});

Les tests enzymatiques semblent beaucoup plus propres.

5
free-soul

Pour moi, cela a fonctionné comme ci-dessous

expect(companySelect.find('input').props()["disabled"]).toBe(true)

props() retourne un objet ayant tous les attributs du sélecteur et peut ensuite être parcouru en tant qu'objet. 

J'espère que cela aide aussi ....

https://airbnb.io/enzyme/docs/api/ReactWrapper/props.html

3
Dinuka De Silva

.node ne fonctionne pas Après un travail ardu, j'ai trouvé ce qui suit est lié à 100% à la réponse à la question ci-dessus

  const src = img.getElement().props.src;
1
D V Yogesh

Pour moi cela a fonctionné

expect(component.find('button').props().disabled).toBeTruthy();
0
SanS