Add Jest tests for React frontend

frontend/README.md

@@ -10,3 +10,15 @@ Currently, two official plugins are available:
 ## Expanding the ESLint configuration
 
 If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+
+
+## Tests
+
+Das Frontend enthält Jest-Tests mit React Testing Library.
+
+```bash
+npm install
+npm test -- --runInBand
+```
+
+Die dokumentierten Testergebnisse stehen in [`TEST_RESULTS.md`](./TEST_RESULTS.md).

frontend/TEST_RESULTS.md

@@ -0,0 +1,57 @@
+# Testergebnisse React-Frontend
+
+Datum: 05.06.2026
+Bereich: `frontend`
+Testframework: Jest + React Testing Library
+
+## Ausgeführte Befehle
+
+```bash
+cd frontend
+npm test -- --runInBand
+npm run lint
+npm run build
+```
+
+## Ergebnis
+
+| Prüfung | Ergebnis |
+|---|---:|
+| Jest Test Suites | 1 passed, 1 total |
+| Jest Tests | 3 passed, 3 total |
+| Snapshots | 0 total |
+| ESLint | erfolgreich, keine Fehler |
+| Vite Build | erfolgreich |
+
+## Getestete Funktionen
+
+1. **Aufgaben laden**
+   - Mockt `GET http://localhost:8080/tasks`.
+   - Prüft, ob offene und erledigte Aufgaben korrekt angezeigt werden.
+
+2. **Neue Aufgabe erstellen**
+   - Mockt initiales Laden, `POST http://localhost:8080/tasks` und erneutes Laden.
+   - Prüft, ob die richtige JSON-Payload gesendet wird.
+   - Prüft, ob die neue Aufgabe danach in der Liste erscheint.
+
+3. **Leere Eingabe verhindern**
+   - Prüft, ob bei leerem Formular eine Fehlermeldung angezeigt wird.
+   - Prüft, dass kein zusätzlicher POST-Request ausgelöst wird.
+
+## Konsolenausgabe
+
+```text
+PASS src/App.test.jsx
+  App
+    ✓ lädt Aufgaben vom Backend und zeigt sie in der Liste an
+    ✓ legt eine neue Aufgabe per POST an und lädt die Liste danach neu
+    ✓ zeigt eine Fehlermeldung, wenn eine leere Aufgabe abgesendet wird
+
+Test Suites: 1 passed, 1 total
+Tests:       3 passed, 3 total
+Snapshots:   0 total
+```
+
+## Bemerkung
+
+Die Tests verwenden gemockte `fetch`-Antworten. Dadurch sind sie unabhängig vom Spring-Boot-Backend und können lokal oder in einer CI-Pipeline stabil ausgeführt werden.

frontend/babel.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        ['@babel/preset-env', { targets: { node: 'current' } }],
+        ['@babel/preset-react', { runtime: 'automatic' }]
+    ]
+}

frontend/eslint.config.js

@@ -4,7 +4,7 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 
 export default [
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'coverage'] },
   {
     files: ['**/*.{js,jsx}'],
     languageOptions: {
@@ -30,4 +30,14 @@ export default [
       ],
     },
   },
+  {
+    files: ['**/*.test.{js,jsx}', 'src/setupTests.js'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.jest,
+        ...globals.node,
+      },
+    },
+  },
 ]

frontend/jest.config.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+    transform: {
+        '^.+\\.[jt]sx?$': 'babel-jest'
+    },
+    moduleNameMapper: {
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+        '\\.(svg|png|jpg|jpeg|gif|webp)$': '<rootDir>/src/__mocks__/fileMock.js'
+    }
+}