¿Cómo se puede usar React Testing Library para apuntar a un elemento <input> en blanco que solo tiene un atributo de type ?
Por ejemplo, tengo mi entrada que se llenará dinámicamente con atributos, etc., similar a la etiqueta que la rodea:
<label htmlFor={labelInput}> {labelText} </label> <input type="text" id={labelInput} name={labelInput} ... />pero mientras no le estoy pasando nada, se verá así:
<input type="text" /> He estado leyendo que puedo usar getByRole('input') o getByRole('textbox') para apuntar a esto ya que tiene el atributo type="text" , pero parece que no puedo hacer que esto funcione correctamente cuando afirmo que otros atributos no están presentes.
Por ejemplo, no puedo hacer que vea que estoy realizando acciones de usuario para escribir texto en la entrada...
const input = getByRole('textbox'); userEvent.type(input, 'some-text'); expect(input).toHaveAttribute('value', 'some-text');Esta prueba devuelve:
expect(element).toHaveAttribute("value", "some-text") // element.getAttribute("value") === "some-text" Expected the element to have attribute: value="some-text" Received: null 24 | > 25 | expect(input).toHaveAttribute('value', 'some-text');Después de investigar un poco más, parece que no deberíamos usar .toHaveAttribute('value'... sino que podemos consultar directamente la propiedad de value de la variable de input definida y encontrada.
Realización de la siguiente prueba PASA
expect(input.value).toBe('some-text');Como señaló tan amablemente @MaxLarionov:
Tenga en cuenta que en expect(input.value).toBe('some-text'); está evaluando que el nodo DOM de entrada tiene una propiedad de valor establecida en algún texto. No evalúa la configuración del atributo. Para un atributo, podría usar JS nativo:
expect(input.getAttribute('value')).toBe('some-text');