¿Cómo configura el texto de una entrada de texto y luego prueba su valor con React / Enzyme?
const input = wrapper.find('#my-input'); input.simulate('change', { target: { value: 'abc' } } ); const val = input.node.value; //val is ''Todas las soluciones aquí parecen no funcionar.
Para comprender realmente lo que está sucediendo en su código, sería útil ver el código de su componente (específicamente su controlador onChange .
Sin embargo, con respecto al siguiente código:
input.simulate('change', {target: {value: 'abc'}}); En realidad, esto no cambiará el valor de su elemento <input /> , sino que solo hará que se ejecute su función onChange y se proporcione un objeto de evento que se parece a {target: {value: 'abc'}} .
La idea es que su función onChange actualice su estado o tienda, por lo que activar esta función debería resultar en la actualización de su DOM. Si en realidad no tiene un controlador onChange definido usando input.simulate('change') no hará nada.
Entonces, si su objetivo es establecer el valor de una entrada y no activar un controlador onChange , entonces puede usar JS para actualizar manualmente el DOM usando algo como wrapper.find('#my-input').node.value = 'abc'; sin embargo, esto está eludiendo el ciclo de procesamiento de React y es probable que vea este valor borrado/eliminado si hace algo para activar un nuevo procesamiento.
Estoy usando React 16 y Enzyme 3.10 aquí y esto funcionó completamente para mí (después de probar demasiadas sugerencias diferentes):
wrapper.find("input").instance().value = "abc"; Aparentemente, en versiones anteriores podías usar node o getNode() en lugar de instance() , que formaban parte de mis muchos intentos anteriores.
Esto funciona tanto para la Enzima 3 como para la Enzima 2:
wrapper.find('input').getDOMNode().value = 'new value'; wrapper.find('input').simulate('change'); .getDOMNode() se puede usar como .node en Enzyme 2 y como .instance() en Enzyme 3.