I am currently running tests on a Next/React project using Jest with Node. I have also implemented cross-fetch in my project.
However, I encountered an issue when trying to mock cross-fetch for a specific component:
import crossFetch from 'cross-fetch'
jest.mock('cross-fetch')
crossFetch.mockResolvedValue({
status: 200,
json: () => {{
user : testUser
}},
})
render(<UserProfile />)
Despite setting up the mock, the API request in "getServerSideProps" always returns a 500 error code:
export async function getServerSideProps({ query: { userId } }) {
let user = null
let code = 200
try {
let response = await fetch(`https://example.com/users/${userId}`, { method: 'GET' })
let statusCode = response.status
let data = await response.json()
if (statusCode !== 200) {
code = statusCode
} else {
user = data.user
}
} catch (e) {
console.log(e.message)
}
return {
props: {
user,
code,
},
}
}
I suspect that the issue might be related to the testing environment not accurately reflecting the browser, where the actual HTTP request is initiated. This could explain why the mocking of the fetch library may not be working as expected. However, this is just a hypothesis.
Thank you in advance for any assistance provided.