In this article we are going to show you how to reduce the time taken for the testing in our app using Jest and CircileCI Parallelism.

Prerequisite Installation

Assume that we already installed Jest.

Test Types

Front-end test should consist of 4 types:

• End-to-End test
• Static test
• Unit test
• Integration test

End-to-End Test

End-to-End test is ran in a real browser and we write test cases as step-by-step instructions for the automated browser to go through the parts of the app we want to test.

Static Test

Static test consist of linters (ESlint) and static type checking (Typescript).

Integration Test

Integration test is use to test and ensure that various parts of the app work together.

Unit Test

Unit test is used to test separated parts of the app such as single function and modules with no external dependencies.

The number of unit test can be bigger than any other type of test.

Split Test Into Unit Test and Integration Test

If we have problem with testing performance we should split them into unit test and integration test.

To split into unit test we just end up file with .test.js as follow:

example1.test.js
example2.test.js

To split into integration test we just end up file with .test.intg.js as follow:

example1.intg.js
example2.intg.js

Then modify package.json as follow:

"scripts": {
  ...
  "test:unit": "jest",
  "test:integration": "INTEGRATION=true jest"
}

Optimize Jest in CI

Another thing is to set the max worker pool to ~4. Specifically, on CircleCI  (free plan machines have only 2 CPU cores), this can reduce test execution time in half.

Then modify package.json as follow:

"scripts": {
  ...
  "test:unit": "jest",
  "test:integration": "INTEGRATION=true jest",
  "test:ci": "jest --maxWorkers=4"
}

However, the unit test and integration test are still expensive to run on CircleCI. Let’s make them execute in parallel.

Test in Parallel on CircleCI

CircleCI provides us with capabilities to run tests in parallel and achieve faster completion.

First, customize test:ci for CI in package.json as follow:

"scripts": {
  ...
  "test:unit": "jest",
  "test:integration": "INTEGRATION=true jest",
  "test:ci": "jest --ci --reporters=jest-junit --maxWorkers=4"
}

Then open .circleci/config.yml and add parallelism as follow:

version: 2.1

jobs:
  test-frontend:
    executor: node
    parallelism: 4
    ...

And in the test job add some commands as follow:

version: 2.1

jobs:
  test-frontend:
    executor: node
    parallelism: 4
    steps:
      - run:
        name: Run Jest
        command: cd frontend && yarn test:ci $(circleci tests glob ./src/**/*.test.{ts,tsx,js} | circleci tests split --split-by=filesize)

circleci tests glob ./src/*/.test.{ts,tsx,js} will receive a list of test files and the CircleCI CLI will split them by filesize. 

To able to do that in CircleCI, we need to install jest-junit:

yarn add -D jest-junit

When we push the change, CircleCI automatically split the tests and runs them in parallel.