Estoy probando un cuadro combinado en el primer renderizado, el valor inicial del cuadro combinado no está definido. Luego, utilizando los parámetros de consulta y un useEffect, el componente encuentra la opción relevante y le establece el estado de valor.
const Component = () => { [value, setValue] = useState(undefined); useEffect(() => { setValue("hello") }, []) return( <Combobox value={value}/> ) } it("should render with value as hello", () => { const {getByText} = render(<Component/>) const text = getByText("hello") })Ese conjunto de pruebas arroja este error:
TestingLibraryElementError: Unable to find an element with the text: Photobug. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.Al probar en la biblioteca de pruebas de reacción. No puedo recuperar el valor de texto esperado porque muestra lo que se ha renderizado en el primer renderizado. Lo cual no hubiera sido nada porque el valor no está definido.
He probado una combinación de métodos asíncronos. Aync await patrón, await waitFor(() => ), findByText, etc., todo fue en vano.
Parece que en su prueba debe esperar hasta que su componente esté completamente renderizado. Puede usar el método waitFor proporcionado por la biblioteca de pruebas de reacción.
Traté de reproducir su problema con un cuadro de entrada.
Componente:
import { useState, useEffect } from "react"; export const Component = () => { const[value, setValue] = useState(''); useEffect(() => { setValue("hello") }, []) return( <input value={value}/> ) }Caso de prueba :
it("should render with value as hello", async () => { const {getByRole} = render(<Component/>) await waitFor(() => expect(getByRole('textbox')).toHaveValue('hello')) })En su caso, debe dar rol como cuadro combinado.
await waitFor(() => expect(getByRole('combobox')).toHaveValue('hello'))