I have a component that contains a loading spinner until data is fetched, and I can’t seem to get jest to successfully continue testing once the loading spinner is gone. Find a loose example of what I have tried below.
The test always fails at the waitFor
, even though the exact component in storybook renders fine. I have tried to increase the waitFor timeout without any luck.
Component:
function ChartWrapper({children}) {
const { data, error, loaded } = useQueryFunctionHere()
if (!loaded) return <LoadingSpinner />
return <>{children}</>
}
Test Case:
import { render, screen, waitFor } from "@testing-library/react"
it("Wrapper should render with loading spinner", async () => {
render(<ChartWrapper ><Chart /></ChartWrapper>)
const loadingSpinner = screen.getByTestId("loading-spinner")
expect(loadingSpinner).toBeInTheDocument()
await waitFor(() => expect(loadingSpinner).not.toBeInTheDocument())
// ... Continue other test cases...
})