Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

529
Views
Mapbox Unit Testing - Failed to initialize WebGL

I'm currently using Mapbox for a React application and I'm trying to perform unit testing but it doesn't seem to work. I've set the Mapbox testMode to true and it still gives me an error saying:

Error: Failed to initialize WebGL.
at new Map (C:\Users\...\node_modules\mapbox-gl\dist\mapbox-gl.js:35:427889)

The following snippet is how we generate the mapbox component which also receives a test variable to set the 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}
      />;
}

And the code for testing our CustomMapBox component is as follows:

const renderMapBox = () => {
  return render(<CustomMapBox floorPlan={mockedFloorPlan} isTest={true} />);
};

describe("MapBox", () => {
  it("renders without error and two floors", () => {
    renderMapBox();
  });
}

I've tried to:

  • Change versions
  • Change jest configurations
  • Set mapbox testMode to true

And nothing seems to work.

Versions:

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

I'd really appreciate if someone could help me. Best regards, Daniel

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!