Testen Sie die Einstellung text-Wert mit Reagieren und Enzym

Wie legen Sie die text-Eingabe und testen Sie es Wert ist, mit Reagieren /Enzym?

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

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

const val = input.node.value;

//val is ''

Alle Lösungen hier scheinen nicht zu funktionieren..

InformationsquelleAutor GN. | 2017-01-19
  1. 18

    Wirklich zu verstehen, was passiert in deinem code wäre es nützlich zu sehen, Komponentencode (speziell Ihr onChange hf.

    Jedoch in Bezug auf die folgenden code:

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

    Diese nicht tatsächlich ändern Sie den Wert Ihres <input /> element, sondern es bewirkt, dass Ihr onChange Funktion ausgeführt werden und zur Verfügung gestellt werden ein event-Objekt, das aussieht wie {target: {value: 'abc'}}.

    Die Idee ist, dass Ihr onChange Funktion aktualisieren Sie Ihren Status oder laden, so das auslösen dieser Funktion sollte Ergebnis in Ihrem DOM aktualisiert. Wenn Sie don ' T haben tatsächlich eine onChange handler definiert mit input.simulate('change') nichts.

    Also, wenn Ihr Ziel ist eigentlich den Wert des input-und nicht das auslösen eines onChange handler dann können Sie JS zum manuellen aktualisieren der DOM mit so etwas wie wrapper.find('#my-input').node.value = 'abc'; dies ist jedoch umgehen, Reagieren die render-Zyklus, und Sie werden wahrscheinlich sehen Sie diesen Wert gelöscht/entfernt werden, wenn Sie alles tun, um die Auslöser einer re-Rendern.

    • Ich bin versucht den Wert mit input.node.value = "Test", und ich bin immer diese Fehlermeldung TypeError: Can't add property value, object is not extensible. Irgendwelche Ideen?
    • Überprüfen Sie heraus meine Antwort unten.
    • Sie müssen möglicherweise zu entfernen, Ziel / Wert: Eingang.simulieren('changeText', '6');
    InformationsquelleAutor Levi
  2. 16

    Ich bin mit React 16 und Enzyme 3.10 hier und das völlig für mich gearbeitet (nach dem Versuch, zu viele verschiedene Vorschläge gibt):

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

    Anscheinend in früheren Versionen, die Sie nutzen könnten node oder getNode() statt instance(), die Teile von meinen vielen vorherigen versuche.

    • Ich verwendet .node aber Enzyms mir zu getElement() aber das gab mir die reagieren element und nicht das dom-element. Thx für die gemeinsame Nutzung der instance() Funktion.
    • typescript versagt mit Fehler: TS2339: Property value does not exist on type Component<{}, {}> . Können Sie bitte helfen?
    • Tut mir Leid, Mann...aber ich habe keine Ahnung, wie um diese Situation zu bewältigen, da habe ich noch nie gearbeitet mit Typoskript vor.
    InformationsquelleAutor leandroico
  3. 4

    Dies funktioniert für beide-Enzym 3 Enzym und 2:

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

    .getDOMNode() verwendet werden können, wie .node im Enzym 2 und wie .instance() im Enzym 3.

    InformationsquelleAutor Eran Shabi
  4. 0

    Hier, es funktioniert für mich..

    Ich haben, ändern Sie die Eingabe von text, mit Wert updation.
    Und Update meine DOM-Eigenschaft.

    .update()

    Nach einem Update checke ich die Schaltfläche deaktivieren Sie die Eigenschaft mit Eingabe Handy-Nummer Länge Anwendungsfälle.

    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)
    InformationsquelleAutor Anupam Maurya
Schreibe einen Kommentar