Reactjs 测试mapbox gl map在测试中失败，因为没有WebGL

我使用mapbox gl，特别是mapbox gl传单，在React中创建地图：

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

在测试中，当我尝试装载

时，它已经失败，出现以下错误：

未能初始化WebGL

还有两条其他错误消息：

---

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

此页面似乎缺少Mapbox GL JS的CSS声明，这可能会导致地图显示不正确。请确保您的页面包含mapbox-gl.css，如中所述

但是正如您所看到的，我导入了CSS文件。我认为问题在于，开玩笑的是，没有可用的WebGL。我还安装了

canvas

npm包，但似乎没有什么帮助。

---

是否有可能以某种方式模拟WebGL？我已经试过了。我在测试文件中导入它：

import{}来自'jest canvas mock'

。但是我仍然得到

错误：未实现：htmlcanvaseelement.prototype.getContext…

错误。

使用？这些是需要模拟的映射框和/或传单。Jest使用的是假的DOM，它不能也不会表现得像真实的东西，一旦你做了一些复杂的事情，它就会崩溃。应该模拟严重依赖真实浏览器工作方式的第三方LIB。错误：未实现：HTMLCanvasElement.prototype.getContext。。。这个错误我解决了在挂载组件之前添加window.HTMLCanvasElement.prototype.getContext=（）=>{}时出现的问题。目前我遇到了与WebGL相同的错误。