CI & CD in React App using Github Actions.

I am learning to write test cases for React App and for that I have built small, minimal React Login app. I thought this would be a great opportunity for me to integrate Github Actions in my project for CI pipeline.

I am using React Testing Library and Jest for testing the React App.

My Workflow

For starter I have added unit cases to my App, and using Github Action I do a test run and if all test cases passes I let user to push or merge a pull request to master.

Action Used :

• actions/checkout@v2
• actions/setup-node@v1

test.yml

name: Unit Test Run

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x, 14.x]
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: yarn install
      - run: yarn test

I will be adding following feature in future as I learn and develop :

• E2E testing using Cypress and Github Actions.
• CD pipeline using Netlify/Vercel and Github Actions

Submission Category:

Maintainer Must-Haves

In an open-source project when a good amount of PRs are being raised then automatic Test Run can be your first line of defence to avoid introduction of bugs in your project.

Project Files

dreamer01 / react-login-mock

A React login mock page with input validation and unit test cases.

Resources

Checkout this content rich post on React Testing Librarry by Robin Wieruch.

Checkout this amazing post on getting started with Github Actions by Colby Fayock.