Writing (Unit) Testable React

  1. Actions — Enumerate each action to represent a single event in your application
  2. Side Effect Managers (i.e. Thunk/Sagas)— Resolve all side effects here — even if they don’t have anything to give to your reducer. Create a space for side effects that are related to events via actions and are isolated from the rest of your application.
  3. Reducers — Put all your pure logic associated with an event here. If there’s something that would otherwise make your reducer code impure, resolve it in the side effect manager first then deal with the result of the side effect in a pure way in your reducer. Keep the logic out of your component and in your reducer, then return an updated version of your store.
  4. Store — Create state that represents the direct outcome of events, not state that represents how it impacts component (there’s a difference).
  5. Selectors — This is where we interpret state to by synthesizing (potentially) multiple state variables and adding logic to produce a return value to your component.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rob Bertram

Rob Bertram

“A language that doesn’t affect the way you think about programming is not worth knowing.”