使用Angular 7進行Karma和Jasmine注入服務測試-StaticInjectorError（DynamicTestModule）[I18n-> InjectionToken TranslationsFormat]

Question

這不是對ngx-translate的欺騙-沒有InjectionToken DocumentToken的提供者

....或angular5 ng測試-來自自定義服務的StaticInjectorError

...這是一個稍微不同的問題，對我沒有幫助-https: //github.com/ngx-translate/i18n-polyfill/issues/4

---

使用Jasmine和Karma運行ngtest時出現以下錯誤：

Error: StaticInjectorError(DynamicTestModule)[I18n -> InjectionToken TranslationsFormat]: 
  StaticInjectorError(Platform: core)[I18n -> InjectionToken TranslationsFormat]: 
    NullInjectorError: No provider for InjectionToken TranslationsFormat!

我的應用程序中有一個測試，用於測試主數據服務的創建：

data.service.spec.ts

import { TestBed, inject } from '@angular/core/testing';

import { DataService } from './data.service';
import { I18n } from '@ngx-translate/i18n-polyfill';

describe('DataService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [DataService, I18n]
    });
  });

  it('should be created', inject([DataService], (service: DataService) => {
    expect(service).toBeTruthy();
  }));
});

data.service.ts

import { Injectable } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';


@Injectable({
  providedIn: 'root'
})
export class DataService {

  SOME_CONSTANT = this.i18n('Translate this text');

  constructor(private i18n: I18n, private authService: AuthService) {

    ...
  }

  public serviceMethod() {
    return ...
  }

}

app.module.ts

declare var require: any;

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID, TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { I18n } from '@ngx-translate/i18n-polyfill'; // polyfill to support i18n for text in .ts files (until supported by Angular)
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LocaleService} from './services/locale.service';
import { SharedModule } from './shared/shared.module';
import { CoreModule } from './core/core.module';

defineLocale('engb', enGbLocale);
defineLocale('de', deLocale);
defineLocale('es', esLocale);
defineLocale('fr', frLocale);
defineLocale('zhcn', zhCnLocale);
defineLocale('ru', ruLocale);

/*
export function localeFactory(): string {
  return LocaleDatePipe.localeId;
}
*/

export function selectedLocaleFactory(): string {
  const localeService = new LocaleService();
  return localeService.getCurrentLanguage();
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    CoreModule,
    SharedModule,
    AppRoutingModule
  ],
  providers:
  [
    BsLocaleService,
    I18n,
    {
      provide: TRANSLATIONS,
      useFactory: (locale) => {
        locale = locale || 'en'; // default to english if no locale provided
        return require(`raw-loader!../locale/messages.${locale}.xlf`);
      },
      deps: [LOCALE_ID]
    },
    {
      provide: TRANSLATIONS_FORMAT,
      useValue: 'xlf'
    },
    {
      provide: LOCALE_ID,
      useFactory: selectedLocaleFactory
    }
  ],
  bootstrap: [AppComponent],
  entryComponents: [ConfirmationComponent]
})

export class AppModule { }

app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from './services/data.service';

import { BsLocaleService } from 'ngx-bootstrap/datepicker';
import { LocaleService } from './services/locale.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  constructor(private dataService: DataService,
    private localeService: LocaleService,
    private bsLocaleService: BsLocaleService) { }

  ngOnInit() {

     ... nothing relevant
  }
}

UPDATE

如果我更改data.service.ts以添加TRANSLATIONS_FORMAT導入，如下所示， data.service.ts收到其他錯誤：

Error: Invalid provider for the NgModule 'DynamicTestModule' - only instances of Provider and Type are allowed, got: [DataService, AuthService, I18n, ?InjectionToken TranslationsFormat?, ...]

---

import { TestBed, inject } from '@angular/core/testing';

import { DataService } from './data.service';
import { AuthService } from './auth.service';
import { I18n } from '@ngx-translate/i18n-polyfill';
import { TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';

describe('DataService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [DataService, AuthService, I18n, TRANSLATIONS_FORMAT]
    });
  });

  it('should be created', inject([DataService, AuthService, I18n, TRANSLATIONS_FORMAT], (service: DataService) => {
    expect(service).toBeTruthy();
  }));
});

Answer 1

在spec文件中嘗試{provide: TRANSLATIONS_FORMAT, useValue: 'xlf' } ，如下所示：

 TestBed.configureTestingModule({
    providers: [DataService, AuthService, I18n, 
      {provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }]
  });

Answer 2

有關OP的答案，請參見@ShashankVivek的答案。 如果您收到與TRANSLATIONS相關的后續錯誤，則需要以下步驟：

describe('DataService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [DataService, AuthService, I18n, 
        {provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
        {provide: TRANSLATIONS, useValue: 'xlf' }
      ]
    });
  });