es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Apunta a un elemento en blanco – solo tiene el atributo de tipo.

05 Aug, 2023 Programación

¿Cómo se puede utilizar React Testing Library para seleccionar un elemento en blanco que solo tiene un atributo type?

Por ejemplo, tengo mi input que se llenará dinámicamente con atributos, similar a la etiqueta que lo rodea:

<label htmlfor="{labelInput}">
    {labelText}
</label>

<input type="text" id="{labelInput}" name="{labelInput}" ...="">

Pero cuando no le paso nada, se verá así:

<input type="text">

He estado leyendo que puedo usar getByRole('input') o getByRole('textbox') para seleccionar esto, ya que tiene el atributo type="text", pero no logro hacer que esto funcione correctamente al afirmar que otros atributos no están presentes.

Por ejemplo, no puedo hacer que vea que estoy realizando acciones de usuario para escribir texto en el input…

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"
Se esperaba que el elemento tuviera el atributo:
   value="some-text"
Recibido:
   null

24 | 
> 25 |         expect(input).toHaveAttribute('value', 'some-text');
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para apuntar a un elemento <input> en blanco que solo tiene un atributo type, puedes usar getByRole('textbox') o getByRole('textbox', { value: '' }) en React Testing Library. Este último apuntará específicamente a un cuadro de texto vacío.

    Para asegurarte de que el cuadro de texto tenga el valor esperado después de realizar acciones del usuario, puedes usar expect(input).toHaveValue('some-text'). Esta afirmación verifica el valor actual visible para el usuario en el input, en lugar de solo verificar el atributo value.

    Aquí tienes un ejemplo:

    import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('puede escribir en un input en blanco', () => {
  render(<input type="text">);

  const input = screen.getByRole('textbox', { value: '' }); // o getByRole('textbox')
  userEvent.type(input, 'some-text');

  expect(input).toHaveValue('some-text');
});

Comments are closed.