测试mapbox-gl映射失败，因为没有WebGL

编程问答 2022-09-30

问题描述

我在React中使用mapBox-gl，特别是mapBox-gl-leaflet来创建地图：

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

在测试中，当我尝试安装<Map />并出现以下错误时，它已经失败了：

无法初始化WebGL。

还有另外两个错误消息：

错误：未实现：HTMLCanvasElement.prototype.getContext（未安装canvas npm包）...

此页面似乎缺少MapBox GL JS的CSS声明，这可能导致地图显示不正确。请确保您的页面包含mapBox-gl.css，如https://www.mapbox.com/mapbox-gl-js/api/中所述。

但是您可以看到我导入了CSS文件。我认为问题在于Jest中没有可用的WebGL。我还安装了canvas npm软件包，但似乎没有帮助。 是否可以模拟WebGL？我已经使用jest-canvas-mock进行过尝试。我将其导入测试文件：import {} from 'jest-canvas-mock'。但是我仍然遇到Error: Not implemented: HTMLCanvasElement.prototype.getContext ...错误。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jestjsleafletmapboxreactjsreactjs