Incompatibility with unit testing using vue test utils

[21F0rc3]

Hi,

I installed maplibre-gl and created a simple Vue component, with the getting started code that allows me to see a map. Everything was fine, until i created a unit test for it, using vue test utils. The test itself, does nothing, it just mounts the component. But unfortunelly, i receive the following error:

It seems that the test fails while trying to import the maplibre-gl on the component.

I did some research and this could be because the environment does not support "window.URL.createObjectURL()", and so I should use a polyfill. However, that has not worked.

I would like to know why is this happening, its something that could be solved in the library, is there any way for me to workaround it? If I cannot unit test the component, then i cannot use the library on the project.

Vue version: 2.6.14
MapLibreGL version: 2.4.0

Thanks in advance,
Gabriel Fernandes

[HarelM]

If the tests are not running in the browser, you'll have these sorry if issues. I'm not familiar enough with vue or its test framework.
I would recommend using Cypress for tests that are expected to use the map, canvas, etc...
We are running tests through node in this project, but it requires a lot of hacks that are simply not worth the trouble for applications that use this library.

[21F0rc3]

I see... Yes, in a node test environment I had a lot of trouble mocking a bunch of browser API's used by the library that are not available in this environment. In the end, I just mocked Map object, so that I do not run in this problem.

const maplibregl = require('maplibre-gl');

// Spy on the Map constructor
const MapSpy = jest.spyOn(maplibregl, 'Map');

// Mock the Map constructor to return the mock Map object
MapSpy.mockImplementation(() => jest.fn());

About the error "window.URL.createObjectURL()" I also mocked it as its on this discussion:
https://stackoverflow.com/questions/57943736/how-to-fix-window-url-createobjecturl-is-not-a-function-when-testing-mapbox-gl

I think I will go with this in the project, mocking Map object. In cases where I want to test functions from the Map object, I only test if they are being called.

I will close this discussion as i worked around it.
Thank you so much for sparing some time to answer my question! :)