The First 80% is Done: Now What?

This is a milestone in the development of our little app: the code all works, it performs a real task albeit a fairly trivial one, and it has a modicum of styling. We could very easily stop at this point and declare it done so you can go off and start making a React app all of your own.

But there's more. You see, we've finished the first 80% of our app, but what about the second 80%? Yes, that's an old joke, but it does hold true surprisingly frequently.

Our app is missing something rather fundamental, and it would be remiss of me not to teach you at least something about this topic. In fact, I expect some readers have already sent me hate mail for not bringing it up at the very beginning and all the way through!

What's missing? Testing. A way to programmatically ensure our code does what we think it does. Now, clearly we both can see our code does what we think it does. But what if we make a change in the future and something breaks? This is easy to do even with our small web app, but gets even easier as your codebase grows in size.

I said that some readers would have preferred me to mention testing at the very beginning and all the way through, and it's true: one of the most popular development approaches is called test-driven development (TDD), although that has sort of morphed into behavior-driven development (BDD). They are extremely similar (indeed almost identical if done right!), and both strongly recommend you write your test before writing any code.

So, all this time we were churning out lots of code with zero testing, which is a pretty poor approach when you're working on a real project. I'm going to rectify this now by showing you how to add tests for our code, but in the future you're totally going to create your tests before your code, right? Right.

When it comes to choosing a testing framework we're spoiled for choice – I've had great success with Mocha and Chai in the past, Jasmine is extremely popular, and Facebook's own Jest framework takes Jasmine and adds several major improvements.

So, that's the good news. Now for the bad news: none of them are particularly easy to get started with, and I'm keen to help you take your first steps into testing in a non-terrifying way. So, I wrote this next chapter, then deleted it, then wrote it again, then deleted it again, then wrote it one last time – each time trying to find simpler and simpler ways to accomplish basic testing. The end result is, I think, as simple as I can possibly make it.

Cutting to the chase: we'll be using the Jest testing framework, but we'll be disabling mocking. Mocking is one of the most important features of Jest, but it's also pretty much guaranteed to confuse you at this point. Still, Jest also brings with it the easiest testing setup imaginable, so hopefully you won't find this next chapter too painful.

(Before you send me flames: yes, I know Mocha is faster, but Jest is easier and that counts for a lot in a beginners' tutorial. And yes, I am fully aware that Jest without mocking is less than ideal, but trust me: I spent a long time weighing up all the options.)

All set? Let's do this!

Copyright ©2016 Paul Hudson. Follow me: @twostraws.