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

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

1 个答案: