Chapter 1
Test-Driven Development with Jest

Most tests are an afterthought. A programmer writes hundreds of lines of code to add a new feature to an application, followed by a perfunctory test or two. This “test-later” way of working has several drawbacks.

First, without tests, the programmer receives no feedback while writing the feature. If their approach turns out to be a dead-end, they won’t know it until they’ve finished the entire implementation.

Second, the tests the programmer writes after implementing the feature tend to be unthorough and unimaginative. Typically they confirm that the feature works along the “happy path”—that is, when used exactly as anticipated—rather than revealing potential bugs that might occur under edge case conditions.

Lastly, the programmer will be tempted to graft the new feature on to the app rather than rethinking the existing app structure, leading to codebase bloat. Fear of breaking other functionality prevents them from refactoring.

Fortunately, there’s an alternative: Write the tests first! That’s the core tenet of the software development methodology known as test-driven development (TDD). In addition to encouraging thorough test coverage, TDD changes the coding experience by giving you rapid feedback: with your tests already in place, you can quickly find out what works and what doesn’t. That gives you the freedom to experiment with different approaches. Experimentation leads to learning, which leads to better code. Plus, it’s just more fun!

This book will introduce you to a TDD workflow suited to React development. That means taking full advantage of the extensive range of support tools that have joined the JavaScript ecosystem in the last few years: Jest, ESLint, Prettier, Babel, webpack, and more. Rather than dive into a complete project setup, we’ll add these tools one at a time. The goal is for you to understand these tools well enough to feel that you’re in control. Ultimately, the tools themselves should fade into the background. What’s important is the feedback the tools give you.

In this chapter, you’ll build a simple JavaScript project using a test-driven approach. With Jest as your test framework, you’ll be able to create a lightning-fast feedback loop. Along the way, you’ll learn how to manage dependencies with npm.

Although this chapter’s project is extremely simple, the tools introduced here will continue to serve you through the rest of the book. In Chapter 2, ​Integrated Tooling with VS Code​, you’ll integrate these and other tools into the VS Code editor. All of this preparation will give you a strong foundation when you dive into React development in Chapter 3, ​Testing React with Enzyme​.