Why Test-Driven Development and 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.

Drawbacks of writing tests after implementing features

Following are the drawbacks of writing tests after implementing the features:

• 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.

• 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.” In other words, when used exactly as anticipated, rather than revealing potential bugs that might occur under edge case conditions.

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

Perks of writing tests first

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 course will introduce you to a TDD workflow suited for 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 course. In 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 Testing React with Enzyme.

Introducing Jest

Jest is a test framework developed by Facebook. Thanks to its speed and rich feature set, it’s quickly become the de facto standard for testing React apps. It’s catching on outside of the React ecosystem, too.

Unlike its forerunners (notably Jasmine), which expect to run in a browser environment, Jest runs in a Node.js process. That may seem counterintuitive. Shouldn’t code written to be run in the browser be tested in the browser? Not anymore. It’s become possible to simulate browser APIs in Node.js, thanks to a miraculous library called jsdom. The advantages of using a simulated browser environment in Node are huge. Tests can be run much more quickly, code coverage can be calculated easily, and the same tests can be run on any system with consistent results.

We’ll be using Jest as our test framework throughout this course. In this section, we’ll set up a Node project, add Jest as a dependency, and run our first test. No prior experience with Node is required, but you’ll need some familiarity with the JavaScript language, including the ES6 arrow function syntax. If you need an introduction or a refresher, check out Kyle Simpson’s You Don’t Know JS.