I have a component that renders a list of data, given by a hook. My hook returns some data on the component mount so the component always has some items to render.
MyList component:
function MyList() {
let {data} = useLoadData()
return (
<ul>
{data.map(i => <li key={i}>{i}</li>)}
</ul>
)
}
Data loader hook:
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}
}
I want to use jest to check if the initial data was rendered or not, is there any way to do it?