CODEWITHSUNDEEP
reactjsunit-testingenzymemapbox-gl-js
Ilya
Ilya

Reputation: 93

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

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

Upvotes: 8

Views: 13818

Answers (4)

Altivo
Altivo

Reputation: 21

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

Upvotes: 1

Pablo Jurado
Pablo Jurado

Reputation: 91

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() {};

Upvotes: 5

Oleg Levin
Oleg Levin

Reputation: 3621

  1. Add package: mapbox-gl-js-mock

  2. add require("mapbox-gl-js-mock"); before jest.mock(

    import React from 'react'; import { createShallow } from '@material-ui/core/test-utils';

    import App from './App';
require("mapbox-gl-js-mock");

jest.mock('mapbox-gl/dist/mapbox-gl', () => ({
  App: () => ({}),
}));

describe('<App />', () => {
  let shallow;

  beforeEach(() => {
    shallow = createShallow({ dive: true });
  });

  it('renders without crashing', () => {
    const wrapper = shallow(<App />);
    expect(wrapper.find('.MapBox')).toExist();
  });
});

Upvotes: 0

Manish
Manish

Reputation: 5213

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.

Upvotes: 16

Related Questions