Tengo un componente que muestra una lista de datos, dada por un gancho. Mi gancho devuelve algunos datos sobre el montaje del componente, por lo que el componente siempre tiene algunos elementos para representar.

Componente MiLista:

 function MyList() { let {data} = useLoadData() return ( <ul> {data.map(i => <li key={i}>{i}</li>)} </ul> ) }

Gancho del cargador de datos:

 function useLoadData() { const [data, setData] = useState([]) const fetchData = useCallback((params) => { fetch("url") .then(res => res.json()) .then(res => setData(res)) }, []) useEffect(() => { fetchData() }, []) return {data, fetchData} }

Mi prueba es algo como esto pero no pasa. MiLista.prueba.js

 test('check if list contains item1', async () => { await act(async () => { render(<MyList/>) }); await waitFor(() => { // I'd look for a real text here that is renderer when the data loads expect(screen.getByText('item1')).toBeInTheDocument(); }) const item1 = screen.getByText("item1"); expect(item1).toBeInTheDocument() });

Quiero usar jest para verificar si los datos iniciales se procesaron o no, ¿hay alguna forma de hacerlo?

Yo uso ReactTestingLibrary.