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 on Testing React with Enyzme and Jest! The first five videos are free and available to watch now. You'll learn how to write testable React code, test complex components and use Jest and Enzyme effectively to write clean, thorough tests. 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.