Angular项目Jest测试TranslatePipe报错：无法读取subscribe属性

问题根源 #

TranslatePipe执行transform方法时会订阅TranslateService的onLangChange Observable，你的mock中onLangChange直接用of()创建的冷Observable，在组件初始化订阅时可能已完成，导致内部触发Cannot read properties of undefined (reading 'subscribe')错误；同时导入真实的TranslateModule.forRoot()会覆盖你提供的mock服务，导致mock失效。

修正方案 #

1. 修正TranslateService的onLangChange模拟 #

将onLangChange改为BehaviorSubject（确保订阅时能获取初始值，符合真实TranslateService的行为）：

import { BehaviorSubject, of } from 'rxjs';

export const translateServiceMock = {
  addLangs: jest.fn(),
  setDefaultLang: jest.fn(),
  use: jest.fn().mockReturnValue(of('da')),
  getLangs: jest.fn().mockReturnValue(['da', 'en']),
  get: jest.fn().mockReturnValue(of('translated text')),
  instant: jest.fn((key: string) => key),
  // 改用BehaviorSubject提供持续可订阅的语言变更流
  onLangChange: new BehaviorSubject({ lang: 'en' }),
};

2. 移除测试模块中的TranslateModule.forRoot() #

真实的TranslateModule.forRoot()会初始化真实的TranslateService，覆盖你的mock配置，测试模块中需删除该导入。

3. 正确处理TranslatePipe #

组件模板中使用translate管道时，二选一配置：

• 方案A：声明真实TranslatePipe
  在测试模块的declarations中添加TranslatePipe，结合mock的TranslateService使用：

  import { TranslatePipe } from '@ngx-translate/core';
  
  TestBed.configureTestingModule({
    declarations: [NavigationMainComponent, TranslatePipe],
    providers: [{ provide: TranslateService, useValue: translateServiceMock }],
  });
  

• 方案B：使用Mock管道
  自定义Mock管道替代真实TranslatePipe，避免依赖内部逻辑：

  import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({ name: 'translate' })
  class MockTranslatePipe implements PipeTransform {
    transform(value: string): string {
      return value; // 直接返回key作为模拟翻译结果
    }
  }
  
  // 测试模块配置
  TestBed.configureTestingModule({
    declarations: [NavigationMainComponent, MockTranslatePipe],
    providers: [{ provide: TranslateService, useValue: translateServiceMock }],
  });
  

验证 #

完成上述修改后，重新运行Jest测试，NavigationMainComponent › should create用例应能正常执行。

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