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:
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).