Share
Explore
CSD 4503 Assignment 3
Lab Workbook : Connecting Local Git Repositories to GitHub with CI/CD for Jest Testing triggered by GIT Actions linked to Commits into the Branch by programming team members.
This lab workbook provides a comprehensive guide for students to connect their local Git repositories to GitHub, facilitating the use of GitHub Actions for continuous integration and deployment.
Students will learn how to create a local Git repository, generate a Personal Access Token (PAT) for secure authentication, and set up a GitHub Actions workflow that automatically runs Jest tests upon code commits.
The workflow will notify users of test results and can be extended to deploy code to a production server upon successful tests.
This hands-on experience will reinforce essential DevOps practices while preparing students for real-world software development scenarios. These skills will give you the employment edge in introductory IT roles especially related to software build / Dev Ops Engineering roles which are in high growth demand as we move to an AI Centric World.
Citations:
Precursor Lab:
Here is a concise introductory lab to teach students how to set up GitHub Actions.
The lab is divided into two parts:
Lab: Setting Up GitHub Actions for Jest Testing
Objective
Part 1: Setting Up a GitHub Repository
You need a local git client:
Open your terminal or Git Bash.
You must make a local directory to be the house that your code lives in:
Make a local directory called c:\cicdpipeline
Follow this proceed to get the github repo cloning url:
In my case, it is:
git clone https://github.com/<your-username>/jest-github-actions-demo.git
cd jest-github-actions-demo
So in my case: This is what you run at the command line (put your details in!)
git clone https://github.com/ProfessorBrownBear/Demo-repository-for-GitHub-Actions-and-Jest-testing.git
Initialize the Repository for Jest
Set up a basic Node.js project:
npm init -y
npm install jest --save-dev
// test/sum.test.js
const sum = (a, b) => a + b;
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
"scripts": {
"test": "jest"
}
git add .
git commit -m "Initial commit with Jest setup"
git push origin main
Part 1: More complete details:
Let’s expand the explanation to ensure clarity regarding the complete directory structure and necessary configurations.
Full Directory Structure
When working on this lab, your project should look like this after setting up the repository and Jest:
cicdpipeline/ NOTE: This is the project ROOT: this is where I did the git clone cmd
├── .github/
│ └── workflows/
│ └── jest-tests.yml # GitHub Actions workflow file
├── node_modules/ # Installed npm packages (created after running npm install)
├── test/
│ └── sum.test.js # Jest test file
├── package.json # Project configuration: where this file is the project ROOT
├── package-lock.json # Automatically generated by npm
└── README.md # Initial README added when creating the repository
The project root is the top-level directory of your repository where the package.json file is located.
This directory is where you execute commands like npm init or git add. All other files and folders (e.g., test/ and .github/) are organized relative to this root directory.
For your setup:
Demo-repository-for-GitHub-Actions-and-Jest-testing/
├── .git/ # (already present; contains Git version control metadata)
├── .github/ # Contains workflows for GitHub Actions
│ └── workflows/
│ └── jest-tests.yml
├── node_modules/ # Automatically created after running npm install
├── test/ # This is where your test files go
│ └── sum.test.js
├── package.json # Generated by npm init -y
├── package-lock.json # Generated automatically by npm install
└── README.md # Initial README file
This structure ensures that Jest can locate the test files (test/sum.test.js) when you run npm test, and that GitHub Actions will detect the workflow configuration (.github/workflows/jest-tests.yml) to execute automated tests on the repository.
Detailed Steps to Ensure Everything Works
1. Initialize the Project
Run the following commands to create and prepare the project:
npm init -y
This will generate a package.json file. This file is required for managing project dependencies and scripts.
2. Install Jest
Install Jest as a development dependency:
npm install jest --save-dev
After this step, your package.json should automatically include the dependency under "devDependencies":
"devDependencies": {
"jest": "^29.x.x" // Version may vary
}
Set Up the Test Script
Open the package.json file and add the following line to the "scripts" section:
"scripts": {
"test": "jest"
}
This script allows you to run tests using the npm test command.
4. Create the test Directory
In the project root (where package.json is), create a folder named test.
Inside it, add a file named sum.test.js with the following code:
// test/sum.test.js
const sum = (a, b) => a + b;
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
Verifying the Local Test Setup
npm test
PASS test/sum.test.js
✓ adds 1 + 2 to equal 3 (Xms)
If Jest is not recognized, ensure it is installed and that the node_modules folder exists.
Setting Up GitHub Actions
Once you’ve confirmed that tests run locally, proceed with creating the GitHub Actions workflow.
1. Directory Structure for GitHub Actions
yml = Yet Another Markup Language: an xml format language to configure git actions
The .github folder should be placed in the root directory of your project. This directory is the same location where your package.json file resides, and it serves as the central place for GitHub-related configurations like workflows.
Correct Placement of .github
Your project structure should look like this:
Demo-repository-for-GitHub-Actions-and-Jest-testing/
├── .github/ # GitHub-specific configurations go here
│ └── workflows/ # Contains workflow YAML files
│ └── jest-tests.yml # Workflow to automate Jest tests
├── node_modules/ # Installed npm packages (created by npm install)
├── test/ # Contains Jest test files
│ └── sum.test.js # Sample Jest test
├── package.json # Project configuration file
├── package-lock.json # Auto-generated file by npm
└── README.md # Project README file
Steps to Create the .github Directory
cd path/to/Demo-repository-for-GitHub-Actions-and-Jest-testing
mkdir -p .github/workflows
nano .github/workflows/jest-tests.yml
Paste the workflow YAML content.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.