I wrote an article for Mozilla Hacks about testing React / Redux apps.
TL;DR
- Setting up a test for a Redux connected component is simple:
just dispatch the actions needed to enter a desired state.
There's no need for mock objects or API calls.
If you need to assert that the component dispatches an action
in response to a UI event, you can spy on
store.dispatch(). - Shallow rendering lets you run fast,
encapsulated
unit tests.
For example, breakage in an
<Icon>component (that might be used all across the app) would not break your entire test suite. - Testing component interfaces rather than complete end to end coverage
improves encapsulation and makes tests more maintainable.
For example, if the component under test passes an
onSubmitprop to another component, it's better to simulate the integration by callingotherComponent.prop('onSubmit')(). There's no need to fully mount the other component. - I recommend using static typing with these testing strategies to ensure all components are integrated correctly.