Testing

© Yariv Gilad

What shall we test?

  • Connected Containers
  • Action creators
  • Thunks
  • Reduces
  • Store

© Yariv Gilad

Testing Connected Containers

  • Test Markup  
    given a set of props, you’d expect a certain markup

Goals

  • Test Behavior
    user interaction, clicks, change, scroll, drag…

© Yariv Gilad

Testing Connected Containers

  1. Wrap with <Provider>  

    <Provider store={store}> MyContainer </Provider>
     

  2. Add named export
    To allow     imports of the container only
    without the Connect wrapper

Problem -
Containers are wrapped in a Connect function,
and their root instance is wrapped with <Provider>

© Yariv Gilad

Testing Connected Containers

Spies

  • A spy mimics a function
  • It tracks calls to it and all arguments.
  • A spy only exists in the describe or it block in which it is defined, and will be removed after each spec.

© Yariv Gilad

Testing Action Creators

  • Action Creators return an action Object
  • Testing Action Creators is as simple as that.
  • You call them and expect to get back an Action
  • Some say it is too simple and therefore redundant 

© Yariv Gilad

Testing Reducers

  • Testing Reducers is clean and simple
    Since reducers are pure functions
    with no side effects (external dependencies)
  • pass an initialState with an Action
    => expect a certain newState

© Yariv Gilad

Testing Thunks

  • Store
    install and use redux-mock-store

Mock two aspects

  • Ajax requests
    install and use nock

© Yariv Gilad