How to use built-in fetch in tests?

[Vadorequest]

Following https://nextjs.org/blog/next-9-4#improved-built-in-fetch-support announcement about built-in fetch support, I removed my usage of isomorphic-unfetch.

But, in my test files, fetch isn't available.

How would you fix that? How can I load the built-in Next.js fetch module?

[laeckerv]

I believe on solution (IMHO not the best) is to use the isomorphic-unfetch as dev dependecy.

npm i -D isomorphic-unfetch

And then configure jest to use it.

module.exports = {
  ...
  setupFilesAfterEnv: ['isomorphic-unfetch'],
};

This way there is no need to change existing code.

Happy to hear of other solutions.

[Vadorequest]

It's not that bad of a workaround, I still hope I can find a way to re-use the one Next.js uses internally and avoid testing with a lib that's not identical.

I tried looking in the vercel repo for fetch libs, but couldn't really find the one being used. Also looked in package.json but unfetch and node-fetch are both being mentioned there, as devDeps.

[timneutkens]

The moment you run import next from 'next' the polyfill is applied.

[Vadorequest]

Tested and works very well indeed.

Commit: (removed node-fetch and imported next as prescribed above)
UnlyEd/next-right-now@c25ea57

[icyJoseph]

It seems that this approach doesn't work when one uses /api/<resource> and the jest test touches upon that component. Any suggestions?

[philwolstenholme]

@timneutkens is this still the case? When I include import next from 'next'; in my jest.setup.ts file I get fetch is not defined ReferenceErrors. Including require('next'); seems to let the tests run okay though, but I'm not sure if that's a smart thing to do given it goes against the advice you gave in this thread?