I use mapbox-gl, specifically mapbox-gl-leaflet, in React to create a map:
import Leaflet from 'leaflet'
import 'mapbox-gl/dist/mapbox-gl.css'
import {} from 'mapbox-gl-leaflet'
import 'leaflet/dist/leaflet.css'
const Map = () => {
const map = useRef(null)
useEffect(() => {
Leaflet.mapboxGL({
accessToken: token,
style: 'mapbox://styles/mapbox/outdoors-v11',
}).addTo(map.current)
})
}
In the test it already fails when I try to mount <Map />
with this error:
Failed to initialize WebGL.
There are also two other Error messages:
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package) ...
This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.
But as you can see I import the CSS file. I think the problem is that in Jest there is no WebGL available. I also installed the canvas
npm package, but it didn't seem to help.
Is it possible to somehow mock WebGL? I already tried it with jest-canvas-mock. I importet it in the test file: import {} from 'jest-canvas-mock'
. But I still get the Error: Not implemented: HTMLCanvasElement.prototype.getContext ...
error.