CODEWITHSUNDEEP
angularmapboxts-jestmapbox-gl
Maksat Madeniyetov
Maksat Madeniyetov

Reputation: 41

Mapbox, Angular, jest unit test fails

I have a mapbox.service.ts import * as mapboxgl from 'mapbox-gl'; In this service I just create this mapbox map

this.map = new mapboxgl.Map({
  accessToken: this.accessToken,
  container: 'mapbox-container',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: { lat: 43.238949, lng: 76.889709 },
  zoom: this.currentZoom,
});

Application works fine. However, when I run jest unit tests, this mapbox.service.spec.ts fails.

ReferenceError: TextDecoder is not defined

      1 | import { Injectable } from '@angular/core';
    > 2 | import * as mapboxgl from 'mapbox-gl';

Inside mapbox.service.spec.ts I did not add any test cases.

import { inject, TestBed } from '@angular/core/testing';
import { MapboxService } from './mapbox.service';

describe('Service: Mapbox', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [MapboxService],
    });
  });

  it('should ...', inject([MapboxService], (service: MapboxService) => {
    expect(service).toBeTruthy();
  }));
});

Why TextDecoder is not defined?

I changed my setup.jest.ts file to

import 'jest-preset-angular/setup-jest';
import { TextEncoder } from 'node:util';

global.TextEncoder = TextEncoder;

On the Internet I found this solution, then I tried it, but it shows other errors:

Test suite failed to run

    src/setup.jest.ts:2:29 - error TS2307: Cannot find module 'node:util' or its corresponding type declarations.

    2 import { TextEncoder } from 'node:util';
                                  ~~~~~~~~~~~
    src/setup.jest.ts:4:1 - error TS2304: Cannot find name 'global'.

    4 global.TextEncoder = TextEncoder;

I'm just using a regular MapBox map, nothing special. Anyone using Mapbox in their application, how to fix this unit test failure?

Upvotes: 0

Views: 381

Answers (2)

marracuene
marracuene

Reputation: 171

A better solution, which does allow one to upgrade to a more recent version of mapbox-gl, is defined here: https://stackoverflow.com/a/68468204/13702327

This allowed me to upgrade from [email protected] (where the above problem did not occur) to [email protected] (where it did). All without changing the version of node, which is at 18.x.

Note that in your test source structure you must define this before reaching code which loads any import of 'mapbox-gl'. If your mapbox-dependent code is structured in libraries, and your tests depend on those libraries, this will be when the library's index.ts is loaded - even in a test which does not specifically depend upon a mapbox-depending entity with that library.

So, per the linked answer, best to define it in a test-setup file.

Upvotes: 0

Maksat Madeniyetov
Maksat Madeniyetov

Reputation: 41

I understood why the error occurs. This is because the Node version and the mapbox-gl versions are not compatible with each other.

  1. I downgraded my Node version, but the error still persists. My node version is v20 downgraded to (v18, v16, v14).

  2. I did not touch Node version and then started downgrading mapbox-gl version. My current version of mapbox-gl is v3.1.2., then I downgraded it until the error message disappeared. So, when mapbox-gl version became v2.15.0, then the error went away.

Now, everything works fine, it may be helpful for those who may face the same problem in the future :)

Upvotes: 2

Related Questions