Jest With GitHub Actions

This post will demonstrate how to add a GitHub Action for running JavaScript test runner jobs on a push event to the repo with the Jest testing framework.

The final project code can be found on my okeeffed/jest-with-github-actions GitHub repo.

Prerequisites

Getting started

First, we need to create a project that will host the testing. In our case, let's name that project folder hello-jest-github-actions.

$ mkdir hello-jest-github-actions
$ cd hello-jest-github-actions

# Initialise the project with defaults
$ npm init -y

# Install the deps
$ npm install jest

# Recursively create the required folders
$ mkdir -p src/__test__ .github/workflows

# Create a basic file and test file we want tested in CI
$ touch src/math.js src/__test__/math.test.js .github/workflows/jest.yml
copy

At this stage, we are ready to start writing our test for the example and then adding our GitHub action.

Writing the JavaScript tests

We are going to write a simple add, subtract and multiply function with some contrived arithmetic tests to help us demonstrate the testing when we write the code for our GitHub Action.

Inside of src/main.js, add the following code:

/**
 * Simple addition.
 *
 * @param {number} x First number.
 * @param {number} y second number.
 * @returns Addition of both arguments.
 */
const add = (x, y) => x + y;

/**
 * Simple subtraction.
 *
 * @param {number} x First number.
 * @param {number} y second number.
 * @returns Subtraction of second argument from the first.
 */
const subtract = (x, y) => x - y;

/**
 * Simple multiplication.
 *
 * @param {number} x First number.
 * @param {number} y second number.
 * @returns Multiplication of both arguments.
 */
const multiply = (x, y) => x * y;

module.exports = {
  add,
  subtract,
  multiply,
};
copy

The above is a simple implementation of arithmetic math functions to demonstrate the tests.

As for our Jest tests, update src/__test__/math.test.js with the following:

const { add, subtract, multiply } = require("../math");

describe("simple arithmetic", () => {
  describe("addition", () => {
    test("expect 2 + 3 = 5", () => {
      expect(add(2, 3)).toEqual(5);
    });
  });

  describe("subtract", () => {
    test("expect 5 - 2 = 3", () => {
      expect(subtract(5, 2)).toEqual(3);
    });
  });

  describe("multiply", () => {
    test("expect 2 * 3 = 6", () => {
      expect(multiply(2, 3)).toEqual(6);
    });
  });
});
copy

I won't go into detail about the Jest tests as I am assuming that you already have knowledge on Jest testing, but the above is simple enough to read through.

In order to run our tests and check they are passing, we first need to update package.json to have the correct test script:

{
  "name": "hello-jest-github-actions",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest" // UPDATE HERE
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jest": "^27.3.1"
  }
}
copy

At this stage, we can test that our tests are passing as expected by running Jest locally:

$ npm test

> hello-jest-github-actions@1.0.0 test
> jest

 PASS  src/__test__/math.test.js
  simple arithmetic
    addition
      ✓ expect 2 + 3 = 5 (3 ms)
    subtract
      ✓ expect 5 - 2 = 3 (1 ms)
    multiply
      ✓ expect 2 * 3 = 6

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.512 s
Ran all test suites.
copy

Tests are green! At this stage, we are ready to set things up for our GitHub action!

Adding the test script

We can edit the file .github/workflows/jest.yml to add the following:

name: Jest
on: push
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: "12"

      # Speed up subsequent runs with caching
      - name: Cache node modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      # Install required deps for action
      - name: Install Dependencies
        run: npm install

      # Finally, run our tests
      - name: Run the tests
        run: npm test
copy

Here we are doing a couple of things:

That is all that we need to be able to push to GitHub and see our action running!

All we need to do is commit the code and push the repo and the job will be available under the actions tab in the GitHub UI.

Action working as expected

Summary

Today's post demonstrated how to use GitHub actions to test Jest code on a push to the remote repository. We used the jest testing framework to test our code.

Resources and further reading

Photo credit: pawel_czerwinski