How to Integrate Fullstack Tests into a GitHub Actions Workflow
Continuous Integration and Continuous Deployment (CI/CD) have become essential in modern software development, enabling faster and more reliable code delivery. GitHub Actions is a powerful, native CI/CD tool provided by GitHub that automates workflows such as testing, building, and deploying code. When working on fullstack applications—for example, a frontend built in React and a backend in Flask or Django—it's important to integrate testing for both parts seamlessly into a GitHub Actions workflow.
In this blog, we’ll walk through how to set up fullstack testing in a GitHub Actions pipeline and share best practices to maintain a healthy CI/CD workflow.
Why Use GitHub Actions?
GitHub Actions allows you to:
Automatically run tests on every commit or pull request
Catch bugs early before code reaches production
Ensure consistency across local and production environments
Deploy only when tests pass
Project Structure Assumption
Let’s assume you have a project structured like this:
bash
/my-app
/frontend (React)
/backend (Flask or Django)
/tests
.github/workflows
Both frontend and backend have their own test suites.
Step 1: Create a GitHub Actions Workflow File
Inside your repo, navigate to .github/workflows/ and create a file called ci.yml.
yaml
name: Fullstack CI Pipeline
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
services:
postgres:
image: postgres:13
env:
POSTGRES_DB: testdb
POSTGRES_USER: user
POSTGRES_PASSWORD: password
ports:
- 5432:5432
options: >-
--health-cmd pg_isready
--health-interval 10s
--health-timeout 5s
--health-retries 5
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Set up Python
uses: actions/setup-python@v4
with:
python-version: 3.10
- name: Install backend dependencies
run: |
cd backend
pip install -r requirements.txt
- name: Run backend tests
run: |
cd backend
pytest
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install frontend dependencies
run: |
cd frontend
npm install
- name: Run frontend tests
run: |
cd frontend
npm test -- --watchAll=false
Step 2: Backend Testing (Python)
Ensure you have a requirements.txt file listing all your dependencies including pytest, and database drivers like psycopg2 if using PostgreSQL.
If you need environment variables, create a .env file and use the dotenv package to load them, or set them directly in the workflow using env: blocks.
Step 3: Frontend Testing (React)
For React apps, use Jest and React Testing Library. Ensure your package.json includes a test script like:
json
Copy
Edit
"scripts": {
"test": "react-scripts test"
}
This allows npm test -- --watchAll=false to work inside the GitHub Actions runner.
Best Practices
Fail Fast: Keep unit tests early in the workflow to catch issues quickly.
Use Caching: Cache pip and npm dependencies to speed up builds.
Split Jobs: Separate frontend and backend into different jobs for parallel execution.
Add Linting: Use ESLint and Flake8 to catch code quality issues.
Artifacts: Save test reports or coverage data for analysis.
Conclusion
Integrating fullstack tests into a GitHub Actions workflow ensures that your application is continuously validated as it's developed. By testing both frontend and backend layers together in an automated pipeline, teams can detect integration issues early, increase reliability, and streamline deployment. Whether you're working solo or in a team, CI with GitHub Actions is an indispensable part of a robust fullstack development workflow.
Learn Software Testing Tools Training Course
Read more : Using BrowserStack for Mobile Testing in Fullstack Development
Read more : How to Integrate Fullstack Tests with CI/CD Pipelines
Read more : End-to-End Testing with Selenium for Fullstack Web Applications
Comments
Post a Comment