如何测试使用ngx-translate的TranslatePipe的组件？解决TypeError: Cannot read properties of undefined (reading 'subscribe')问题

阿华AIGC实验室

2026-4-30

问题分析

你遇到的错误核心原因是TranslatePipe在执行transform方法时，调用了TranslateService.get()方法，但该方法返回的不是一个可订阅的Observable，而是undefined，导致后续调用.subscribe()时抛出"Cannot read properties of undefined"的错误。

虽然你已经添加了TranslationServiceStub来模拟TranslateService，但你的Stub很可能没有正确实现TranslatePipe依赖的核心方法。

错误信息

TypeError: Cannot read properties of undefined (reading 'subscribe')
    at TranslatePipe.transform (http://localhost:9876/_karma_webpack_/vendor.js:107322:75)
    at ɵɵpipeBind1 (http://localhost:9876/_karma_webpack_/vendor.js:80764:22)
    at MyComponent_Template (ng:///MyComponent.js:406:33)
    at executeTemplate (http://localhost:9876/_karma_webpack_/vendor.js:64582:9)
    at refreshView (http://localhost:9876/_karma_webpack_/vendor.js:64448:13)
    at refreshComponent (http://localhost:9876/_karma_webpack_/vendor.js:65619:13)
    at refreshChildComponents (http://localhost:9876/_karma_webpack_/vendor.js:64245:9)
    at refreshView (http://localhost:9876/_karma_webpack_/vendor.js:64498:13)
    at renderComponentOrTemplate (http://localhost:9876/_karma_webpack_/vendor.js:64562:9)
    at tickRootContext (http://localhost:9876/_karma_webpack_/vendor.js:65793:9)

解决方案

下面是具体的修复步骤：

1. 完善`TranslationServiceStub`的实现

TranslatePipe的transform方法会调用TranslateService.get()，该方法必须返回一个Observable。你的Stub需要正确模拟这个行为：

import { of, Observable } from 'rxjs';

class TranslationServiceStub {
  // 模拟get方法，返回包含翻译内容的Observable
  get(key: string): Observable<string> {
    // 可以根据key返回自定义模拟值，或者直接返回key作为占位符
    return of(`[TRANSLATED] ${key}`);
  }

  // 如果管道用到了currentLang属性，也需要模拟
  currentLang = 'en';
}

2. 优化TestBed配置

不需要手动声明TranslatePipe（它属于@ngx-translate/core库，Angular会自动识别），确保你的Stub能被管道正确获取：

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [MyComponent], // 移除TranslatePipe的声明
    imports: [HttpClientTestingModule, RouterTestingModule],
    providers: [
      { provide: TranslateService, useClass: TranslationServiceStub }
    ],
    // schemas: [NO_ERRORS_SCHEMA] —— 如果不需要忽略未知元素，可以移除
  }).compileComponents();
});