Question

我遇到有关主题错误的问题。我正在使用angular 7版本。我的测试是：landing.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LandingComponent } from './landing.component';
import { PegasPanelComponent } from '../pegas-panel/pegas-panel.component';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateServiceStub } from 'src/app/app-tests.spec';
import { RouterModule } from '@angular/router';


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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LandingComponent, PegasPanelComponent, ],
      imports: [RouterModule, TranslateModule],
      providers: [{
        provide: TranslateService,
        useClass: TranslateServiceStub
      }]
    }).compileComponents();
  }));

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

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

landing.component.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss']
})
export class LandingComponent implements OnInit {
  constructor(private translateService: TranslateService) { translateService.setDefaultLang('en'); }

  public ngOnInit() { }
}

app-tests.spes.ts：

import { Observable, of } from 'rxjs';
import { EventEmitter } from '@angular/core';

export class TranslateServiceStub{

    public get(key: any): any {
        return of(key);
    }

  public setDefaultLang() {
    return of('en');
  }

    public onLangChange: EventEmitter<any> = new EventEmitter();
    public onTranslationChange: EventEmitter<any> = new EventEmitter(); 
    public onDefaultLangChange: EventEmitter<any> = new EventEmitter();
}

错误：

HeadlessChrome 0.0.0 (Windows 10 0.0.0) LandingComponent should create FAILED
        Failed: Unexpected value '[object Object]' imported by the module 'DynamicTestModule'
        Error: Unexpected value '[object Object]' imported by the module 'DynamicTestModule'

我不知道如何解决它。尝试添加路由并将translateModule从声明移动到导入（我找到了两个答案），但这无济于事。

Answer 1

您的翻译模块存根的导入路径是绝对路径，而不是相对路径，因此我会尝试更改它，具体取决于您的构建选项，这可能会导致问题。

另外，导入routes似乎是错误的-通常您会将这些作为参数提供给路由模块，但是对于单元测试文件，您可能只需忽略它们

路由器测试模块应像RouterTestingModule.withRoutes([])一样导入-参见https://angular.io/api/router/testing/RouterTestingModule

Answer 2

imports: [RoutingModule, routes]是您问题的出处。假设routes是可能的路由的Object（Array），如下所示：

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

（摘自https://angular.io/guide/router）

此对象并非要作为导入传递，而是应根据您的设置与RouterModule.forRoot(routes)或RouterModule.forChild(routes)一起使用。

我认为对于您的单元测试，您只需将routes和RouterTestingModule留在外面，然后看看能做什么。单元测试应该对所有路由都不太感兴趣，除非组件专门负责路由并且您要对其进行测试。

如果是这种情况，则会抛出错误，提示诸如“找不到提供者”之类的内容。

Answer 3

如果我将TranslateModule.forRoot（）从声明移至导入，则RouterRouteule出现错误。我很快修复了它，但是遇到了另一个阻塞错误（由于将TranslateModule.forRoot（）移到了声明而导致的错误）： TypeError：translateService.setDefaultLang不是函数-我使用的是最新版本的angula和翻译器。

示例新代码：landing.component.spec.ts

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

import { LandingComponent } from './landing.component';
import { PegasPanelComponent } from '../pegas-panel/pegas-panel.component';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateServiceStub } from 'src/app/app-tests.spec';
import { RouterModule } from '@angular/router';


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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LandingComponent, PegasPanelComponent, ],
      imports: [TranslateModule.forRoot(), RouterModule],
      providers: [{
        provide: TranslateService,
        useClass: TranslateServiceStub
      }]
    }).compileComponents();
  }));

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

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

模块'DynamicTestModule'

3 个答案: