Migrating from Karma to Jest

Disclaimer: this article chronicles my specific migration. By no means is this a one-size-fits-all migration tutorial.

Why test and why Jest?

Jest is a testing platform created by Facebook that prides itself on Zero-Configuration Javascript testing. Initially, that’s what makes Jest attractive. Applications with ample test coverage give developers more confidence when it comes time to release changes. With that in mind, making test development easy as possible increases the chances that the developers working on your application will write meaningful assertions.

The reason I chose to migrate from Karma to Jest is mainly Snapshot Testing. Snapshots allow updated React components to be tested against a previous version of that component. If the tests pass, that means your updates render the component just as it was rendered when the snapshot was created. Conversely, if the changes you made were meant to alter the way the component is rendered, you can update the snapshot to reflect that; all future tests will be compared against the new snapshot. (The snapshot is the only source of truth. Multiple snapshots are not saved. Only the most current.)

More information can be found here: https://facebook.github.io/jest/

Installation

To install Jest with Yarn, run this command:

yarn add --dev jest

To install with NPM, run this:

npm install --save-dev jest

The particular application being migrated uses Babel to transpile the ES6/React code, so Babel-Jest and a few transform-plugins are also needed. The transforms needed were transform-decorators-legacy, transform-es2015-modules-commonjs, and transform-class-properties.

To install these use:

yarn add --dev babel-env babel-jest babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-es2015-modules-commonjs

Babel

By default, Jest will use the settings in your .babelrc, but will only use the settings defined in the “test” environment (Jest automatically sets your NODE_ENV to “test”). This is the section that was added to make Jest happy:

Now, we need to tell Jest to use Babel-Jest to transform our “.js” files:

// package.json
"transform": {
"^.+\\.js$": "babel-jest"
},

Killing Chai Assertions

To help ease the migration of existing test to the Jest platform, Jest-CodeMods provides an easy command line interface to help convert your “**/*.spec.js” (or test.js) files to the correct format.

Note: The `jest-codemods` command expects that you have already committed any outstanding git changes before running the transforms.

Follow the instructions on the Jest-CodeMods Github to get started.

Special Case: Webpack Alias

Prior to this migration, application configuration settings were kept in a YAML config file in the root folder. Webpack parsed this file on build and loaded it as an external. This was difficult for Jest to make sense of (without extra configuration) so I decided to load the config as a Webpack Alias instead. The files were moved from a YAML file to JS file using CommonJS exports.

// config.dev.js
module.exports = {
  // app settings go here
}

This was added to the Webpack config (The $ specifies that this is an exact path):

// webpack.dev.config.js
resolve: {
  alias: {
    config$: path.resolve(__dirname, 'config/config.dev.js')}
}

And this is how the config was accessed in the application:

// test.js
import Config from 'config';

Lastly, we have to include settings in our .babelrc that will tell Jest how to resolve our new alias:

Install this package:

yarn add -D babel-plugin-module-resolver

Then:

// .babelrc
["module-resolver",{
    "root": ["./app"],
    "alias": {"appConfig": "./config/appConfig.test.js"}
}]

Finishing up

The last step was just running the tests. All of the tests in this application were in the src folder so I added a test script to the package.json:

"test": "jest src/**/*.spec.js"

Most of the grunt work for converting the tests was done by Jest-CodeMods, but there was still a little manual work needed to strip Sinon in favor of Jest functions. Once you get all your tests to pass, you’re good to go. Happy testing!