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}
}
My test is something like this but It doesn't pass. MyList.test.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()
});
I want to use jest to check if the initial data was rendered or not, is there any way to do it?
I use ReactTestingLibrary.
make an async jest test to hold the test
it("it should test", async () => {
const wrapper = mount(<Component />)
await new Promise(function (res) {
setTimeout(()=> res("done"),4000)
})
expect(wrapper)...
});