JS - Using Jest with Import and Export statements

Purpose

When using new tools I like to create my own documentation of setup.
In this case we will be looking at: Jest

Jest is a simple testing framework for javascript that uses very similar syntax to RSpec. In fact, it even supports the *.spec.js file extension. I however, like to use the *.test.js file, but you are free to do as you please.

Quick Start

At the time of writing this, I am using Jest 24.9, Babel 7.6, and ESLint 6.5

ESLint is not necessary for this Jest to properly use the import / export syntax, however, I like it for using prettier within my work environment.

EDIT

I realized I never included the use of Webpack for bundling everything! I added the command below and my webpack config

# If its a new project
npm init

# install eslint, jest, and babel packages
npm install --save-dev webpack webpack-cli webpack-dev-server jest babel-jest babel-loader @babel/core @babel/preset-env regenerator-runtime eslint eslint-plugin-jest

# create a config file for jest and eslint
npx jest --init
npx eslint --init

Then modify eslint and jest config files accordingly.

My webpack config Refer to webpack documentation for further instruction. I also have a previous writeup. https://paramagicdev.github.io/my-blog/javascript/webpackDevServerLiveReloading/

My Jest Config I just use the default from npx jest --init

My ESLint Config

I simply used the default from npx eslint --init and chose the appropriate options for the project. I added the following lines for use with Jest.

module.exports = {
  // ...
  env: {
    "jest/globals": true,
  },
  extends: ["plugins:jest/recommended", "eslint:recommended"],
  plugins: ["jest"],
  // ...
}

My Babel Config There appears to be no npx babel --init so you must generate your own config file. I generated my using the Docs and it worked right out of the box.

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
  ],
}

Now, all your tests will go into a __tests__/ directory and you can name them *.test.js and you’re ready to rock and roll.

The longer, more in depth guide

As with all projects using javascript, start with creating your package.json.

npm init

After filling in the appropriate fields, you will have a package.json and package-lock.json ready to go. Alternatively you can use yarn, and I actually prefer yarn for many reasons that I will not get into in this guide.

Installing Jest

Jest Getting Started

Jest’s documentation is quite good. And I quite enjoyed reading it, I recommend you check it out

To start run the following:

npm install --save-dev jest

That’s it! You’re done! Technically this is all you need to run Jest. However, if you’re using a non-Node based project IE: browser based project using ES6 imports, Jest will quickly get in the way.

Also, as a quick note, if you go into your jest config, the file it searches for tests is the __tests__ directory. The getting started pages doesn’t mention this, but if you’re like me, you like to use a seperate tests directory.

Installing Babel

Jest uses the Node syntax of module.exports = <variable> and require('<file>'), it will not support the import and export statements of ES6.

Luckily, people way smarter than me already thought of this, so there is a babel transpiler for this.

To use this transpiler, you can install the following for use with Jest.

npm install --save-dev babel-jest @babel/core @babel/preset-env regenerator-runtime

babel-jest, @babel/core, @babel/preset-env are technically the only required packages. regenerator-runtime according to the documentation is not needed with NPM versions > 3/4 or Yarn. However, I included it just in case someone is using a different package manager.

Adding a babel config

The next step is to add a Babel config.

My Babel Config There appears to be no npx babel --init so you must generate your own config file. I generated my using the Docs and it worked right out of the box.

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
  ],
}

After adding this to the root of your project, you should be ready to start using import / export statements wherever you want!

Ok, so how does this all work?

Well, based on what I have read it’s super simple. Let’s take what the documentation uses. Given the following file:

// src/sum.js
export default function sum(a, b) {
  return a + b
}

// __tests__/sum.test.js

import sum from "../src/sum.js"

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3)
})

So why does this work?

Well, Babel essentially takes your import statement:
import sum from "../src/sum.js";
And turns it into
const sum = require('../src/sum.js');

And takes your export statement:
export default function sum(a, b) {
and turns it into

function sum(a, b) {
...code omitted for brevity
}
module.exports = sum

There are key differences when looking at import / export vs module.exports / require if you dig further and look at the specs. I won’t get into the differences here, but there is a reason import / export statements are currently only experimental in NodeJS.

Technically, you could stop here, but I like to use ESLint to both lint and enforce code style. If you don’t tell ESLint about Jest, it will throw up many warnings. So, lets fix that.

Installing ESLint

npm install --save-dev eslint eslint-plugin-jest
npx eslint --init

This will generate a eslint config file for you once you choose from the command line options.

My ESLint Config

I added the following lines for use with Jest in my .eslintrc.js file.

module.exports = {
  // ...
  env: {
    "jest/globals": true,
  },
  extends: ["plugins:jest/recommended", "eslint:recommended"],
  plugins: ["jest"],
  // ...
}

Closing thoughts

Setting up Jest for the first time took a bit of work, but I got it all working to my liking and used it for testing in my TicTacToe project . This was meant more so as a guide to myself, but if you found this helpful, feel free to share with your friends.