Saltar al contenido

Simular eventos del navegador en reacción con ReactTestUtils

Intentemos otro tipo de simulación de eventos del navegador. Esta vez simularemos un evento de cambio. Este tipo de evento es útil en algo como un campo de entrada de texto, donde queremos saber cuándo cambia el valor de entrada y cuál es realmente el valor actual.

Crearemos un componente TextInput.js:

Simular eventos del navegador en reacción con ReactTestUtils
Simular eventos del navegador en reacción con ReactTestUtils
12345importReactfrom "react";exportdefaultReact.forwardRef(functionTextInput(props, ref){return<input {...props} ref={ref}/>;});

javascript

Note que es muy simple, simplemente se coloca un elemento de entrada y se pasa un árbitro y todo {…props} dentro de él.

La prueba es muy similar a la última vez también:

123456789it("captura los cambios",done=;{const ref =React.createRef();functionhandleChange(evt){expect(evt.target.value).toEqual("whamo");done();}ReactDOM. render(<TextInput onChange={handleChange} ref={ref}/>, div);ReactTestUtils.Simulate.change(ref.current,{ target:{ value: "whamo"});});

javascript

Note que ahora estamos llamando al método de cambio ReactTestUtils.Simulate.y estamos pasando un segundo parámetro. Este parámetro, un objeto, representa el objeto Evento. Por ejemplo, incluye la propiedad objetivo, que normalmente indica el elemento desde el que se envió el Evento. Aquí estamos simplemente dando un valor.

Luego, en nuestro manejador de cambio, podemos afirmar que el valor del evento objetivo que viene como “whamo” (siempre un gran valor de entrada).