react使用openlayers_如何使用createReactApp测试包含OpenLayers映射的组件

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 {

componentDidMount() {

const map = new Map({

layers: [

new Tile({

source: new OSM(),

}),

],

view: new View({

center: [0, 0],

zoom: 2,

}),

target: 'map',

});

}

render() {

return (

);

}

}

And a test like this:

import React from 'react';

import {Shallow} from 'enzyme';

import MapWrapper from '../mapWrapper/MapWrapper'

it ('renders without crashing', ()=>{

Shallow();

})

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

"node_modules\ol\map.js:1

({"Object.":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?

解决方案

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

"transformIgnorePatterns": [

"node_modules/(?!(ol)/)"

]