R3InjectorError(DynamicTestModule)[Store -> Store]: NullInjectorError: No provider for Store

Question

app.component.ts

...
constructor(private store: Store<fromAppState.AppState>) {}
  ngOnInit() {
    this.store.dispatch(new fromAppActions.Load());
...

app.state.ts

export interface AppState {
  structure: Structure;
  buttons: number[];
  bars: Bar[];
  limit: number;
  isLoading: boolean;
  error: string;
}
export const initialState: AppState = {
  buttons: [],
  structure: null,
  bars: [],
  limit: 0,
  isLoading: false,
  error: '',
};
const getState = createFeatureSelector<AppState>('myApp');
...

app.component.spec.ts

describe('AppComponent', () => {
  const storeMock = jasmine.createSpyObj('Store', ['select']);
  let fixture: ComponentFixture<AppComponent>;
  
  beforeEach(async(() => {
    fixture = TestBed.createComponent(AppComponent);
    storeMock.select.and.returnValue(
      of({
        structure: structure,
        buttons: [45, 23, -8, -12],
        bars: [15, 34, 7, 87],
        limit: 150,
        isLoading: false,
        error: '',
      })
    );
    component = fixture.componentInstance;
   
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        MaterialModule,
        StoreModule.forRoot({}, {}),
      ],
      declarations: [AppComponent, FakeLoaderComponent],
      providers: [{ provide: Store, useValue: storeMock }],
    }).compileComponents();
...
}));
  it(`should have as title 'title'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('title');
  });
}

app.module.ts

@NgModule({
  declarations: [AppComponent, LoaderComponent],
    
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    HttpClientModule,
    StoreModule.forRoot({}, {}),
    EffectsModule.forRoot([AppEffects]),
    StoreModule.forFeature('myApp', AppReducer),
    StoreDevtoolsModule.instrument({
      name: 'My DevTools',
      maxAge: 50,
      logOnly: environment.production,
    }),
  ],
  providers: [AppService],
  bootstrap: [AppComponent],
})
export class AppModule {}

When I run ng test I get this error:

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

Do I need to import the reducer to the spec file as well?

Answer 1

Create the component after the testbed is configured.

    storeMock.select.and.returnValue(
      of({
        structure: structure,
        buttons: [45, 23, -8, -12],
        bars: [15, 34, 7, 87],
        limit: 150,
        isLoading: false,
        error: '',
      })
    );


    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        MaterialModule,
        StoreModule.forRoot({}, {}),
      ],
      declarations: [AppComponent, FakeLoaderComponent],
      providers: [{ provide: Store, useValue: storeMock }],
    }).compileComponents();

// AFTER configuration


  fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;