Testing in Angular 5 with Karma and ngrx/store

Question

I'm currently working on my first "rl project" for a company (for my diploma thesis) and I started testing our Angular 5 application and I ran into some questions. The auto generated tests which Angular writes for you all failed, and after working on it I came to the point where I thought that I need to import all dependencies from app.module.ts into admin.component.spec.ts for it to work. Now, it kinda worked (it did with other classes) but this just feels wrong. I'm at a point where I don't believe that this you're supposed to write tests like this, and I can't really find any information on the internet about this. That is my first question, but now to my second one: My described method didn't work with ngrx/store. In my app.module.ts I did

import { StoreModule } from '@ngrx/store';

and

@NgModule({
  imports: [
    StoreModule.forRoot({}), 
    ...
  ]
  ...
})

But whatever I do in app.component.spec.ts, tests will always throw

Failed: StaticInjectorError(DynamicTestModule)[LayoutStateStore -> Store]: 
  StaticInjectorError(Platform: core)[LayoutStateStore -> Store]: 
    NullInjectorError: No provider for Store!

I hope you understand my problems and can help me.

score 0 · Answer 1 · edited Feb 20 '19 at 17:40

To touch on your first point

I thought that I need to import all dependencies from app.module.ts into admin.component.spec.ts for it to work

Not really. This usually happens when you have multiple child compoenents/ modules included and if you just care about them as a black-box you can use : schemas: [CUSTOM_ELEMENTS_SCHEMA] and/ or NO_ERRORS_SCHEMA to just test your own component. More information on when you might want to use this can be found here

Regarding your question on Store - It seems you are using a Feature store and you only provide an empty store to the TestBed.

You will need to mock your feature store, something like this:

imports: [StoreModule.forRoot({
          ...reducer, \\ your reducers
          LayoutStateStore: combineReducers(reducer) \\ the actual feature store you are using
        })]

Testing in Angular 5 with Karma and ngrx/store

1 Answers1