logo标签列表

使用jsdom和jest测试react-mapbox-gl

typescriptjestjsmapbox-gl-jsjsdom
13

考虑我们有以下地图组件。这是使用TypeScript编写的，但对于普通JavaScript应该也适用。

import * as React from 'react';
import ReactMapboxGl from 'react-mapbox-gl';

const MapBox = ReactMapboxGl({
  accessToken: 'pk.<redacted>'
});

export default class Map extends React.Component {
  render() {
    return (
      <MapBox
        style="mapbox://styles/mapbox/streets-v9"
        zoom={[0]}
        containerStyle={{
          height: '500px',
          width: 'inherit'
        }}
      />);
  }
}

然后它成为一些React应用程序的一部分，被渲染如下：

import * as React from 'react';

export default class App extends React.Component {
  render() {
    return (
          <Map />
    );
  }
}

为了测试这个设置，我们使用 Jest 和 JSDOM。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});

这个测试将无法运行并生成以下输出：

    TypeError: window.URL.createObjectURL is not a function

      at Object.254.../../source/worker (node_modules/mapbox-gl/dist/mapbox-gl.js:509:100)
      at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
      at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
      at Object.280.../ (node_modules/mapbox-gl/dist/mapbox-gl.js:561:28)
      at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
      at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
      at Object.263../worker_pool (node_modules/mapbox-gl/dist/mapbox-gl.js:527:29)
      at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
      at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
      at Object.191.../render/glyph_manager (node_modules/mapbox-gl/dist/mapbox-gl.js:383:809)
      at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
      at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
      at Object.248.../geo/lng_lat (node_modules/mapbox-gl/dist/mapbox-gl.js:497:338)
      at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
      at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
      at Object.72.../package.json (node_modules/mapbox-gl/dist/mapbox-gl.js:144:148)
      at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
      at e (node_modules/mapbox-gl/dist/mapbox-gl.js:1:882)
      at node_modules/mapbox-gl/dist/mapbox-gl.js:1:900
      at Object.<anonymous>.i (node_modules/mapbox-gl/dist/mapbox-gl.js:1:177)
      at Object.<anonymous> (node_modules/mapbox-gl/dist/mapbox-gl.js:1:413)
      at Object.<anonymous> (node_modules/react-mapbox-gl/lib/map.js:21:16)
      at Object.<anonymous> (node_modules/react-mapbox-gl/lib/index.js:3:13)
      at Object.<anonymous> (src/Map.tsx:14:25)
      at Object.<anonymous> (src/NewOrder.tsx:21:13)
      at Object.<anonymous> (src/Routes.ts:17:18)
      at Object.<anonymous> (src/App.tsx:16:16)
      at Object.<anonymous> (src/App.test.tsx:6:169)
          at <anonymous>
亲爱的读者，我的问题很简单：是否有可能解决这个问题？我们是否可以使用某些方法来注入模拟的MapBoxGL库？我在GitHub上找到了多个与此问题相关的问题，但是它们都没有提供解决方案：1、2。一些建议使用mapbox-gl-js-mock，而另一些则声称它无用，因为它也需要真实的浏览器才能运行。另外，JSDOM项目中还有一个相关问题，关于添加URL.createObjectURL，这可能会解决潜在问题。
4个回答
14

我遇到了同样的问题，当我按照这里所列出的方式将以下代码添加到我的测试块的顶部时，它起作用了。

jest.mock('mapbox-gl/dist/mapbox-gl', () => ({
   Map: () => ({})
}));
3
这个问题也相关。特别是，我不得不再进一步进行（如此评论所示），才能得到一个可用的设置。 - maltem-za
8
你可以将这个代码添加到你的测试文件中的 setupTest.ts。
jest.mock('mapbox-gl/dist/mapbox-gl', () => ({
  GeolocateControl: jest.fn(),
  Map: jest.fn(() => ({
    addControl: jest.fn(),
    on: jest.fn(),
    remove: jest.fn(),
  })),
  NavigationControl: jest.fn(),
}));
0

您可以使用自定义元素来模拟整个地图，如下所示：

jest.mock('react-mapbox-gl', () => ({
  __esModule: true,
  default: () => function () {
    return <span>Mock map</span>;
  },
  Cluster: () => <span>Mock cluster</span>,
}));
-1
如果您正在使用import和TypeScript：
jest.mock('mapbox-gl/dist/mapbox-gl', () => {
  return {
    'default': {
      accessToken: '',
      GeolocateControl: jest.fn(),
      Map: jest.fn(() => ({
        addControl: jest.fn(),
        on: jest.fn(),
        remove: jest.fn(),
        fitBounds: jest.fn(),
      })),
      NavigationControl: jest.fn(),
    }
  }
});
这是否应该解决此问题的问题？https://github.com/visgl/react-map-gl/issues/1478 - Peterhack
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接