How to test a component containing OpenLayers map using createReactApp

Question

I have a component like this one:

import React, { Component } from 'react';
import Map from 'ol/map';
import View from 'ol/view';
import Tile from 'ol/layer/tile';
import OSM from 'ol/source/osm';
import { mapInitialized } from '../../actions/map';

export default class MapWrapper extends Component<Props> {
  componentDidMount() {
    const map = new Map({
      layers: [
        new Tile({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
      target: 'map',
    });
  }
  render() {
    return (
      <MapWrapper id="map" className="map" />
    );
  }
}

And a test like this:

import React from 'react';
import {Shallow} from 'enzyme';
import MapWrapper from '../mapWrapper/MapWrapper'

it ('renders without crashing', ()=>{
    Shallow(<MapWrapper/>);
})

After running "npm test" i gives me error message:

"node_modules\ol\map.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)
{import _ol_ from './index.js';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)

I figured out, its due to not transforming the ol/map.js file trough babel. But what can I do about it?

Answer 1

I had to add the following to my jest.config.js file. Hope this helps.

"transformIgnorePatterns": [
  "node_modules/(?!(ol)/)"
]