Starting a React Project

Our project for this chapter, and for the remainder of the book, will be a carousel component. Carousels have become ubiquitous on the web, yet many implementations fall short in various ways. By building your own, you’ll be able to adapt it to your project’s needs.

Create a new directory called test-driven-carousel and opening it in VS Code:

Use VS Code’s “Git: Initialize Repository” command, or run

on the command line. Once the repo is initialized, add the .gitignore from the previous chapter:

Then create a package.json using npm:

As in the previous chapters, add a "private": true entry to the package.json to silence various npm warnings:

With those two core files in place, make an initial commit:

So far, so familiar. Next, we’ll move into new territory as we add support for a little language called JSX.

Using Babel for JSX

Like any other JavaScript library, React is fully usable through plain, ordinary JavaScript code. But hardly anyone uses it that way. Instead, they compile a language called JSX down to ordinary JavaScript.

JSX allows HTML-like markup to be embedded within JavaScript code. Every tag in JSX is converted to a call to React.createElement(). So for instance, the code

would be compiled to

If you’re new to JSX, this new syntax will take some getting used to. But it makes code much easier to read and write than the equivalent series of React.createElement() calls would be. For more details on JSX syntax, take a look at the React docs.^[35]

The compiler that translates JSX into ordinary JavaScript is known as Babel.^[36] And it does so much more than just JSX: with Babel, you can write code that uses JavaScript features from the future—those that are only implemented in leading-edge browsers—and run that code everywhere. More precisely, you can run that code in any JavaScript environment that supports the ECMAScript 5 standard (2009). Remember Internet Explorer 9? Yep: thanks to Babel, it can run React code!

To start using Babel, add its core package to the project:

As with ESLint, Babel requires some configuration to make it useful. For this project, you’ll start with two popular Babel presets:

• The React preset,^[37] which provides support for JSX.
• The env preset,^[38] which provides support for all new JavaScript syntax features defined in ES2015 (a.k.a. ES6), ES2016, and ES2017. The name “env” refers to its ability to tailor the transpilation pipeline to a specified set of target environments.

Install the presets with npm:

Then bring in the two presets from a new file called .babelrc.js:

Babel will now apply this configuration to every JS file in the project. To try it out, create a JS file called hello-babel.js:

This file uses the ES2015 modules syntax in the form of the import keyword. If you try running it in Node without Babel, you’ll get a syntax error:

To run this file through Babel from the command line, you will need the @babel/cli package:

@babel/cli includes an executable called babel that you can run with npx:

You don’t need to understand the details of this code. Long story short, Babel has compiled the import syntax into something that’s compatible with Node and other environments that don’t support ES2015 modules.

You can run the compiled script by piping it into node. But first, install that package it’s trying to import:

Now check out what happens:

Figlet^[39] took a plain old string and turned it into ASCII art. Pretty cool!

You can clean up hello-babel.js and its dependencies, as we won’t need them:

Then commit the new .babelrc.js and the changes to package.json:

In the next section, we’ll use the power of Babel to bring exciting new syntax features to the world of Jest testing.

Bridging Jest and Babel

Let’s bring Jest to the party. In order to get Jest to run tests through Babel, you’ll need both jest and a package called babel-jest:

As of this writing, you’ll also need a special version of the babel-core package. The reason is that the package recently switched names: Babel 6 called it babel-core, but Babel 7 namespaces it as @babel/core. So this package creates a bridge for projects looking for babel-core to direct them to @babel/core:

Next, update the scripts entry in package.json to make Jest the project’s official test runner:

And since you will be writing React components, naturally you will need the react package:

Notice that this is the first time in the book that we’ve omitted --save-dev when installing a dependency. Since React will be used at runtime in our app (remember, those JSX tags compile to React.createElement() calls!), it’s not just a development dependency.

You’ll also need the react-dom package, a bridge between React elements and the DOM, though only as a dev dependency for testing:

Create a test file that takes advantage of JSX and the ES2015 import syntax:

​①​

jest.spyOn(React, "createElement") replaces the React.createElement() method with a spy that intercepts calls, allowing us to make assertions about how that method is used.

​②​

expect(spy).toHaveBeenCalledWith() does just what it says on the tin, failing if the spy wasn’t called or was called with a different set of arguments.

Give it a try:

Huzzah! Jest automatically recognized Babel and ran our test file through it before running it. Commit the configuration change:

Next, we’ll bring the ever-helpful ESLint and Prettier into the land of Babel.

Adding ESLint and Prettier

To get this new project linted, start by installing some deps that were introduced in the previous chapter:

Then add the scripts from last chapter’s package.json:

We’ll use three nested ESLint configurations for this project:

1. The root configuration, .eslintrc.js
2. The source configuration, src/.eslintrc.js
3. The test configuration, src/tests/.eslintrc.js

The root and test configurations are borrowed from last chapter’s project:

The new configuration in src tells ESLint that our project’s code is intended for a browser environment:

Then try out the linter on our test file:

The error indicates that ESLint is aware of the import syntax but isn’t sure if this JS file is supposed to be an ES2015 module. For this project, we want all JS files to be ES2015 modules. To get ESLint to recognize them as such, modify the parserOptions in the root ESLint config:

​①​

sourceType: ’module’ tells ESLint that our code will run in an environment that supports the ES2015 (a.k.a. ES6) import/export syntax.

Try running the linter again:

Now ESLint is saying that it doesn’t recognize JSX syntax. This, too, is best solved through parserOptions:

One more attempt:

No news from ESLint is good news! Since you’ll be using React in your tests, it’s a good idea to make the linter aware of it. To do that, you’ll need another plugin, eslint-plugin-react:^[40]

Apply the plugin by adding it to the plugins section of your ESLint config, then add its recommended set of rules to our extends list. This plugin is relevant to app code as well as tests, so it belongs in the root ESLint config:

The set of recommended rules is designed to catch a number of common React coding mistakes. Additionally, eslint-plugin-react can make suggestions targeted to the React version you’re using if you specify it in a settings block:

What about Prettier? If you’re using VS Code, try running the Format Document command on the test file. If you’re using another editor, use the command npx prettier-eslint --write src/tests/hello.test.js. Either way, the file should run through Prettier without complaint. Thanks to the prettier-eslint bridge, it knows all about the special syntax features that we’ve told ESLint to recognize.

If you’re using VS Code and want to run Prettier on save, this would be a good time to enable editor.formatOnSave for this project. In fact, all of the Workspace Settings from last chapter’s project are appropriate for this project:

Now it’s time to make another commit:

Add one last supporting technology before we switch into TDD mode: Wallaby.

Configuring Wallaby for Babel

In order to get Wallaby up and running, we need to make some changes to our config from the last chapter. If you’re not using Wallaby, start Jest in watch mode (npx jest --watchAll) and skip ahead to the next section.

Create a new wallaby.js file in the root of the project:

​①​

The compilers entry tells Wallaby that all .js files should be compiled with Babel.

Run the Wallaby.js: Start command. Give it a minute to spin up, and watch as hello.test.js is bedecked in beautiful green annotations.

This calls for a commit:

Now we’re ready to build our first test-driven React component!