Mapbox单元测试-初始化WebGL失败

Question

我目前正在使用Mapbox为一个React应用程序，我试图执行单元测试，但它似乎不工作。我把Mapbox的testMode设置为true，它仍然给我一个错误说:

Error: Failed to initialize WebGL.
at new Map (C:Users...node_modulesmapbox-gldistmapbox-gl.js:35:427889)

下面的代码片段是我们如何生成mapbox组件，该组件还接收一个测试变量来设置testMode。

const MapBox = (props: MapBoxProps) => {
const { floorPlan, isTest } = props;
const { width } = useWindowDimensions();
const mapContainer = useRef(null);
const map = useRef(null);
const [lng, setLng] = useState(48);
const [lat, setLat] = useState(25);
const [zoom, setZoom] = useState(1.8);
const createMapbox = () => {
if (!isTest) {
mapboxgl.accessToken = appConfig.MAPBOX_TOKEN;
}
const mb = new mapboxgl.Map({
attributionControl: false,
container: mapContainer.current,
testMode: isTest,
style: {
version: 8,
sources: {},
layers: [
{
id: "background",
type: "background",
paint: {
"background-color": "white",
},
},
],
},
center: [lng, lat],
zoom: zoom,
maxZoom: 6,
dragRotate: false,
});
mb.addControl(new mapboxgl.NavigationControl({ showCompass: false }));
return mb;
};
return <div
data-cr="mapbox-container"
ref={mapContainer}
/>;
}

和测试CustomMapBox的代码组件如下:

const renderMapBox = () => {
return render(<CustomMapBox floorPlan={mockedFloorPlan} isTest={true} />);
};
describe("MapBox", () => {
it("renders without error and two floors", () => {
renderMapBox();
});
}

I've try to:

<<ul>

改变版本/gh>

更改jest配置

设置mapbox testMode为true

似乎什么都不起作用。

版本:

"mapbox-gl": "^2.8.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"ts-jest": "^27.0.7",
"jest": "^27.3.1",

如果有人能帮助我，我将非常感激。最好的问候,丹尼尔

Answer 1

你可以把它添加到你的setupTest.ts

import mapboxgl from 'mapbox-gl'
jest.mock('mapbox-gl', () => ({
Map: jest.fn(() => ({}))
}))
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
mapboxgl.Map.prototype = {
getBearing: jest.fn(),
getCenter: jest.fn(),
getPitch: jest.fn(),
getZoom: jest.fn(),
off: jest.fn(),
on: jest.fn(),
remove: jest.fn(),
//your map functions used in your component
}