Жасминовые тесты в Angular 9 - ошибки внедрения зависимостей - PullRequest
Новая
       18

Жасминовые тесты в Angular 9 - ошибки внедрения зависимостей

1 голос
/ 26 февраля 2020

Я недавно решил обновить свой проект ioni c с 4 до 5 и решил, что пока я на нем, я обновлю с Angular 8 до 9.

Все прошло хорошо, и приложение работает, как ожидалось, пока я не попытался запустить свои юнит-тесты. Я засыпан этой ошибкой, и я не могу понять, почему. Я подозреваю, что это имеет отношение к маршрутизатору, но я даже не могу подтвердить это. 

Error: This constructor was not compatible with Dependency Injection.
Error: This constructor was not compatible with Dependency Injection.
    at Module.ɵɵinvalidFactory (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:14150:1)
    at Object.Router_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm5/router.js:4404:67)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11425:1)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11247:1)
    at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:787:1)
    at Module.ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:792:1)
    at Function.NavController_Factory [as ɵfac] (http://localhost:9876/_karma_webpack_/node_modules/@ionic/angular/__ivy_ngcc__/fesm5/ionic-angular.js:798:205)
    at Object.factory (http://localhost:9876/_karma_webpack_/node_modules/@ionic/angular/__ivy_ngcc__/fesm5/ionic-angular.js:799:96)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11425:1)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.

Любые идеи или кто-нибудь еще сталкивался с этим?

РЕДАКТИРОВАТЬ

Вот как выглядит один из неудачных тестов 

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

import { ZoneInstructionsComponent } from './zone-instructions.component';
import { LocationStrategy, Location, PathLocationStrategy, APP_BASE_HREF } from '@angular/common';
import { UrlSerializer, Router, RouterModule } from '@angular/router';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ZoneInstructionsComponent ],
      imports: [ IonicModule.forRoot() ],
      providers: [
        Location,
        { provide: LocationStrategy, useClass: PathLocationStrategy },
        { provide: APP_BASE_HREF, useValue: '/page' },
        UrlSerializer,
        { provide: Router, userClass: RouterModule },
      ]
    })
    .compileComponents();
  }));

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

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

Довольно основы c, даже не проверяя ничего

РЕДАКТИРОВАТЬ 2

Вот код компонента, нечего делать 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'stm-zone-instructions',
  templateUrl: './zone-instructions.component.html',
  styleUrls: [
    '../installation-wizard.page.scss',
    './zone-instructions.component.scss'
  ]
})
export class ZoneInstructionsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

1 Ответ

1 голос
/ 26 февраля 2020

ну, это было просто глупо с моей стороны ... во многих местах я использовал 

{ provide: Router, userClass: RouterModule },

и, очевидно, Angular 9 говорит "нет" на это. Обновление моих спецификаций для использования RouterTestingModule и все хорошо сейчас. Удивило, что понадобилось так много времени, чтобы поймать это. Я хотел бы знать, почему именно мне еще предстоит многому научиться с помощью тестов на жасмин. 

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

import { ZoneInstructionsComponent } from './zone-instructions.component';
import { LocationStrategy, Location, PathLocationStrategy, APP_BASE_HREF } from '@angular/common';
import { RouterTestingModule } from '@angular/router/testing';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ZoneInstructionsComponent ],
      imports: [ RouterTestingModule.withRoutes([]), IonicModule.forRoot() ],
      providers: [
        Location,
        { provide: LocationStrategy, useClass: PathLocationStrategy },
        { provide: APP_BASE_HREF, useValue: '/page' }
      ]
    })
    .compileComponents();
  }));

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

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