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?
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.
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.
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.
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 ....
.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;
Pour moi cela a fonctionné
expect(component.find('button').props().disabled).toBeTruthy();