Building a CI/Test-Environment for JavaScript Projects

Maintaining software quality is not an easy task. As Software gets more complex and requirements on the quality increase, keeping code quality up high has never been as important. And yet, fulfilling these needs is easy if done right.

The Tools

Jest

Jest is one of the most used JavaScript test-frameworks and is developed by Facebook, making it a reliable choice for any project. It features an easy-to-follow convention, making tests self-explanatory to read and write. Additionally, it can output code coverage in several formats, making it the ideal choice for all test-related tasks your software needs.

CodeClimate

CodeClimate is a cloud service used for code quality analysis. Each commit to the repository gets analyzed, and an in-depth analysis featuring code smells, maintainability, code coverage, and more, are recorded.

Travis CI

Travis CI is a continuous-integration cloud service. By defining Software, operating system, and tasks in a .travis.yml file, each commit automatically triggers a new build using the settings defined in the configuration.

Project Setup

A sample repository containing this article’s code can be found under

broken-bytes/js-tests

Installation

First, create a new project with npm. Follow the prompts and tweak everything to your project needs.

npm init

Now, we can install Jest.

npm i --save-dev jest

Setup

For Jest to function, we need to change our test script. Open package.json and replace your test script with the following code:

"test": "jest --coverage"

Your package.json should now look similar to this:

{
  "name": "jest-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest --coverage"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^25.5.1"
  }
}

Using the coverage option on jest, we get a detailed coverage report that we can use later on.

Next, visit https://codeclimate.com/login/github/join and login with your Github account. After login, add the repository for which you want analysis data. Head to the “Repo Settings” tab and navigate to “Test coverage”. Go ahead and copy the Test Reporter ID. We will need it in the next step.

Now create the Travis configuration. Add a new file called .travis.yml. Paste the following code and replace YOUR REPORTER ID with the ID we just copied.

env:
  global:
    - CC_TEST_REPORTER_ID=YOUR REPORTER ID
language: node_js
node_js:
  - node
before_script:
  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
  - chmod +x ./cc-test-reporter
  - ./cc-test-reporter before-build
  - npm install -g jest
after_script:
  - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT

This script tells travis what language to use, which node version to choose and what to do before and after the test is run. Before our test script is executed, CodeClimates test reporter tool is acquired and jest is installed on the image. After our test is finished, the test reporter tool is used to upload the coverage results to CodeClimate. To determine what project to choose, we set our reporter id as an environment variable which is used by the reporter tool.

Visit https://travis-ci.com/ and login with your GitHub account. Travis should prompt you for installation on your account. After completion, new commits will automatically trigger a build for any public project containing a .travis.yml file.

Push the changes to your repository, Travis should automatically trigger a new build.

After each build, you will see a detailed test coverage report on your CodeClimate project dashboard.

Testing

Create two files, called calculator.js and calculator.test.js.

Hint: Jest looks for any file matching *.test.js and executes them when run.

Open calculator.js and paste the following code:

function add(x, y) {
  return x + y
}
function subtract(x, y) {
  return x - y
}
function check(x, y) {
  return x === y
}
module.exports = { add: add, subtract: subtract, check: check }

These functions are a good showcase of Jests functionality and syntax.

Next, open calculator.test.js and paste our test cases:

const calculator = require('./calculator');
describe('Adds, subtracts, and checks 3 and 2 for equality', () => {
  test('Adds 3 to 2', () => expect(calculator.add(3, 2)).toBe(5))
  test('Adds 2 to 3', () => expect(calculator.add(2, 3)).toBe(5))
  test('Subtracts 2 from 3', () => expect(calculator.subtract(3, 2)).toBe(1))
  test('Subtracts 3 from 2', () => expect(calculator.subtract(2, 3)).toBe(-1))
  test('Checks 3 and 2 for inequality', () => expect(calculator.check(3, 2)).toBeFalse)
  test('Checks 2 and 3 for inequality', () => expect(calculator.check(2, 3)).toBeFalse)
})
describe('Adds, subtracts, and checks 3 and 3 for equality', () => {
  test('Adds 3 to 3', () => expect(calculator.add(3, 3)).toBe(6))
  test('Subtracts 3 from 3', () => expect(calculator.subtract(3, 3)).toBe(0))
  test('Checks 3 and 3 for equality', () => expect(calculator.check(3, 3)).toBeTrue)
})

As you can see, Jest has an easy-to-understand syntax

For a full list of Jest’s capabilities, I strongly recommend reading the docs. (https://jestjs.io/docs/en/getting-started)

Push the changes and check your Travis build output. It should look similar to this:

When Travis finishes your build, your Code Quality is automatically determined at CodeClimate. Check your project’s dashboard to see your first run. It should look like this:

You have now successfully set up your project’s CI environment.

Recap

Building a simple CI/Test environment for your JavaScript project is easy with tools such as Jest and Travis. By having cloud services analyze code changed on each commit, keeping track of bad commits or potential bugs found during tests, code gets more robust, and some bugs don’t even make it into the Software. Combined with a JavaScript linter like ESLint, code quality is drastically increased per project.