Cannot read property 'baseVal' of undefined when testing

[shanytc]

Hey, I am trying to test the map using jest/enzyme, I am getting this error whenever I try to mount() my component.

It fails on d3-zoom.js when trying to access the viewBox

if (e.hasAttribute("viewBox")) {
      e = e.viewBox.baseVal;  <---- here
      return [[e.x, e.y], [e.x + e.width, e.y + e.height]];
    }

react code

<ComposableMap
   width={width}
   height={height}
   projectionConfig={{
     scale: scale,
     center: center,
   }}
 >
    <ZoomableGroup zoom={defaultZoom} center={center}>
        Geographies geography={topography}>......</Geographies>
    </ZoomableGroup>
</ComposableMap>

[kopach]

I ended up mocking react-simple-maps and mocking ZoomableGroup. Something like this

  jest.mock('react-simple-maps', () => ({
    ...jest.requireActual('react-simple-maps'),
    ZoomableGroup: ({ children }: ZoomableGroupProps): JSX.Element => <>{children}</>,
  }))