Angular 15 unit test - Cannot read properties of readonly constant, why?

Question

I can't run unit tests with Angular 15.2.10 and Karma 6.3.12, I have also tried Karma 6.4.3 but has the same problem.
The odd thing is that it gives me error in a readonly constant not in a variable.
Obviously, the code is working perfectly if run with ng serve

This is the full stack trace:

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

constants.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 ...
    
}

I tried to replace this line:

type: Constants.restCallType.GET_ALL,

with this:

type: "GET_ALL",

And it works, but I don't know why.
Can anyone help me?
Thanks

Answer 1

The Constants.services static property depends on the Constants.restCallType being already initialized. However, Constants.services is trying to access Constants.restCallType before it's initialized. You can try making static the services 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 ...
        }
    }