【MSW】Jestでwhatwgのfetch APIをmock化しようとするとエラーになった

JestとMSWでReactコンポーネントのfetch部分をmock化しようとしたらエラーになった

ReferenceError: fetch is not defined

whatwgのfetchはブラウザでしか使えないのでJest（node）で使うにはpolyfillが必要

jest.config.js

const fetchPolyfill = require('whatwg-fetch')

module.exports = {
  ...
  globals: {
    fetcht: fetchPolifill.fetch,
  },
  ...
}

ただ、これだけでもダメで、今度はXMLHttpRequestが未定義だとエラーがでてしまったのでこれもpolyfillを用意する

global.XMLHttpRequest = require('w3c-xmlhttprequest').XMLHttpRequest;

const fetchPolyfill = require('whatwg-fetch')
const XMLHttpRequstPolyfill = require('w3c-xmlhttprequest')

module.exports = {
  ...
  globals: {
    fetcht: fetchPolifill.fetch,
    XMLHttpRequest = XMLHttpRequstPolyfill.XMLHttpRequest;
  },
  ...
}

ただ、これをやるなら、素直にisomorphic-fetchやaxiosを使った方がよいかもしれない

isomorphic-fetch - npm

参考

https://github.com/facebook/react-native/issues/11537

https://github.com/facebook/jest/issues/2071