NullInjectorError: No provider for InjectionToken LOCAL_STORAGE in Angular 2

Question

In my project, I am using a LOCAL_STORAGE module from 'angular-webstorage-service'. Its working fine as functionality, But I am getting an error while doing testing. I am using Kharma and Jasmine

I am not getting where I did wrong, Please let me know if anyone comes across this.

Failed: StaticInjectorError(DynamicTestModule)[AppComponent -> InjectionToken LOCAL_STORAGE]: StaticInjectorError(Platform: core)[AppComponent -> InjectionToken LOCAL_STORAGE]: NullInjectorError: No provider for InjectionToken LOCAL_STORAGE!

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { StorageServiceModule} from 'angular-webstorage-service';
//import * as $ from 'jquery';
import * as bootstrap from "bootstrap";


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule,
    StorageServiceModule
  ],
  schemas: [ NO_ERRORS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

import {LOCAL_STORAGE, WebStorageService, StorageServiceModule} from 'angular-webstorage-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {

constructor(@Inject(LOCAL_STORAGE) private storage: WebStorageService) {
}

}

karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    files: [ 
      { pattern: '../node_modules/jquery/dist/jquery.min.js', watched: false }
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

user_7208812 · Answer

You have to mock dependencies for the services that you use in your component

    describe("AppComponent", () => {
      let component: AppComponent;
      let fixture: ComponentFixture< AppComponent >;
      const mockWebStorageService = jasmine.createSpyObj("WebStorageService", ["getSomethingFromStorage"]);
    
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [AppComponent],
          providers: [
            { provide: WebStorageService, useValue: mockWebStorageService }
          ]
        }).compileComponents();
      }));

Then in your test

 it('should call WebStorageService',()=>{
   mockWebStorageService.getSomethingFromStorage.and.returnValue(
  of({ data: 'somevalue'})
);
   expect(someCondition).toBeDefined();
 })

NullInjectorError: No provider for InjectionToken LOCAL_STORAGE in Angular 2

1 Answers