如何修复Jest单元测试中的TypeError: Cannot read properties of undefined (reading 'release')

这个错误的核心原因是组件依赖的服务未在测试中正确模拟，导致组件初始化时依赖项为undefined，进而触发RxJS或NgRx内部的调用错误（release通常和RxJS的订阅管理相关）。以下是具体修复步骤：

1. 导入必要的测试依赖 #

需要导入NgRx的测试工具、表单模块，以支持组件的依赖和功能：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ThankYouComponent } from '../../../modules/thank-you/thank-you.component';
// 新增NgRx测试工具
import { provideMockStore } from '@ngrx/store/testing';
// 新增表单模块，适配组件的ReactiveForms使用
import { ReactiveFormsModule } from '@angular/forms';

2. 模拟组件依赖的服务与状态 #

组件依赖Store、MarketingService、FeedbackService，需要为这些依赖创建模拟对象，避免真实服务的初始化逻辑干扰测试：

describe('ThankYouComponent', () => {
    let component: ThankYouComponent;
    let fixture: ComponentFixture<ThankYouComponent>;
    // 创建空模拟服务（组件当前测试未调用服务方法，所以无需定义模拟方法）
    const mockMarketingService = jasmine.createSpyObj('MarketingService', []);
    const mockFeedbackService = jasmine.createSpyObj('FeedbackService', []);

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [ThankYouComponent],
            imports: [ReactiveFormsModule],
            providers: [
                // 模拟NgRx Store，可按需添加初始状态避免select返回undefined
                provideMockStore({
                    initialState: {}
                }),
                // 注入模拟服务替代真实实现
                { provide: MarketingService, useValue: mockMarketingService },
                { provide: FeedbackService, useValue: mockFeedbackService }
            ]
        }).compileComponents();

        fixture = TestBed.createComponent(ThankYouComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

3. 额外处理全局依赖（可选） #

如果测试仍有报错，可补充以下模拟：

• 模拟environment变量：组件用到environment.HOME_PAGE，在测试文件顶部添加：

  jest.mock('src/environments/environment', () => ({
      HOME_PAGE: 'https://example.com'
  }));
  

• 模拟window.history：组件调用了history.pushState，在测试的beforeEach中添加：

  beforeEach(() => {
      window.history.pushState = jest.fn();
  });
  

错误原因详解 #

你的测试代码仅声明了组件，但未提供组件构造函数中注入的Store、MarketingService、FeedbackService。TestBed会尝试创建这些服务的真实实例，而真实服务依赖未配置的其他模块，导致服务初始化失败为undefined。当组件调用store.dispatch等方法时，会触发深层的Cannot read properties of undefined错误，错误栈指向非当前文件是因为错误发生在RxJS或NgRx的内部代码中。

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