如何使用需要 TranslateService 的辅助方法测试 Angular 中的组件？

Question

我有一个使用 ngx-translate 的自定义验证器

export class CustomValidator {
  static translation: TranslateService;

  static setTranslationService( translation: TranslateService): void {
    CustomValidator.translation = translation;
  }

  static required(messageKey: string = 'COMMON.VALIDATORS.REQUIRED') {
    const message = this.translation.instant(messageKey);
    return (control: AbstractControl): ValidationErrors | null => {
      return control.value ? null : { required: message };
    };
  }
}

我正在 app.component 中设置翻译服务，如下所示：

export class AppComponent implements OnInit, AfterViewInit {
  constructor(private translateService: TranslateService) { }

  ngOnInit() {
    CustomValidator.setTranslationService(this.translateService);
  }
}

它可以工作，但是在测试任何使用 CustomValidator 的组件时，我收到一个错误：

TypeError: Cannot read properties of undefined (reading 'instant')

我已经尝试创建 MockCustomValidator class 并将其添加为提供者

describe('MainLayoutComponent', () => {
  let component: MainLayoutComponent;
  let fixture: ComponentFixture<MainLayoutComponent>;
    
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        TranslateTestingModule.withTranslations({
          en: require('../../../../../assets/i18n/en.json'),
        })
      ], providers: [
        { provide: CustomValidator, useClass: MockCustomValidator }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MainLayoutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

但它仍然会抛出错误。知道我应该如何处理这个问题吗？

Answer 1

好吧，我设法解决了这个问题，不是通过模拟自定义验证器，而是通过使用即时方法模拟 TranslateService 并对我的测试进行以下更改：

describe('MainLayoutComponent', () => {
    let component: MainLayoutComponent;
    let fixture: ComponentFixture<MainLayoutComponent>;
    
    beforeEach(async () => {
      await TestBed.configureTestingModule({
        imports: [
          TranslateTestingModule.withTranslations({
            en: require('../../../../../assets/i18n/en.json'),
          })
        ]
      }).compileComponents();
    });

    beforeEach(() => {
      CustomValidator.setTranslationService(new MockTranslateService());
      fixture = TestBed.createComponent(MainLayoutComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

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

缺点是在 CustomValidator 中，我必须将类型从 TranslateService 更改为 type any，以便能够设置模拟 class 而不是

如何使用需要 TranslateService 的辅助方法测试 Angular 中的组件？

How do I test a component in Angular that with a helper method that requires TranslateService?

unit-testing

typescript

ngx-translate

angular

angular-test