vendredi 15 juin 2018

Encountering NullInjectorError in Angular 5 while testing a component that works with injectors directly to get the value of a variable

I am new to angular and I am testing an Angular component which works with injectors directly to get desired values. Now I am having a hard time as to how to pass those values while testing. I have tried 3 common solutions (details below the code) which I could find on documentation and tutorials but none seem to work.

Here is my component.ts code:

import { Component, OnInit, Injector, Input } from '@angular/core';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
})
export class UserComponent implements OnInit {
  isShared: boolean;

  constructor(private injector: Injector) { 
    this.isShared = this.injector.get('isShared');
  }

  ngOnInit() {}
}

Here is my component.spec.ts code:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserComponent } from './user.component';
import { Injector } from '@angular/core';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ UserComponent ],
      providers: []
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
  });
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Here is the error message I get when I try any of the above-mentioned solutions.

Error: StaticInjectorError(DynamicTestModule)[isShared]: 
  StaticInjectorError(Platform: core)[isShared]: 
    NullInjectorError: No provider for isShared!

Here is the first solution I tried: Creating a MockInjector class and providing it in the TestBed providers array.

class MockInjector extends Injector {
  get(isShared) {
    return isShared=true;
  }
}

I was not able to completely understand how to define the abstract get method but I tried what I could at my end.

      providers: [
        { provide: Injector, useClass: MockInjector }
      ]

Here is the second solution I tried: Creating an isShared variable outside 'describe' and providing it as a value in Testbed configuration.

let isShared = true;
providers: [ { provide: Injector, useValue: isShared } ]

Here is the third solution I tried: Providing isShared value in 'beforeEach' block.

    component.isShared = true;
    fixture.detectChanges();

I used @Input() before the variable declaration in the component file before testing for this solution.

Another solution I think is to make an injector object in 'describe' block and somehow pass it to the constructor but I am not able to pass the object it still shows the same error.

Error Message

I have searched for same error message answers but most of them were related to http.

Aucun commentaire:

Enregistrer un commentaire