Angular17+Cypress13组件测试报错：EventService读取未定义属性

报错信息 #

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 (

堆栈跟踪 #

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)

测试代码 #

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

额外上下文 #

• 未直接使用EventService的测试也会触发该错误
• 相同测试代码在一个文件中正常运行，复制到另一个文件则失败

已尝试的解决步骤 #

• 移除组件和测试的所有依赖，错误仍存在
• 尝试用TestBed.resetTestingModule()重置测试环境
• 检查测试间的共享状态与副作用
• 尝试用useValue定义提供者，未解决问题

诉求 #

1. 如何解决该报错？
2. 如何确保EventService在测试环境中正确提供并可访问？

EventService实现 #

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() {
        // 实现代码
    }
}

注入方式 #

@Inject(EVENT_SERVICE_TOKEN) private eventService: EventService,

解决方案 #

1. 修复Cypress与TestBed的API冲突 #

Cypress的cy.mount已内置Angular测试模块配置能力，无需单独调用TestBed.overrideComponent，两者混用会导致依赖注入逻辑混乱。修改测试代码如下：

describe(ArrowSnapshotComponent.name, () => {
  it('renders', () => {
    cy.mount(ArrowSnapshotComponent, {
      imports: [ArrowSnapshotModule],
      providers: [
        { provide: DASHBOARD_TOKEN, useClass: DashboardService },
        { provide: EVENT_SERVICE_TOKEN, useClass: EventService },
      ],
      componentProperties: {
        id: 0,
        width: 0,
        height: 0,
        parentId: '',
        slot: '',
        refresh: 0,
      },
    });
  });
});

2. 排查模块打包解析问题 #

错误路径包含css-loader，说明Webpack打包时EventService模块解析异常：

• 检查测试文件中EventService和EVENT_SERVICE_TOKEN的导入路径，确保拼写正确、路径无误
• 确认EVENT_SERVICE_TOKEN的导出方式（如是否用InjectionToken正确定义）

3. 处理Root注入服务的测试隔离 #

EventService是providedIn: 'root'的全局服务，测试间可能存在状态污染：

• 在每个测试前重置服务状态或替换为全新实例：

beforeEach(() => {
  // 重置现有服务状态
  const eventService = TestBed.inject(EventService);
  eventService.cache.clear();

  // 或直接替换为新实例
  TestBed.overrideProvider(EVENT_SERVICE_TOKEN, { useValue: new EventService() });
});

4. 检查测试文件的命名与配置 #

相同代码在不同文件表现不同，可能是文件规则导致：

• 确保测试文件后缀为.cy.ts（Cypress组件测试标准后缀）
• 检查测试文件所在目录的tsconfig配置，确认模块解析规则一致

确保EventService正确提供的规范 #

• 统一使用cy.mount的providers配置注入依赖，避免混合TestBed与Cypress API
• 对Root级服务，优先用useValue提供全新实例，避免跨测试状态共享
• 测试中可验证注入是否成功：

it('verifies EventService injection', () => {
  cy.mount(ArrowSnapshotComponent, { /* 配置项 */ })
    .then(({ component }) => {
      expect(component.eventService).toBeDefined();
    });
});

内容的提问来源于stack exchange，提问作者afriedman111