Cypress Component Test Fails with 'Cannot read properties of undefined (reading 'EventService')

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:

1. The error persists even in tests that do not directly utilize EventService.
2. The same test code functions correctly in one test file but fails when copied to another.

Steps Taken:

1. I removed all dependencies from my component / test and it still fails.
2. Attempted to reset the Angular TestBed between tests using TestBed.resetTestingModule().
3. Checked for any shared state or side effects between tests.

Questions:

1. How can I resolve the "Cannot read properties of undefined (reading 'EventService')" error in my Cypress component tests?
2. What steps should I take to ensure that EventService is correctly provided and accessible in the test environment?

Continue reading...