I'm encountering an issue with Cypress v13.6.5 component tests in my Angular 17 application. Tests that previously passed are now failing with the following error:
The following error originated from your test code, not from Cypress.
> Cannot read properties of undefined (reading 'EventService')
...
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
at Module.EventService (
Stack trace:
at Module.EventService (http://localhost:8080/__cypress/src/default-projects_libs_shared_data-access_src_index_ts-node_modules_css-loader_dist_runtime_ap-a65d0c.js:2711:128)
at 99574 (http://localhost:8080/__cypress/src/default-projects_libs_shared_data-access_src_index_ts-node_modules_css-loader_dist_runtime_ap-a65d0c.js:87:78)
at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
at 13530 (http://localhost:8080/__cypress/src/default-projects_libs_shared_data-access_src_index_ts-node_modules_css-loader_dist_runtime_ap-a65d0c.js:29:84)
at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
at 35845 (http://localhost:8080/__cypress/src/default-projects_libs_shared_data-access_src_index_ts-node_modules_css-loader_dist_runtime_ap-a65d0c.js:4829:77)
at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
at 57649 (http://localhost:8080/__cypress/src/default-projects_libs_shared_data-access_src_index_ts-node_modules_css-loader_dist_runtime_ap-a65d0c.js:4390:94)
at __webpack_require__ (http://localhost:8080/__cypress/src/runtime.js:23:42)
at 27430 (http://localhost:8080/__cypress/src/default-projects_libs_shared_data-access_src_index_ts-node_modules_css-loader_dist_runtime_ap-a65d0c.js:4510:94)
Test Setup:
describe(ArrowSnapshotComponent.name, () => {
beforeEach(() => {
TestBed.overrideComponent(ArrowSnapshotComponent, {
add: {
imports: [ArrowSnapshotModule],
providers: [
{ provide: DASHBOARD_TOKEN, useClass: DashboardService },
{ provide: EVENT_SERVICE_TOKEN, useClass: EventService },
],
},
});
});
it('renders', () => {
cy.mount(ArrowSnapshotComponent, {
componentProperties: {
id: 0,
width: 0,
height: 0,
parentId: '',
slot: '',
refresh: 0,
},
});
});
});
Additional Context:
Steps Taken:
I removed all dependencies from my failing component and test and it still fails.
Attempted to reset the Angular TestBed between tests using TestBed.resetTestingModule().
Checked for any shared state or side effects between tests.
I tried defining the provider using useValue as opposed to useClass and it doesn't work. Questions:
How can I resolve the "Cannot read properties of undefined (reading 'EventService')" error in my Cypress component tests?
What steps should I take to ensure that EventService is correctly provided and accessible in the test environment?
The implementation of EventService is super simple:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class EventService {
public cache: Map<string, BehaviorSubject<any>> = new Map<string, BehaviorSubject<any>>();
public get<T>(key: string): BehaviorSubject<T> {
...
}
onDestroy() {
...
}
}
It is imported through an injection token:
@Inject(EVENT_SERVICE_TOKEN) private eventService: EventService,
So I found a fix. I looked at the error cypress was producing in devTools. It gave me the line in the cypress runner that was failing and some context clues. Context clues pointed to my library's index.ts file which was where I was exporting EventService. I moved the export to the top of the file and it fixed it. That is really weird. The position of the export in the file should not have effected it but here we are.