web-dev-qa-db-fra.com

Tester la valeur du texte avec React et Enzyme

Comment définir le texte d'une entrée de texte, puis tester sa valeur avec React/Enzyme?

const input = wrapper.find('#my-input');

input.simulate('change',
  { target: { value: 'abc' } }
);

const val = input.node.value;

//val is ''

Toutes les solutions ici ne semblent pas fonctionner.

javascriptreactjstestingenzyme
12
GN.

Pour bien comprendre ce qui se passe dans votre code, il serait utile de voir votre code de composant (en particulier votre gestionnaire onChange.

Cependant, en ce qui concerne le code suivant:

input.simulate('change', {target: {value: 'abc'}});

Cela ne changera pas réellement la valeur de votre élément <input />, mais entraînera simplement l'exécution de votre fonction onChange et la fourniture d'un objet événement ressemblant à {target: {value: 'abc'}}.

L'idée est que votre fonction onChange mettrait à jour votre état ou votre magasin. Par conséquent, le déclenchement de cette fonction devrait entraîner la mise à jour de votre DOM. Si vous n'avez pas réellement défini de gestionnaire onChange à l'aide de input.simulate('change'), cela ne fera rien.

Donc, si votre objectif est de définir la valeur d'une entrée et de ne pas déclencher un gestionnaire onChange, vous pouvez utiliser JS pour mettre à jour manuellement le DOM à l'aide de quelque chose comme wrapper.find('#my-input').node.value = 'abc';, mais cela contourne le cycle de rendu de React et vous verrez cette valeur effacée/enlevé si vous faites quelque chose pour déclencher un re-rendu.

14
Levi

J'utilise React 16 et Enzyme 3.10 ici et cela a complètement fonctionné pour moi (après avoir essayé trop de suggestions différentes là-bas):

wrapper.find("input").instance().value = "abc";

Apparemment, dans les versions précédentes, vous pouviez utiliser node ou getNode() au lieu de instance(), qui faisaient partie de mes nombreuses tentatives précédentes.

15
leandroico

Cela fonctionne à la fois pour l'enzyme 3 et pour l'enzyme 2:

wrapper.find('input').getDOMNode().value = 'new value';
wrapper.find('input').simulate('change');

.getDOMNode() peut être utilisé comme .node en enzyme 2 et comme .instance() en enzyme 3.

4
Eran Shabi

Ici ça marche pour moi ..

J'ai changé le texte d'entrée, avec la valeur updation . Et Mettre à jour ma propriété DOM .

.update()

Après la mise à jour, je vérifie la propriété de désactivation du bouton avec les cas d'utilisation de longueur de numéro de téléphone portable entrés.

const input = MobileNumberComponent.find('input')
input.props().onChange({target: {
   id: 'mobile-no',
   value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)
0
Anupam Maurya