Unit Testing : No provider for "InterceptableStoreFactory" even if added to "providers"

Question

I'm working on unit tests within my Angular app , i'm using TestBed approach ,

I'm testing components , so each spec file looks like this

import...
describe('AppComponent', () => {
// Importing dependecies
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports : [RouterTestingModule , HttpModule , FormsModule ],
            declarations: [AppComponent
            ],
            providers: [AUTH_PROVIDERS ,UserService, SharedclientService, RouteNavigator, JwtHelper, ReloadTokenService, ShopService
                , EnvVarsService, ProfileService, LocalStorageService, ApiVersionInterceptor, ApiTrackingInterceptor, MonitoringService ,
                { provide: 'LOCAL_STORAGE_SERVICE_CONFIG', useValue: userConfig } , TokenUtilService , HttpInterceptorService ,
                { provide: InterceptableStoreFactory, useClass: InterceptableStoreFactoryMock },ReloadTokenEventService , InterceptableStoreFactory

            ]

        }).compileComponents();
    }));
    // detecting changes every times
    beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    // Test case 0 (compilation of the component)
    it('AppComponent is well defined', () => {
        expect(component).toBeDefined();
    });

    // Test case 1
    it('test', () => {
        expect("1").toBe("1");
    });
});

This approach of testing , is causing the failure of the whole test suite , if the dependencies importing isn't well.

For example : in this test suite , it throws this error :

No provider for InterceptableStoreFactory! It seems to be strange , as i'm importing this service in my providers (last one)

This causes almost the failure of all test cases assince the verification of the fixture imports is "beforeEach" test cases

Am looking for better ideas for :

1. the problem of "no provider for service" (which is already added to providers"

and for

2. unit testBed better way of testing

Answer 1

You provide InterceptableStoreFactory twice. Once with a mock replacement, and once the original. Try removing one of them.

It may help you to create a module for all your services and put it in the 'core' folder. (See Angular Style Guide)

This makes it easier to provide all the right services both in test and development/production without repeating yourself so much.