I've encountered an issue while trying to run unit tests with Angular 15.2.10 and Karma 6.3.12, even after attempting Karma 6.4.3 without success.
Strangely, the error occurs in a readonly constant rather than a variable.
Interestingly, the code runs perfectly when executed with ng serve
Lets take a look at the complete 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 ...
}
Upon replacing this line:
type: Constants.restCallType.GET_ALL,with this:
type: "GET_ALL",
The issue gets resolved, but the reason remains unclear.
Would appreciate any assistance.
Thank you