Import the StoreModule.forRoot in the TestBed configuration when testing components or services that inject store.
Reducing state is synchronous, so mocking out the store isn’t required.
You can refer the example here:
https://github.com/KtreeOpenSource/AngularExamples/tree/master/ngrxDemo
Step:1
Getting data from the store
.src/app/components/user-component/user-component.component.tsimport { Component, OnInit } from ‘@angular/core’;
import { Store } from ‘@ngrx/store’;
import * as fromStore from ‘../../store/reducers/index’;
@Component({
selector: ‘app-user-component’,
templateUrl: ‘./user-component.component.html’,
styleUrls: [‘./user-component.component.css’]
})
export class UserComponentComponent implements OnInit {
public users = [];
constructor(public store: Store<fromStore.State>) { }
ngOnInit() {
this.store.select(‘user’).subscribe(res => {
this.users = res.users;
});
}
getUsersFromSelectors() {
this.store.select(fromStore.getUserName).subscribe(res => {
console.log(res);
});
}
}
Step:2
Importing the StoreModule.forRoot in TestBed configuration
.src/app/components/user-component/user-component.component.spec.ts
import { StoreModule, Store } from ‘@ngrx/store’;
import * as fromRoot from ‘../../store/reducers/index’;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [UserComponentComponent],
imports: [
HttpClientModule,
StoreModule.forRoot({
…fromRoot.reducers
})
],
})
.compileComponents();
}));
Step:3
Create store in the spec file
.src/app/components/user-component/user-component.component.spec.ts
describe(‘UserComponentComponent’, () => {
let component: UserComponentComponent;
let fixture: ComponentFixture<UserComponentComponent>;
let store: Store<fromRoot.State>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [UserComponentComponent],
imports: [
HttpClientModule,
StoreModule.forRoot({
…fromRoot.reducers
})
],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserComponentComponent);
component = fixture.componentInstance;
store = TestBed.get(Store);
fixture.detectChanges();
});
it(‘should create’, () => {
expect(component).toBeTruthy();
});
});
Step:4
Testing the data exists in the store or not by dispatching the data to the store
.src/app/components/user-component/user-component.component.spec.ts
it(‘should check users exists or not in init’, () => {
const users = [{
‘id’: 1,
‘userName’: ‘test1′,
’email’: ‘test1@gmail.com’
}, {
‘id’: 2,
‘userName’: ‘test2′,
’email’: ‘test@gmail.com’
}];
store.dispatch(new UserActions.LoadUsers(users));
component.ngOnInit();
expect(component.users).toEqual(users);
});