Setup automatic build & test for PRs to the main branch using github flow

.github/workflows/ci.yml

@@ -1,8 +1,12 @@
 # Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: CI Workflow
 
 on:
-  # Runs on pushes targeting the default branch
+  # Runs on pull requests targeting the main branch
+  pull_request:
+    branches: ["main"]
+
+  # Runs on push to the main branch
   push:
     branches: ["main"]
 
@@ -24,6 +28,7 @@ concurrency:
 jobs:
   # Single deploy job since we're just deploying
   deploy:
+    if: github.event_name == 'push'
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
@@ -45,3 +50,17 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
+
+  # Job for running tests
+  test:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+      - run: bun install
+      - run: bun run build
+      - name: Run Tests
+        run: bun run test

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "i18next": "^23.16.4",
@@ -19,6 +20,9 @@
     "react-i18next": "^15.1.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/jsdom": "^21.1.7",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -28,8 +32,10 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "jsdom": "^26.0.0",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vitest": "^3.0.0"
   }
 }

src/App.test.tsx

@@ -0,0 +1,11 @@
+
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import App from './App';
+
+test('renders without crashing', async () => {
+  render(<App />);
+  const linkElement = screen.getByTestId('title');
+  expect(document.body).toContainElement(linkElement);
+});