Angular 15 单元测试 - 无法读取只读常量的属性，为什么？

Question

我无法使用 Angular 15.2.10 和 Karma 6.3.12 运行单元测试，我也尝试过 Karma 6.4.3 但有同样的问题。
奇怪的是，它给我的错误是只读常量而不是变量。
显然，如果使用

ng serve

运行，代码可以完美运行

这是完整的堆栈跟踪：

27 03 2024 17:19:00.500:WARN [karma-server]: `autowatch` and `singleRun` are both `false`. In order to execute tests use `karma run`.
√ Browser application bundle generation complete.
27 03 2024 17:19:19.887:INFO [karma-server]: Karma v6.4.3 server started at h t t p : / / localhost:9876/
27 03 2024 17:19:19.890:INFO [launcher]: Launching browsers Edge with concurrency unlimited
27 03 2024 17:19:19.895:INFO [launcher]: Starting browser Edge
27 03 2024 17:19:28.277:INFO [Edge 122.0.0.0 (Windows 10)]: Connected on socket ZJvt9iD1pJGZzp_IAAAB with id 72359205
Edge 122.0.0.0 (Windows 10) ERROR
  An error was thrown in afterAll
  Uncaught TypeError: Cannot read properties of undefined (reading 'restCallType')
  TypeError: Cannot read properties of undefined (reading 'restCallType')
      at Function.<static_initializer> (localhost:9876/_karma_webpack_/webpack:/src/app/commons/core/utility/constants.ts:613:20)
      at Module.20467 (localhost:9876/_karma_webpack_/webpack:/src/app/commons/core/utility/constants.ts:6:23)
      at __webpack_require__ (localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Module.84225 (localhost:9876/_karma_webpack_/main.js:5733:89)
      at __webpack_require__ (localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Module.55041 (localhost:9876/_karma_webpack_/main.js:63:98)
      at __webpack_require__ (localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Module.24882 (localhost:9876/_karma_webpack_/main.js:14:72)
      at __webpack_require__ (localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at __webpack_exec__ (localhost:9876/_karma_webpack_/main.js:27950:48)

groups-search.component.spec.ts

import {ComponentFixture, TestBed} from '@angular/core/testing';

import {GroupsSearchComponent} from './groups-search.component';

describe('GroupsSearchComponent', () => {
    let component: GroupsSearchComponent;
    let fixture: ComponentFixture<GroupsSearchComponent>;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [GroupsSearchComponent]
        })
            .compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(GroupsSearchComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

常量.ts

import {Injectable} from '@angular/core';

@Injectable()
export class Constants {
    
    ... some other constants ...
    
    public static readonly restCallType: any = {
        GET_ALL: "GET_ALL",
        ... other values ...
    }
    
    ... some other constants ...
    
    public static readonly services: any = {
        GET_ALL_GROUPS: {
            code: "GET_ALL_GROUPS",
            type: Constants.restCallType.GET_ALL,
            url: "api/v1/group/findByParams"
        }
    }
    
    ... some other constants ...
    
}

我尝试更换这一行：

type: Constants.restCallType.GET_ALL,

这样：

type: "GET_ALL",

它有效，但我不知道为什么。
有人可以帮助我吗？
谢谢

Answer 1

Constants.services 静态属性取决于已初始化的 Constants.restCallType。但是，Constants.services 正在尝试在初始化之前访问 Constants.restCallType。您可以尝试将服务 getter 设为静态：

    public static get services(): any {
        return {
            GET_ALL_GROUPS: {
                code: "GET_ALL_GROUPS",
                type: Constants.restCallType.GET_ALL,
                url: "api/v1/group/findByParams"
            }
            // ... other services ...
        }
    }