运行 Jasmine/Karma 测试时，ngx-translate 无法解析翻译答案

【问题标题】：ngx-translate fails to resolve translations when running Jasmine/Karma tests运行 Jasmine/Karma 测试时，ngx-translate 无法解析翻译
【发布时间】：2021-04-27 02:01:37
【问题描述】：

我有一个简单的 Angular 组件，其中包含可翻译的文本内容，我想对其进行测试。不幸的是，在运行我的 Jasmine/Karma 测试时，我的组件的文本内容总是空的。

但是，在运行应用程序本身时会显示翻译后的文本，我什至可以在单独的 Jasmine 测试中直接从 TranslateService 接收翻译。

如何解决在 Jasmine/Karma 的 HTML 模板中显示翻译文本的问题？

我的组件“foo.component.ts”：

@Component({selector: 'app-foo', template: `<p>{{ 'hello' | translate }}</p>`})
export class FooComponent {
}

我的翻译文件“assets/i18n/en.json”：

{
  "hello": "Hello World!"
}

我的测试“foo.component.spec.ts”：

const createTranslateHttpLoader = (http: HttpClient) => new TranslateHttpLoader(http);

describe('FooComponent', () => {
  let component: FooComponent;
  let fixture: ComponentFixture<FooComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FooComponent],
      imports: [
        HttpClientModule,
        TranslateModule.forRoot({
          loader: {provide: TranslateLoader, useFactory: createTranslateHttpLoader, deps: [HttpClient]},
          defaultLanguage: 'en'
        })
      ]
    })
    .compileComponents();
  });

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

  it('should display greeting', () => { // <= fails
    expect(fixture.nativeElement.textContent).toBe('Hello World!');
  });

  it('has greeting translation', async () => { // <= works
    const translation = await TestBed.inject(TranslateService).get('hello').toPromise();
    expect(translation).toBe('Hello World!');
  });
});

我正在使用 Angular 11.0.1 和 ngx-translate 13.0.0。

【问题讨论】：

Martin，你能看看我为其中一个答案编写了一个单元测试的方式吗？ stackoverflow.com/questions/57112046/… 。让我知道这是否对您有帮助
嗨 Shashank Vivek，我现在使用 npmjs.com/package/ngx-translate-testing 作为测试依赖项，这与您的答案中的代码示例大致相同。似乎模拟翻译加载是最好的解决方案。
好的，如果你卡在某个地方，请告诉我（使用代码 sn-p）

标签： angular jasmine karma-jasmine karma-runner ngx-translate

【解决方案1】：

在我看来，可能没有必要针对实际的 i18n 文件进行测试。验证我们使用的是正确的翻译密钥（在您的情况下为 'hello'）就足够了。

我们可以从创建假的TranslateLoader 开始，如下所示：

class FakeTranslateLoader extends TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    return of({
      "hello": "Hello World!"
    });
  }
}

然后，将其导入foo.component.spec.ts：

beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FooComponent],
      imports: [
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader, useClass: FakeTranslateLoader
          }
        })
      ]
    })
    .compileComponents();
  });

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

  it('should display greeting', () => {
    expect(fixture.nativeElement.textContent).toBe('Hello World!');
  });

【讨论】：