测试 - 没有TranslateService的提供程序。

Question

我正在使用ng test命令运行一些测试，但是我收到了以下错误消息：

NullInjectorError: R3InjectorError(DynamicTestModule)[TranslateService -> TranslateService]: 
  NullInjectorError: No provider for TranslateService!

测试内容为：

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { TranslateTestingModule } from 'ngx-translate-testing';
import { CoreModule } from './core.module';

const ENGLISH_LANGUAGE = 'en';

describe('AppComponent', () => {

  let fixture: ComponentFixture<AppComponent>;
  let appComponent: AppComponent;

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    appComponent = fixture.componentInstance;
  });

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        CoreModule,
        TranslateTestingModule
          .withTranslations(ENGLISH_LANGUAGE, require('assets/i18n/en.json'))
          .withDefaultLanguage(ENGLISH_LANGUAGE)
      ],
    }).compileComponents();
  });

  it('should create the app', async(() => {
    expect(appComponent).toBeTruthy();
  }));

  it('should have as title', async(() => {
    appComponent.ngOnInit();
    fixture.whenStable().then(() => {
      expect(appComponent.testTitle).toEqual('app');
    })
  }));

});

组件是：

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

  testTitle?: string;

  constructor(
    private translateService: TranslateService,
    private screenDeviceService: ScreenDeviceService
  ) {}

  public ngOnInit() {
    const subscription: Subscription = this.translateService.get('app.title').subscribe((text: string) => {
      this.afterLanguageResourcesLoaded();
      subscription.unsubscribe();
    });
  }

  private afterLanguageResourcesLoaded(): void {
    this.setAppMetaData();
  }

  private setAppMetaData(): void {
    this.screenDeviceService.setMetaData({
      title: this.translateService.instant('app.title'),
      description: this.translateService.instant('app.description')
    });
    this.testTitle = this.translateService.instant('app.title');
  }

}

我也尝试导入BrowserModule模块：

imports: [
  BrowserAnimationsModule,

我尝试添加了一个TranslateService提供者：

providers: [
  TranslateService
]

我最终尝试在组件构造函数中设置两个成员变量，用于注入这两个服务：

let translateService: TranslateService;
let screenDeviceService: ScreenDeviceService;

并提供给他们：

providers: [
  TranslateService,
  ScreenDeviceService
]

获取它们：

translateService = TestBed.get(TranslateService);
screenDeviceService = TestBed.get(ScreenDeviceService);

但是没有什么帮助。 我使用的是 Angular 9.0.4 版本。 更新：最终我使用了真正的翻译服务，而不是模拟的服务，并且不得不终止测试运行程序并重新输入 ng test 命令，以便我的源代码得到考虑。

- Stephane

Answer 1

在你的测试 spec.ts 文件中，你可以添加这种类型的引入，使用 forRoot()：

TranslateModule.forRoot()

一个例子：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        TranslateModule.forRoot(),
        HttpClientTestingModule
      ],
      declarations: [ HomeComponent ],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    .compileComponents();
  }));

这是因为您还没有测试TranslateModule。

这个解决方案对我有效。

- aepifano

---

我尝试了你的解决方案，但错误没有改变。顺便说一下，TranslateModule需要被模拟：https://dev.to/lados/how-to-fix-ngx-translate-error-when-running-tests-5ado - Stephane

不必进行模拟，您可以在测试中提供“TranslateService”。 - user13258211

好的，我已经移除了模拟服务并使用了应用程序中的服务。但是错误仍然存在。感觉像是 TranslateService 没有在 Angular 上下文中创建，因此无法被注入或者被找到。 - Stephane

Answer 2

确保你正在添加

{ Provide: TranslationService, useValue: translateServiceStub } 

在提供者中

- Nour Said

---

有一天，当我有时间的时候，我会试试看。 - Stephane

Answer 3

我认为这样做会是更好的方法：

beforeEach(async(() => {
 TestBed.configureTestingModule({
  imports: [
    RouterTestingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: TranslateFakeLoader
      }
    }),
    HttpClientTestingModule
  ],
  declarations: [ HomeComponent ],
  schemas: [ NO_ERRORS_SCHEMA ]
})
.compileComponents();
}));

- hpfs

---

最好说明你代码块中的哪些行是解决方案，以及一些书面解释。你看，我大约3年前遇到了这个问题，而我的脑缓存已经被清除了。 - Stephane

Answer 4

在你的测试文件中：

1. 添加一个导入： import { TranslateService } from '@ngx-translate/core';
2. 将 TranslateService 添加到 TestBed 配置的提供者中： providers: [ TranslateService ]

- mikostan