reactjs - 如何使用 createReactApp 测试包含 OpenLayers map 的组件

Question

我有一个像这样的组件:

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" />
    );
  }
}

像这样的测试:

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

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

运行“npm test”后，我给出错误消息:

"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)

我发现，这是由于没有通过 babel 转换 ol/map.js 文件。但我能做什么呢？

Answer 1

我必须将以下内容添加到我的 jest.config.js 文件中。希望这会有所帮助。

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