Setting Up Angular and React Testing with Jest and Cypress

Testing is a crucial part of modern web development, ensuring applications function correctly and remain stable over time. In this guide, we will explore how to set up and implement testing for Angular and React applications using Jest for unit tests and Cypress for end-to-end (E2E) testing. Additionally, we will automate the testing workflow using GitHub Actions.

By the end of this guide, you will be able to:

• Use Jest for unit testing in both Angular and React projects
• Implement Cypress for E2E testing
• Automate testing with GitHub Actions

---

1. Setting Up Jest for Unit Testing

1.1 Installing Jest in Angular

To install Jest in an Angular project, run:

ng add @briebug/jest-schematic

Update angular.json to use Jest instead of Karma:

"test": {
  "builder": "@angular-builders/jest:run"
}

Run tests using:

npm run test

1.2 Installing Jest in React

For React applications, install Jest with:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

Update package.json:

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

Run tests with:

npm test

---

2. Implementing E2E Tests with Cypress

2.1 Installing Cypress in Angular

Install Cypress using:

npm install cypress --save-dev

Update package.json:

"scripts": {
  "e2e": "cypress open"
}

Run Cypress:

npm run e2e

2.2 Installing Cypress in React

For React, install Cypress with:

npm install cypress --save-dev

Run Cypress tests:

npx cypress open

Create a test in cypress/integration/test.spec.js:

describe('My First Test', () => {
  it('Visits the App', () => {
    cy.visit('http://localhost:3000');
    cy.contains('Welcome');
  });
});

---

3. Automating Tests with GitHub Actions

3.1 Setting Up GitHub Actions for Angular

Create .github/workflows/test.yml:

name: Angular Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm run test

3.2 Setting Up GitHub Actions for React

Create .github/workflows/test.yml:

name: React Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test

---

Conclusion

In this guide, we covered:

• Setting up Jest for unit testing in Angular and React
• Implementing Cypress for end-to-end testing
• Automating tests using GitHub Actions

By integrating these testing tools, you can improve application reliability and streamline the development process. Happy testing!