测试时出现ReferenceError: HTMLElement未定义的问题求助

问题背景 #

项目配置复杂，当前处于特定提交版本状态。在utils.test.ts文件中添加测试内容时，项目抛出ReferenceError: HTMLElement is not defined错误，且错误溯源指向一个完全未被测试文件直接引用的about-view.ts文件。

完整错误信息 #

PASS  dist/test/elo.test.js
FAIL  dist/test/utils.test.js
  ● Test suite failed to run

    ReferenceError: HTMLElement is not defined

      1 | import { Globals as g } from "../../infra/globals";
      2 |
    > 3 | export default class AboutView extends HTMLElement {
        |                                        ^
      4 |   static readonly tag: string = "about-view";
      5 |
      6 |   async connectedCallback(): Promise<void> {

    at Object.HTMLElement (src/ui/views/about-view.ts:3:40)
    at Object.<anonymous> (src/routing/switcher.ts:4:1)
    at Object.<anonymous> (src/routing/router.ts:3:1)
    at Object.<anonymous> (src/infra/setup.ts:13:1)
    at Object.<anonymous> (src/infra/globals.ts:2:1)
    at Object.<anonymous> (src/infra/utils.ts:3:1)
    at Object.<anonymous> (src/test/utils.test.ts:3:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       6 passed, 6 total
Snapshots:   0 total
Time:        0.653 s, estimated 1 s
Ran all test suites matching /.\/dist\//i.

已尝试的无效方案 #

修改tsconfig.json中的"lib": []配置，未解决问题。

异常现象 #

像dateSorter这种无外部依赖的简单函数，只有复制到测试文件中才能正常运行，目前已在3个位置重复复制该函数。

utils.test.ts代码内容 #

import * as chai from "chai";

import { paginationSlicer } from "../infra/utils";

import { GameEventTypes, TournamentOrLeague } from "../models/game_event";

describe("Pagination", () => {
  it("Pagination Slicer", () => {
    const events: TournamentOrLeague[] = [
      {
        type: GameEventTypes.tournament,
        name: "Comp 1",
        dates: [new Date(2022, 0, 29).getTime()],
      },
      {
        type: GameEventTypes.league,
        name: "Comp 2",
        dates: [new Date(2022, 0, 29).getTime()],
      },
      {
        type: GameEventTypes.league,
        name: "Comp 3",
        dates: [new Date(2022, 0, 29).getTime()],
      },
      {
        type: GameEventTypes.league,
        name: "Comp 4",
        dates: [new Date(2022, 0, 29).getTime()],
      },
      {
        type: GameEventTypes.league,
        name: "Comp 5",
        dates: [new Date(2022, 0, 29).getTime()],
      },
      {
        type: GameEventTypes.league,
        name: "Comp 6",
        dates: [new Date(2022, 0, 29).getTime()],
      },
    ];
    
    // 取消注释下面任意一行都会触发上述错误
    // expect(paginationSlicer(0, events)).toEqual(5)
    // chai.expect(paginationSlicer(0, events).length).equal(5);
  });
});

// 完全搞不懂为什么这个函数只能放在测试文件里才能正常运行，否则整个项目会出现奇怪错误，目前已经复制到3个地方
const dateSorter = <T extends { date: number }>(
  dateAble1: T,
  dateAble2: T,
  desc: boolean = false
): number => {
  const [d1, d2] = [new Date(dateAble1.date), new Date(dateAble2.date)];
  const coeff = d1 > d2 ? 1 : d1 < d2 ? -1 : 0;
  return desc ? -coeff : coeff;
};

describe("Date Sorter", () => {
  it("Positive Dates", () => {
    const dateAbles = [
      { date: 1507593600003 },
      { date: 1507593600001 },
      { date: 1507593600000 },
    ];

    dateAbles.sort(dateSorter);

    chai
      .expect(dateAbles)
      .to.deep.equal([
        { date: 1507593600000 },
        { date: 1507593600001 },
        { date: 1507593600003 },
      ]);
  });

  it("Positive Descending Dates", () => {
    const dateAbles = [
      { date: 1507593600003 },
      { date: 1507593600001 },
      { date: 1507593600000 },
    ];

    dateAbles.sort((d1, d2) => dateSorter(d1, d2, true));

    chai
      .expect(dateAbles)
      .to.deep.equal([
        { date: 1507593600003 },
        { date: 1507593600001 },
        { date: 1507593600000 },
      ]);
  });

  it("Negative Dates", () => {
    const dateAbles = [
      { date: -1507593600003 },
      { date: -1507593600001 },
      { date: -1507593600000 },
    ];

    dateAbles.sort(dateSorter);

    chai
      .expect(dateAbles)
      .to.deep.equal([
        { date: -1507593600003 },
        { date: -1507593600001 },
        { date: -1507593600000 },
      ]);
  });
});

项目结构 #

├── frontend/
│   ├── src/
│   │   ├── infra/
│   │   │   ├── utils.ts
│   │   ├── test/
│   │   │   ├── utils.test.ts
└── functions/

额外说明 #

将frontend文件夹作为functions项目的基础和引用，已在functions的tsconfig中添加引用路径并设置"composite": true。已在TypeScript官方仓库提交相关issue，寻求解决方案。

内容的提问来源于stack exchange，提问作者psygo