Why is a catch being triggered if my Fetch is succesful? - reactjs

Question

I am testing with component where on component did mount, it gets some data from an api,
I am mocking the response to be succesful, but still the catch block is being triggered, i think it shouldnt.
and i get this error:
TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (C:\Users\jorge\Documents\testingreact\React-Testing-For-Beginners\node_modules\whatwg-fetch\fetch.js:436:16)
This is my component:
class MoviesList extends PureComponent {
state = {
movies: [],
};
async componentDidMount() {
try {
const res = await fetch(
'https://api.themoviedb.org/3/discover/movie?api_key=APIKEY&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1',
)
const movies = await res.json();
if (movies.success) {
this.setState({
movies: movies.results,
})
}
} catch (e) {
console.log(e);
}
}
render() {
...stuff
}
Then in my test i am mocking the result, and setting a property on the response called success to true
So, the catch error should not be triggered, however the console.log in the catch block is being logged.
Here is the test:
global.fetch = require('jest-fetch-mock')
afterEach(() => {
cleanup
})
const movies = {
success: true,
results: [
{
id: 'hi1',
title: 'title1',
poster_path: 'gfdsftg'
},
{
id: 'hi2',
title: 'title2',
poster_path: 'gfdsftg'
}
]
}
const movie = movies.results[0]
test('<MoviesList />', async () => {
fetch.mockResponseOnce(JSON.stringify(movies))
const {getByTestId, queryByTestId, getAllByTestId} = render(<MoviesList />)
...some assertions here that all pass
})
Why is the catch block being triggered?