Test-driven Development with React/

...

/

Babel with Jest, ESLint, Prettier, and Wallaby

Babel with Jest, ESLint, Prettier, and Wallaby

Learn the integration of Babel with Jest, and the configuration of ESLint, Prettier, and Wallaby with Babel and JSX

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:

Press + to interact
// 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: ...