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

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

1 post - 1 participant

Read full topic