Back to home

PrerequisitesGetting startedWriting the JavaScript testsAdding the test scriptSummaryResources and further reading
Jest With GitHub Actions main image

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

  1. Familiarity with npm.
  2. Familiarity with Jest.

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-pytest-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

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, };

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); }); }); });

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" } }

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.

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

Here we are doing a couple of things:

  1. Creating a job call Jest.
  2. Running this job on a push event to the repository. There is also the capability to run this on a pull request, but I will keep it simple for now.
  3. Running the job on ubuntu-latest.
  4. Setting up the Node environment for the latest in version 12.x. The major versions supported are 12, 14 and 16 but check the actions/setup-node supported versions for the latest.
  5. We then attempt to load a installation cache for the dependencies, with a fallback to create a new cache based on the hash of the package.json file.
  6. Install dependencies.
  7. Running the test suite that we setup the command and tested before.

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

Be sure at this stage that you have set up your own origin remote for the repo.

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

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

Personal image

Dennis O'Keeffe

@dennisokeeffe92
  • Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
I am currently working on workingoutloud.dev, Den Dribbles and LandPad .

1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.