Add Unit Testing And Github Actions And Configure GitHub Repo Settings
Introduction
In this article, we will cover the process of adding unit testing and GitHub Actions to a project, as well as configuring the GitHub repository settings to ensure that only mergeable pull requests (PRs) are accepted. We will also cover setting up a good unit testing component library, linting and unit testing components, and pre-commit setup.
Configure GitHub Repo
Ensure that only PR's that can get merged are passing all actions
To ensure that only PRs that can get merged are passing all actions, we need to set up GitHub Actions to run on every PR. This will ensure that every PR is tested and validated before it can be merged.
Step 1: Create a new GitHub Actions workflow
To create a new GitHub Actions workflow, we need to create a new file in the .github/workflows directory. This file will contain the configuration for our workflow.
name: CI
on:
pull_request:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Run tests
run: npm run test
This workflow will run on every PR that is opened on the main branch. It will first checkout the code, then install the dependencies, and finally run the tests.
Ensure that only PR's from a separate branch can be merged
To ensure that only PRs from a separate branch can be merged, we need to set up a branch protection rule in GitHub.
Step 1: Create a new branch protection rule
To create a new branch protection rule, we need to go to the repository settings and click on the "Branches" tab. Then, we need to click on the "Add rule" button and select the branch that we want to protect.
Step 2: Configure the branch protection rule
Once we have created the branch protection rule, we need to configure it to require that all PRs are opened from a separate branch.
Step 3: Configure who can merge PR's
To configure who can merge PRs, we need to go to the repository settings and click on the "Members" tab. Then, we need to click on the "Add member" button and select the users that we want to give the permission to merge PRs.
Setup who can merge PR's
To setup who can merge PRs, we need to create a new GitHub Actions workflow that will check if the user who is trying to merge the PR has the permission to do so.
Step 1: Create a new GitHub Actions workflow
To create a new GitHub Actions workflow, we need to create a new file in the .github/workflows directory. This file will contain the configuration for our workflow.
name: Merge PR
on:
pull_request:
branches:
- main
jobs:
merge:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Check if user has permission to merge PR
run: |
if [ $(git config --get user.name) != "username" ]; then
echo "User does not have permission to merge PR"
exit 1
fi
This workflow will check if the user who is trying to merge the PR has the permission to do so. If the user does not have the permission, the workflow will exit with a non-zero status code.
Find a good unit testing component library
There are many unit testing component libraries available, including Jest, Mocha, and Cypress. In this article, we will use Jest as an example.
Step 1: Install Jest
To install Jest, we need to run the following command:
npm install --save-dev jest
Step 2: Configure Jest
To configure Jest, we need to create a new file called jest.config.js. This file will contain the configuration for Jest.
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
collectCoverage: true,
coverageDirectory: 'coverage',
coverageReporters: ['json', 'text', 'lcov', 'clover'],
};
This configuration will tell Jest to use the ts-jest preset, run the tests in a jsdom environment, and collect coverage data.
Step 3: Write unit tests
To write unit tests, we need to create a new file called components/HelloWorld.test.js. This file will contain the unit tests for the HelloWorld component.
import React from 'react';
import { render } from '@testing-library/react';
import HelloWorld from './HelloWorld';
describe('HelloWorld', () => {
it('renders correctly', () => {
const { getByText } = render(<HelloWorld />);
expect(getByText('Hello World')).toBeInTheDocument();
});
});
This unit test will check if the HelloWorld component renders correctly.
Setup linting and unit testing components
To setup linting and unit testing components, we need to install the following packages:
npm install --save-dev eslint eslint-plugin-react eslint-plugin-jest
We also need to create a new file called .eslintrc.json. This file will contain the configuration for ESLint.
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended", "plugin:jest/recommended"],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"react/jsx-props-no-spreading": "off",
"react/jsx-uses-vars": "off"
}
}
This configuration will tell ESLint to use the react and jest plugins, and to disable the jsx-props-no-spreading and jsx-uses-vars rules.
Step 1: Create a new ESLint configuration file
To create a new ESLint configuration file, we need to run the following command:
npx eslint --init
This will create a new ESLint configuration file called .eslintrc.json.
Step 2: Configure ESLint
To configure ESLint, we need to add the following configuration to the .eslintrc.json file:
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended", "plugin:jest/recommended"],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"react/jsx-props-no-spreading": "off",
"react/jsx-uses-vars": "off"
}
}
This configuration will tell ESLint to use the react and jest plugins, and to disable the jsx-props-no-spreading and jsx-uses-vars rules.
Step 3: Run ESLint
To run ESLint, we need to run the following command:
npx eslint .
This will run ESLint on the entire project.
Setup pre-commit
To setup pre-commit, we need to install the following package:
npm install --save-dev husky
We also need to create a new file called .huskyrc.json. This file will contain the configuration for Husky.
{
"hooks": {
"pre-commit": "npm run test"
}
}
This configuration will tell Husky to run the test script before committing any changes.
Conclusion
Q: What is the purpose of unit testing in a project?
A: Unit testing is a software testing method by which individual units of source code, sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures, are tested to determine whether they are fit for use.
Q: What is GitHub Actions and how does it work?
A: GitHub Actions is a continuous integration and continuous deployment (CI/CD) tool that allows developers to automate their build, test, and deployment processes. It works by running a series of automated tasks, called "actions," on a developer's code whenever a change is made to the code.
Q: How do I configure GitHub Actions to run on every PR?
A: To configure GitHub Actions to run on every PR, you need to create a new file in the .github/workflows directory. This file will contain the configuration for your workflow. You can use the following YAML code as a starting point:
name: CI
on:
pull_request:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Run tests
run: npm run test
Q: How do I ensure that only PRs from a separate branch can be merged?
A: To ensure that only PRs from a separate branch can be merged, you need to set up a branch protection rule in GitHub. You can do this by going to the repository settings and clicking on the "Branches" tab. Then, you need to click on the "Add rule" button and select the branch that you want to protect.
Q: How do I configure who can merge PRs?
A: To configure who can merge PRs, you need to go to the repository settings and click on the "Members" tab. Then, you need to click on the "Add member" button and select the users that you want to give the permission to merge PRs.
Q: What is the purpose of linting in a project?
A: Linting is a process of checking code for errors and warnings. It helps to catch errors and improve code quality.
Q: How do I set up linting in a project?
A: To set up linting in a project, you need to install a linter such as ESLint. You can do this by running the following command:
npm install --save-dev eslint
You also need to create a new file called .eslintrc.json. This file will contain the configuration for ESLint.
Q: How do I configure ESLint to use the react and jest plugins?
A: To configure ESLint to use the react and jest plugins, you need to add the following configuration to the .eslintrc.json file:
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended", "plugin:jest/recommended"],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"react/jsx-props-no-spreading": "off",
"react/jsx-uses-vars": "off"
}
}
Q: How do I set up pre-commit in a project?
A: To set up pre-commit in a project, you need to install the husky package. You can do this by running the following command:
npm install --save-dev husky
You also need to create a new file called .huskyrc.json. This file will contain the configuration for Husky.
Q: How do I configure Husky to run the test script before committing any changes?
A: To configure Husky to run the test script before committing any changes, you need to add the following configuration to the .huskyrc.json file:
{
"hooks": {
"pre-commit": "npm run test"
}
}
Conclusion
In this Q&A article, we covered the process of adding unit testing and GitHub Actions to a project, as well as configuring the GitHub repository settings to ensure that only mergeable pull requests are accepted. We also covered setting up a good unit testing component library, linting and unit testing components, and pre-commit setup. By following these steps, we can ensure that our project is well-tested and that only high-quality code is merged into the main branch.