Fix: state is undefined for @ngrx/store in unit tests

Go to fix

I use @ngrx/store at my day-to-day development. This post is not to share the benefits of using a state-management library. Instead, to share a fix for a possible unit tests mess up we might make along the way of using such libraries.

MockStore#

In unit tests, we usually set our initial state as follows:

const initialState: AppState = {
	title: 'AshKeys',
	name: 'Sojiro De Tenken'
};

TestBed.configureTestingModule({
	imports: [TestModule],
	declarations: [AshKeysComponent],
	providers: [provideMockStore({ initialState })]
})
	.overrideTemplate(AshKeysComponent, '')
	.compileComponents();

This is good as long as we are fine writing units with the initial state values.

Updating the state in an iteration#

There comes a scenario where we might have to update the said state for an iteration as follows:

mockStore.setState({
	title: 'ashokma.com'
});

As you might have guessed it already, this overrides the initialState and in turn we loose a property called name. >_O

Fix: state is undefined#

Imagine name property as a state for some cases and there is a selector referring that particular state. In those cases, due to the above overriding, we encounter State is undefined error.

What I forgot to do is the following:

mockStore.setState({
	...initialState,
	title: 'ashokma.com'
});

In this way, we keep whatever we had in the initialState undisturbed and update the ones we bother. \O/