I am new to unit testing. I keep getting this error shows up and I'm not sure why. The other cases I have seen aren't related to jest. So, what is the solution for me? Is it within the component or have i just written the test wrong?
This is the fetch call in the component
const [data, setData] = useState(null);
const [isLoading, setLoading] = useState(false);
useEffect(() => {
setLoading(true)
const fetchList = async () => {
const newList = await fetch("https://api.github.com/search/repositories?q=created:%3E2017-01-10&sort=stars&order=desc")
.then((res) => res.json())
.then((data) => {
setData(data)
setLoading(false)
})
}
fetchList()
}, [500]);
if (isLoading) return <p className='text-white text-3xl text-center'>Loading...</p>
if (!data) return <p className='text-white text-3xl text-center'>No profile data</p>
This is the test
import RepoList from '../components/RepoList'
import {render, screen, act} from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
global.fetch = jest.fn(()=>
Promise.resolve({
json: () =>
Promise.resolve({
name : "name" ,
value: "Repo Name"
})
})
);
describe("RepoList", ()=> {
it("loads the data on click", async () => {
await act( async () => render(<RepoList/>))
expect(screen.getByText("Repo Name")).toBeInTheDocument()
})
});