I have been working on testing a smart component for my NgRx implementation, and the test setup looks like this:
describe( 'Component', () => {
let store: MockStore<State>;
beforeEach( async( () => {
TestBed.configureTestingModule( {
/* ... */
providers: [
provideMockStore( { initialState: fromReducer.initialState } )
]
} ).compileComponents();
store = TestBed.get<Store<State>>( Store );
} ) );
it( 'should load items in #ngOnInit', () => {
store.setState( {
item: {
...fromReducer.initialState,
entities: { [item.id]: item },
},
otherFeature: null,
otherFeature: null,
otherFeature: null
} );
component.items$.subscribe( items =>
store.select( ItemStoreSelectors.selectItems ).subscribe( fromStore => expect( items ).toEqual( fromStore ) )
);
} );
});
While everything is functioning correctly with using provideMockStore and setState, I find one particular aspect quite annoying:
store.setState( {
item: {
...fromReducer.initialState,
entities: { [item.id]: item },
},
otherFeature: null,
otherFeature: null,
otherFeature: null
} );
Each feature slice of the state needs to be added in the setState method. Otherwise, TypeScript will throw errors.
Instead of setting the entire root state, my preference would be to set only a specific feature slice like so:
store.setState( {
...fromReducer.initialState,
entities: { [item.id]: item },
} );
However, I couldn't find any relevant documentation regarding using provideMockStore specifically for individual slices of state here.