Mapbox、Angular、jest 单元测试失败

Question

我有一个mapbox.service.ts

import * as mapboxgl from 'mapbox-gl';

在这个服务中我只是创建了这个mapbox地图

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

应用程序运行良好。 但是，当我运行 jest 单元测试时，这个 mapbox.service.spec.ts 失败了。

ReferenceError: TextDecoder is not defined

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

在mapbox.service.spec.ts内我没有添加任何测试用例。

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

为什么没有定义TextDecoder？

我将 setup.jest.ts 文件更改为

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

global.TextEncoder = TextEncoder;

在网上我找到了这个解决方案，然后我尝试了一下，但它显示其他错误：

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;

我只是使用常规的 MapBox 地图，没什么特别的。 有人在他们的应用程序中使用 Mapbox，如何修复此单元测试失败？

Answer 1

我明白为什么会发生错误。这是因为 Node 版本和 mapbox-gl 版本彼此不兼容。

1. 我降级了 Node 版本，但错误仍然存在。 我的节点版本是v20降级到（v18，v16，v14）。

2. 我没有碰Node版本，然后开始降级mapbox-gl版本。 我当前的mapbox-gl版本是v3.1.2.，然后我将其降级，直到错误消息消失。所以，当mapbox-gl版本变成v2.15.0时，错误就消失了。

现在一切正常，这可能对那些将来可能面临同样问题的人有帮助:)