Search⌘ K
Home
Courses
Test-driven Development with React

Babel with Jest, ESLint, Prettier, and Wallaby

Explore how to configure Babel alongside Jest for running React tests, incorporate ESLint and Prettier for code quality and formatting, and set up Wallaby for real-time test feedback. Understand how these tools work together to support test-driven development with React components.

We'll cover the following...

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:

    $ npm install --save-dev jest@23.6.0 babel-jest@23.6.0
+ jest@23.6.0
+ babel-jest@23.6.0

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

    $ npm install --save-dev babel-core@^7.0.0-bridge.0
+ babel-core@^7.0.0-bridge.0

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

Javascript (babel-node)
// package.json
{
  ...
  "scripts": {
    "test": "jest"
  },
  ...
}

  • Since you will be writing React components, you will of course need the react package:

    $ npm install react@16.4.2
+ react@16.4.2

    Notice that this is the first time in the course 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:

    $ npm install --save-dev react-dom@16.4.2
+ react-dom@16.4.2

Test using Jest and JSX

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