Testing React/React-Redux Smart Components
I would give the spiel on the importance of unit testing, when it comes to React components (and using React-Redux)…or anything for that matter, but I assume the readers who click on this already know as much…if not, my word to sum it up is: Isolation.
Anyways, for React components using React-Redux as a state management system, there is a few combinations of libraries that can be used for react testing, I’ve chosen Mocha/Chai/Enzyme/Sinon as my tool testing combination, as the logic makes more sense to me personally, and Jasmine is a bit slow performance wise.
Since isolation is my keyword, I want to test each element of functionality from the component to the store…however the component in testing may be a smart component that is wrapped around the component provided through the “connect” function of react-redux. The extra measure we need to dive into the html rendered by the component itself is by using Enzyme’s dive method. However this provides yet another challenge…as some html may not render if if was to be returned from a map method that iterated over data that was supposed to be provided from the store…*takes a deep breath*.
Unfortunately it’s getting late, so I will publish the article at this point, but “I’ll be back!” to add real content.
