Unit testing Angular component + ngrx store

Question

Trying to testing my angular component.

I've got root state and module state, it looks like:

state {
  auth: {
  // user data
  },
  messagesModule:{
   // here's module state
    messages:[...]
  }
}

Initial messages state is empty object.

component:

export class MessagesComponent {
  public messages$: Observable<number>;

  constructor(private store: Store<any>) {
   this.messagesLengh$ = store.pipe(select('getMessagesLengh'));
  }
...

selector

export const msgLength = (state: AppState) => state.messages.lenght;

test

describe('MessagesComponent', () => {
  let component: MessagesComponent;
  let fixture: ComponentFixture<MessagesComponent>
  let store: Store<fromFeature.State>

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        StoreModule.forRoot({
          ...fromRoot.reducers,
          messagesModule: combineReducers(fromFeature.reducers),
        }),
    // other imports
      ],
      ...
    });

    store = TestBed.get(Store);

    spyOn(store, 'dispatch').and.callThrough();

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

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

So here's the trouble: test fails because "couldn't find messages of undefined". I consoled log my test component, there is store. Any ideas, please.

Answer 1

To test component that injects Store, I followed this official docs.

Doing following and removing combineReducers line worked for me.

   StoreModule.forRoot({
          ...fromRoot.reducers,
        }),