CODEWITHSUNDEEP
reactjstestingmockingjestjsbing-maps
WeSt
WeSt

Reputation: 929

Mock Bing Maps API with Jest in React.js

In my Jest test I need to generate a Bing Maps Push Pin like this:

it('...', () => {
  var e = new window.Microsoft.Maps.Pushpin({ "latitude": 56.000, "longitude": 46.000 }, {});
  /* do stuff */
  expect(e.getColor()).toEqual('#ffd633');
})

But while I'm running the test I get the error:

TypeError: Cannot read property 'Maps' of undefined

Does someone know how to mock that Bing Maps API Microsoft interfaces with Jest in React?

Upvotes: 1

Views: 972

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59348

One option would be to introduce Bing Maps API classes mock and register it via beforeAll Jest setup function as demonstrated below: 

const setupBingMapsMock = () => {
  const Microsoft = {
    Maps: {
      Pushpin : class {
        location = null;
        options = null;
        constructor(location,options) {
          this.location = location;
          this.options = options;
        }

        getColor(){
          return this.options.color;
        }
      }
    }
  };

  global.window.Microsoft = Microsoft;
};

beforeAll(() => {
  setupBingMapsMock();
});

it("creates a marker", () => {
  const e = new window.Microsoft.Maps.Pushpin(
    { latitude: 56.0, longitude: 46.0 },
    {'color': '#ffd633'}
  );
  expect(e.getColor()).toEqual("#ffd633");
});

Result

enter image description here

Upvotes: 1

Related Questions