How To Unit Test Angular Components With Fake NgRx TestStore

Tomas Trajan
Angular In Depth
Published in
8 min readJul 10, 2018

--

(Original 📷 by Jens Johnsson)

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

What are we going to learn?

  1. How to implement NgRx TestStore
  2. When to use NgRx TestStore
  3. How to set up TestStore in your tests
  4. How to test UI of a component
  5. How to test dispatched actions of a component

But first a little bit of …

Context

Maybe you are aware of Angular NgRx Material Starter project. It’s a community effort to provide up to date seed that focuses on implementing all known best practices.

One of the last missing pieces of the puzzle was a good test coverage that could demonstrate best practices in testing of different types of entities that are needed in every Angular project including services, view components, container components, reducers, …

Instead of adding tests myself, I have chosen a different strategy. I have created a set of issues that describe what kind of tests would be nice to have in a project.

--

--

Tomas Trajan
Angular In Depth

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer