Estoy confundido acerca de cómo acceder al <input>
valor cuando lo uso mount
. Esto es lo que tengo como prueba:
it('cancels changes when user presses esc', done => {
const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');
console.log(input.render().attr('value'));
input.simulate('focus');
done();
});
Se imprime la consola undefined
. Pero si modifico ligeramente el código, funciona:
it('cancels changes when user presses esc', done => {
const wrapper = render(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');
console.log(input.val());
input.simulate('focus');
done();
});
Excepto, por supuesto, que la input.simulate
línea falla ya que la estoy usando render
ahora. Necesito que ambos funcionen correctamente. ¿Cómo puedo solucionar esto?
EDITAR :
Debo mencionar <EditableText />
que no es un componente controlado. Pero cuando paso defaultValue
en <input />
, al parecer para ajustar el valor. El segundo bloque de código anterior imprime el valor y, de la misma manera, si inspecciono el elemento de entrada en Chrome y escribo $0.value
en la consola, muestra el valor esperado.
fuente
input.render()
esreact-dom
render. Es esto: airbnb.io/enzyme/docs/api/ShallowWrapper/render.htmlshallow()
no funciona por alguna razón ... elfocus
evento activa un método que intenta hacer referenciathis.refs.input
, que falla. Pero cuando intercambiarshallow
paramount
, funciona como se esperaba. Principalmente ... (un problema más con la simulación de la tecla ESC)render(<EditableText defaultValue="Hello" />)
. Creo que su caso de uso es más especializado de lo que pensaba; Veo que se ocupa de la nota solo con establecer el valor de entrada pero con el enfoque y "cancelar cambios". Sería genial si pudieras crear un plunker .