Refactoring React with Tests

As you work on a React application it’s highly likely that you’ll encounter components that have grown over time. They may have started with just one particular use case in mind, but will have been added to since. This can lead to complex render methods and code that’s hard to follow.

In this video you’ll see how to spot components that need some work doing, how we test these components, and how we use the tests to guide us, splitting one component into two much more straightforward ones.

PS: it’s definitely worth making the video fullscreen or viewing on Youtube so you can see things more clearly.


If you’d like to play with this code, you can find the repository on GitHub, and feel free to raise any questions via GitHub issues on that repository.



Don't miss my latest course, React in Five! This course will help you level up your React skills by covering lesser known parts of the React API. Each video is less than five minutes long, and the first four are free to watch. Get started now.


Subscribe to keep up to date with the latest content.

Join the JS Playground mailing list to be kept up to date with the latest tutorials, screencasts and more. You won't be spammed and you can unsubscribe at any time.


Headshot of Jack Franklin

Jack is JavaScript and React developer in London. He's also a keen Elm enthusiast, conference speaker and tweets far too often.