Intentemos otro tipo de simulación de eventos en el navegador. Esta vez, simularemos un evento de cambio. Este tipo de evento es útil para algo como un campo de entrada de texto, donde queremos saber cuándo cambia el valor de entrada y cuál es el valor actual.
Crearemos un componente TextInput.js:
12345importarReaccionar de "reaccionar";exportarefectoFunciónTextoEntrada(puntales){retorno<entrada {...puntales}/{{i};;}javascript
Nótese que es, de nuevo, muy simple, simplemente frente a un elemento de entrada que pasa todos los {…props} en él.
La prueba es muy similar a la última vez, también:
1234567891011it("captura los cambios",done=;{functionhandleChange(evt){espect(evt.target.value). toEqual("whamo");done();}const{ getByPlaceholderText }=render(<TextInput onChange={handleChange} placeholder="Change Me"/>);const node =getByPlaceholderText("Change Me"); fireEvent.change(node,{ target:{ value: "whamo"});});javascript
Esta vez, para encontrar el nodo en el que disparar eventos, usamos una función de consulta diferente, getByPlaceholderText. Y, estamos llamando a la función fireEvent.change, pasando un nuevo, segundo parámetro. Este objeto que pasamos como argumento representa el objeto Evento. Por ejemplo, incluye la propiedad target, normalmente indicando el elemento desde el que se envió el Evento. Aquí, simplemente estamos pasando 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).