How to fix 'window.URL.createObjectURL is not a function' when testing mapbox-gl in React?

Question

I'm testing React component with Mapbox, material-ui and custom styles. I use Jest + Enzyme for testing.

I have problem: 'window.URL.createObjectURL is not a function'. I read similar questions: github.com/uber/react-map-gl/issues/210
github.com/mapbox/mapbox-gl-js/issues/3436
github.com/mapbox/mapbox-gl-js-mock

and tried to add something but without success. Please, fix the issue.

CodeSandbox

Answer 1

I had faced exactly same issue with my jest test suite. After some trial and searching, I was able to mock the createObjectURL method.

In jest.stub.js file, I put this config:

if (typeof window.URL.createObjectURL === 'undefined') {
  window.URL.createObjectURL = () => {
    // Do nothing
    // Mock this function for mapbox-gl to work
  };
}

Then, in jest.config.js file, I added a reference to the stub file

  setupFiles: [
    '<rootDir>/tests/jest.stub.js',
  ],

Note: make sure you get the path right in setupFile defintion.

Answer 2

I had the same issue running tests using the library Plotly.js with React and Jest.

My solution was to add a file src/setupTests.js with a mock for the createObjectURL function window.URL.createObjectURL = function() {};

Answer 3

I also was using React with Mapbox-gl and @Pablo Jurado's solution worked perfectly.

Just pasted window.URL.createObjectURL = function() {};

to src/setupTest.js file

and also modified npm test script to:

"scripts": { "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!your-module-name)/\"", },

based on this example