Testing Strategies for React and Redux

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 onSubmit prop to another component, it's better to simulate the integration by calling otherComponent.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.

back