如何用ng-mocks的MockBuilder结合TranslateTestingModule测试Angular组件

你之前的错误在于手动修改MockBuilder.build()返回的模块配置，这会破坏ng-mocks的依赖注入逻辑，导致TranslateService无法被正确提供。以下是正确的实现方案：

正确使用TranslateTestingModule的步骤 #

1. 确保从@ngx-translate/testing正确导入TranslateTestingModule
2. 通过MockBuilder链式调用导入带翻译配置的测试模块，不要事后修改模块结构
3. 保持依赖服务的provide链式调用逻辑

示例代码 #

import { TranslateTestingModule } from '@ngx-translate/testing';

// 定义你的语言标识和对应翻译键值对（遵循真实语言文件结构）
const LANGUAGE = 'en';
const TRANSLATIONS = {
  rejected: 'No!',
  approved: 'OK!'
};

beforeEach(async () => {
  await MockBuilder(MyDialogComponent)
    // 导入带有翻译配置的TranslateTestingModule
    .import(TranslateTestingModule.withTranslations(LANGUAGE, TRANSLATIONS))
    // 提供组件依赖的服务
    .provide(MyDialogService)
    // 按需处理其他依赖：mock无关服务或保留必要模块
    // .mock(UnrelatedDependencyService)
    // .keep(NecessaryModule);

  // 在MockBuilder完成初始化后注入服务
  service = TestBed.inject(MyDialogService);
});

方案有效性说明 #

• MockBuilder的链式调用会正确整合所有模块和依赖，确保TranslateService由TranslateTestingModule正常提供，不会再出现"No Provider"错误
• 你可以完全复用真实项目的语言文件结构，通过TRANSLATIONS对象定义翻译键值对，无需硬编码instant方法的返回值
• 组件内调用translate.instant('rejected')时，会自动返回TRANSLATIONS中对应的翻译文本，完全模拟真实翻译逻辑

额外配置说明 #

如果需要设置默认语言，可以在导入时补充配置：

.import(TranslateTestingModule.withTranslations(LANGUAGE, TRANSLATIONS).withDefaultLang(LANGUAGE))

内容的提问来源于stack exchange，提问作者Constantin Müller