"NullInjectorError: No provider for Storage!" in Karma test

Ionic Framework
1

I am getting the below error on the default unit tests provided for various pages in my Ionic 5/Angular application. All of the pages having issues use an AuthService I created, and only produce errors during unit tests, the application itself works fine.

Failed: R3InjectorError(DynamicTestModule)[AuthService -> Storage -> Storage]: 
	  NullInjectorError: No provider for Storage!
	error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'AuthService', 'Storage', 'Storage' ] })

I was previously getting an error on the AuthService itself, but was able to resolve that error by creating a mock storage object in the AuthService test. Both the service tests and page tests are pretty much out of the box, with a few changes. I have included both the service tests (which is currently passing), and one of the page tests (that is currently resulting in the error provided above). I am still working on understanding dependency injection, but I have tried adding AuthService to the page imports and providers list with no luck, any help would be appreciated, thanks!

auth.service.spec.ts

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

import { AuthService } from './auth.service';
import { Storage } from '@ionic/storage';

describe('AuthService', () => {
  let service: AuthService;

  beforeEach(() => {

    const storageIonicMock: any = {
        get: () => new Promise<any>((resolve, reject) => resolve('Demo Test User')),
        set: () => new Promise<any>((resolve, reject) => resolve('Demo Test User')),
       };

    TestBed.configureTestingModule({
      imports: [],
      providers: [
        {
          provide: Storage,
          useValue: storageIonicMock
        }
      ]
    });
    service = TestBed.inject(AuthService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

home.page.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';

import { HomePage } from './home.page';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomePage ],
      imports: [
        FormsModule,
        IonicModule.forRoot(),
        ReactiveFormsModule,
        RouterTestingModule
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

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

Ionic Info

Ionic:

   Ionic CLI                     : 6.12.1 (/Users/tylerpashigian/.nvm/versions/node/v12.18.4/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.5
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Utility:

   cordova-res (update available: 0.15.2) : 0.15.1
   native-run (update available: 1.2.2)   : 0.3.0

System:

   NodeJS : v12.18.4 (/Users/tylerpashigian/.nvm/versions/node/v12.18.4/bin/node)
   npm    : 6.14.6
   OS     : macOS Big Sur
2

You need to provide local storage to the testing module.

TestBed.configureTestingModule({
      declarations: [ HomePage ],
      imports: [
        FormsModule,
        IonicModule.forRoot(),
        ReactiveFormsModule,
        RouterTestingModule
      ],
providers: [LocalStorage]
3

Where would that be imported from? I don’t see that in @ionic/storage or @ionic/angular (I found an example using @ionic/angular but got an error when I tried importing).

4

try importing
import { Storage } from '@ionic/storage';

5

I have tried doing that and adding Storage to the imports list of the HomePage tests, I couldn’t get that to work. I eventually got a passing test by providing IonicStorageModule.forRoot() in the list of imports for the HomePage tests, I’m not sure that is the “correct” solution, though.

6

Please follow this article - https://sitenol.com/nullinjectorerror-no-provider-for-storage-ionic

The main issue is to import IonicStorageModule in app.module.ts and Storage module in your page componet and module file.