Streamlined GitHub Actions & Jest Integration: A Simple 3-Step Guide

In today’s fast-paced development environment, tech companies constantly seek to automate their testing processes to get high-quality code. Continuous integration (CI) tools like GitHub Actions make workflow automation possible and efficient. Combining it with a popular JavaScript testing framework like Jest can ensure that your code is robust and production-ready.

This guide will give you a step-by-step walkthrough of how I setup GitHub Actions workflow to automate my Jest tests.

Prerequisites

To follow along with this guide, you will need:

1. GitHub repository with a JavaScript/Node.js project.
2. Jest is installed as a testing framework in your project.
3. Basic knowledge of Jest, Git, and GitHub.

Step 1: Project Setup with Jest

Create a JavaScript/Node.js project by using the following command. This will create package.json for your project.

npm init -y

Next, you need to install Jest using:

npm install --save-dev jest

It is always good to add test scripts in package.json. By doing so, you can streamline the process of running tests with a simple command, rather than having to specify the Jest command every time.

"scripts": {
    "test": "jest"
  },

For this guide, I will be using this name.js file, that prints out my name.

name.js

function printName() {
    console.log("Hi, this is Ibrahim");
}

module.exports = printName;

Create a Jest test file named name.test.js to test the above piece of code. This code mocks the console.log function and verifies whether console.log is called with a certain string.

name.test.js

const printName = require('./name');

test('should print the correct name', () => {
    console.log = jest.fn();
    printName();
    expect(console.log).toHaveBeenCalledWith("Hi, this is Ibrahim"); 
});

Lastly, we will run our jest test using our newly defined test script:

npm test  

The output shows that our test has successfully passed.

Step 2: Configuring GitHub Actions

To automate Jest tests using GitHub Actions, we need to create a .github/workflows directory at the root of our project. Now, our root directory will look something like this:

Create a test.yml file inside the workflows directory. Below is an example implementation of test.yml a file that runs a test on every push to the origin/main branch.

test.yml

name: Run test

on:
  push:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "16"
      - run: npm install
      - run: npm test

Step 3: Pushing Project Code to GitHub Repository

This next step involves pushing our code to a remote GitHub repository. This will trigger the GitHub Actions workflow that will automatically run our test whenever we push into the main branch as mentioned in our test.yml file.

We will start this step by initializing Git at the root of our project by using the following command:

git init

Next, we will add all our project files into the git repository using the command:

git add .

This will stage our changes. We have to commit these changes with a meaningful message like the example given below:

git commit -m "Initial commit with Jest and GitHub Actions setup"

The next step involves creating a GitHub repository. This can be done by logging into GitHub and clicking the plus icon on the top-right corner and then selecting “New repository”.

This will prompt you to the following page which will ask you the name of the repository along with whether you want the repository to be public or private. Configure repository settings according to your liking and click “Create Repository”.

The next step involves linking your local Git repository to the GitHub repository you just created by running the following command (In this command, replace USERNAME and REPOSITORY with your actual GitHub username and repository name):

git remote add origin https://github.com/USERNAME/REPOSITORY.git

Lastly, push your code to the remote repository by using the following command:

git push -u origin main

This will push your code to the origin/main branch and will trigger your GitHub Actions workflow to automate your Jest test.

Now, if you visit your GitHub repository you can see that your local project code is now available on GitHub.

If we visit the “Actions” tab, we can see our GitHub Actions workflow runs. In the image below, our workflow run passed indicating that our test successfully passed.

I hope this article helped you learn GitHub Actions and its integration with a testing framework like Jest. By following the steps outlined in this article, you will improve your testing workflow and also become more confident in your code being production-ready.

Feel free to implement GitHub workflows and Jest in your code, add more test cases, or integrate other tools into your workflow to further enhance your development process. You can find the complete code used in this example on this GitHub repository https://github.com/Ibrahom1/Github-Worflows-w-Jest Happy coding!