¿Cuál es la mejor manera de probar el valor de un elemento <input> en dom-testing-library / react-testing-library ?
El enfoque que he tomado es obtener el elemento de entrada sin procesar a través del método closest() , que luego me da acceso directo al atributo de value :
const input = getByLabelText("Some Label") expect(input.closest("input").value).toEqual("Some Value")Esperaba que hubiera una forma de hacerlo sin tener que acceder directamente a los atributos HTML. No parecía que estuviera en el espíritu de la biblioteca de pruebas. Tal vez algo como el comparador de coincidencias jest-dom toHaveTextContent :
const input = getByLabelText("Some Label") expect(input).toHaveTextContent("Some Value")Según la solicitud en los comentarios, aquí hay un ejemplo de código que muestra una situación en la que sentí la necesidad de probar el valor en el cuadro de entrada.
Esta es una versión simplificada de un componente modal que construí en mi aplicación. Como, extremadamente simplificado. La idea general aquí es que el modal se abre con la entrada precargada con algún texto, basado en un accesorio de cadena. El usuario puede editar libremente esta entrada y enviarla presionando un botón. Pero, si el usuario cierra el modal y luego lo vuelve a abrir, me gustaría que el texto se restableciera a ese accesorio de cadena original. Escribí una prueba porque una versión anterior del modal NO restableció el valor de entrada.
Estoy escribiendo esto en TypeScript para que los tipos de cada accesorio sean muy claros.
interface Props { onClose: () => void isOpen: boolean initialValue: string } export default function MyModal({ onClose, isOpen, initialValue }) { const [inputValue, setInputValue] = useState(initialValue) // useEffect does the reset! useEffect(() => { if (!isOpen) { setNameInput(initialValue) } }, [isOpen, initialValue]) return ( <SomeExternalLibraryModal isOpen={isOpen} onClose={onClose}> <form> <input value={inputValue} onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value) } /> <button onClick={onClose}>Cancel</button> </form> </SomeExternalLibraryModal> ) }Tiene razón al sospechar de su método de prueba con respecto a cómo esta biblioteca de prueba quiere que pruebe. La respuesta más sencilla a esta pregunta sería utilizar la consulta getByDisplayValue . textarea una entrada, un área de texto o una selección que tenga el valor que está intentando encontrar. Por ejemplo, usando su componente como ejemplo, si estuviera tratando de verificar que inputValue = 'test' , buscaría como
expect(screen.getByDisplayValue('test')).toBeInTheDocument(); Eso es todo lo que necesitas hacer. Supongo que su prueba solo representa el componente MyModal . Incluso si tiene múltiples entradas, no importa en lo que respecta a la filosofía de prueba. Siempre que getByDisplayValue encuentre cualquier entrada con ese valor, es una prueba exitosa. Si tiene varias entradas y desea probar que la entrada exacta tiene el valor, puede profundizar en el elemento para determinar si es la entrada correcta:
nota: necesitarás jest-dom para que esto funcione.
expect(screen.getByDisplayValue('test')).toHaveAttribute('id', 'the-id'); o (sin jest-dom ):
expect(screen.getByDisplayValue('test').id).toBe('the-id');Por supuesto, puede buscar cualquier atributo que desee.
Una alternativa final para probar el valor es encontrar la entrada por rol. Esto no funcionará en el caso de su ejemplo a menos que agregue una etiqueta y la afilie a su entrada a través del atributo htmlFor . A continuación, podría probarlo así:
expect(screen.getByRole('input', { name: 'the-inputs-id' })).toHaveValue('test'); o (sin jest-dom ):
expect(screen.getByRole('input', { name: 'the-inputs-id' }).value).toBe('test'); Creo que esta es la mejor manera de probar el valor mientras se asegura de que la entrada correcta tenga el valor. Sugeriría el método getByRole , pero nuevamente, deberá agregar una etiqueta a su ejemplo.
Puede usar screen.getByDisplayValue() para obtener el elemento de entrada con un valor mostrado y compararlo con su elemento.
type TestElement = Document | Element | Window | Node function hasInputValue(e: TestElement, inputValue: string) { return screen.getByDisplayValue(inputValue) === e }En tu prueba:
const input = screen.getByLabelText("Some Label") fireEvent.change(input, { target: { value: '123' } }) expect(hasInputValue(input, "123")).toBe(true)expect(screen.getByLabelText("Name")).toHaveValue("hello"); - esto te da el valor de la entrada :)
<label class="label" for="name"> Name </label> <div class="control "> <input class="input" for="name" id="name" name="name" value="hello" /> </div>Prueba:
userEvent.type(screen.getByLabelText("Name"), "hello") await waitFor(() => { expect(screen.getByLabelText("Name")).toHaveValue("hello"); });Hay una forma muy limpia de probarlo usando la biblioteca de prueba.
//In describe const renderComponent = (searchInputValue, handleSearchInputValue) => { const wrapper = render(<yourComponentWithInput value={searchInputValue} onChange={handleSearchInputValue} />); return wrapper; }; //In test const mockHandleSearchInputValue = jest.fn(); const { getByLabelText } = renderComponent('g', mockHandleSearchInputValue); const inputNode = getByLabelText('Search label'); // your input label expect(inputNode.value).toBe('s'); // to test input value fireEvent.change(inputNode, { target: { value: 'su' } }); // triggers onChange event expect(mockHandleSearchInputValue).toBeCalledWith('su'); // tests if onChange handler is called with proper valueUsando @testing-library/dom (o cualquiera de las bibliotecas envueltas aquí )
Tu puedes hacer:
expect(inputField).toHaveDisplayValue('some input value');Ejemplo completo:
test('should show input with initial value set', async () => { render(<Input type="text" value="John Doe" data-testid="form-field-firstname" />); const inputField = await screen.findByTestId(`form-field-firstname`); await waitFor(() => expect(inputField).toHaveDisplayValue('John Doe'))); });