时间戳

首页 > 解决方案 > 无法使用翻译构建测试模块

angular - 无法使用翻译构建测试模块

问题描述

我正在尝试测试一个使用来自 ngx-translate 的翻译管道并且无法构建测试模块的组件。

组件.html

<div class="container">
    <div class="row">
      <div class="col-12 my-4">
        <h1>
          {{'private.title' | translate }}
        </h1>
      </div>
    </div>
</div>

组件.ts

....

  constructor(
    public itemsService: ItemsService,
    private sortPipe: OrderByPropertyNamePipe,
    private cdr: ChangeDetectorRef,
    private modalService: ModalService
  ) { }

....

因此，除了 HTML 文件中的翻译管道，您看不到任何关于 ngx-translate 的内容。

组件.spec.ts 文件

describe('Component', () => {
  describe('Default', () => {
    let component: Component;
    let fixture: ComponentFixture<Component>;
    let debugElement: DebugElement;
    beforeEach(
      waitForAsync(() => {
        TestBed.configureTestingModule({
          imports: [
            HttpClientTestingModule,  
            TranslateModule.forRoot(),
          ],
          providers: [
            ItemsService,
            OrderByPropertyNamePipe,
          ],
        })
        .overrideComponent(Component, {
          set: { changeDetection: ChangeDetectionStrategy.Default }
        })
        .compileComponents();
      }),
    );
    beforeEach(() => {
      fixture = TestBed.createComponent(Component);
      component = fixture.componentInstance;
      debugElement = fixture.debugElement;
      component.allItems = MOCK_ITEMS;

      fixture.detectChanges();
    });

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

投掷

NG0302：找不到管道“翻译”！

我尝试将模拟管道创建为https://stackoverflow.com/a/57604396/8889351但也不起作用

有人知道如何正确构建测试模块吗？

提前致谢

标签： angularjestjsngx-translate

解决方案

将 translateService 添加到您的提供程序中

首先导入您的规范文件

import { TranslateModule, TranslateService } from '@ngx-translate/core';

并在此处添加

   imports: [
        HttpClientTestingModule,  
        TranslateModule.forRoot(),
   ],
   providers: [
        TranslateService,
        ItemsService,
        OrderByPropertyNamePipe
   ],

这就是我在项目中测试的方式

推荐阅读