Jenkins-test

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

__mocks__/leaflet.js

@@ -0,0 +1,12 @@
+module.exports = {
+  map: () => ({
+    setView: jest.fn(),
+    addLayer: jest.fn(),
+  }),
+  tileLayer: () => ({
+    addTo: jest.fn(),
+  }),
+  marker: () => ({
+    addTo: jest.fn(),
+  }),
+};

__tests__/MapComponent.test.js

@@ -1,8 +1,40 @@
 // __tests__/MapComponent.test.js
-import { render, screen } from "@testing-library/react";
+import React from "react";
+import { render } from "@testing-library/react";
+import { RecoilRoot } from "recoil";
 import MapComponent from "../components/MapComponent";
 
-test("renders map component", () => {
-  render(<MapComponent />);
-  expect(screen.getByText("TALAS.Map")).toBeInTheDocument();
+// Mock Leaflet and its plugins
+jest.mock("leaflet", () => {
+  const leaflet = jest.requireActual("leaflet");
+  return {
+    ...leaflet,
+    map: () => ({
+      setView: jest.fn(),
+      addLayer: jest.fn(),
+    }),
+    tileLayer: () => ({
+      addTo: jest.fn(),
+    }),
+    marker: () => ({
+      addTo: jest.fn(),
+    }),
+  };
+});
+
+jest.mock("leaflet-contextmenu", () => ({}));
+
+// Mock the fetch API
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve([]), // Adjust the mock data as needed
+  })
+);
+
+test("renders map component", () => {
+  render(
+    <RecoilRoot>
+      <MapComponent />
+    </RecoilRoot>
+  );
 });

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react"],
+};

jest.config.j

@@ -1,4 +0,0 @@
-module.exports = {
-  testEnvironment: 'jsdom',
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-};

jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
+  transform: {
+    "^.+\\.(js|jsx)$": "babel-jest",
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!(@react-leaflet|react-leaflet|leaflet)/)",
+  ],
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+  },
+};

package.json

@@ -11,7 +11,7 @@
     "mysql2": "^3.10.1",
     "next": "^14.2.3",
     "overlapping-marker-spiderfier-leaflet": "^0.2.7",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",
     "react-toastify": "^10.0.5",
@@ -25,6 +25,9 @@
     "test": "jest"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/leaflet": "^1.9.12",
@@ -32,8 +35,12 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
+    "babel-jest": "^29.7.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
-    "postcss": "^8.4.38",
+    "jest-css-modules-transform": "^4.4.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.39",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.3"
   }

pages/_app.js

@@ -1,5 +1,6 @@
 // Pfad: pages/_app.js
-import { RecoilRoot } from 'recoil';
+import React from "react";
+import { RecoilRoot } from "recoil";
 import "../styles/global.css";
 
 function MyApp({ Component, pageProps }) {

pages/index.js

@@ -1,8 +1,7 @@
-// pages/index.js
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { useRecoilState, useRecoilValue } from "recoil";
-import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore"; // Aktualisiert mit atom
+import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
 import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
 
 const MapComponentWithNoSSR = dynamic(
@@ -24,14 +23,12 @@ export default function Home() {
       }
       const data = await response.json();
       setLocations(data);
-      //console.log("Geladene Daten in Home.js:", data);
     } catch (error) {
       console.error(error.message);
     }
   };
 
   useEffect(() => {
-    // URL-Parameter abfragen
     function getURLParameter(name) {
       const params = new URLSearchParams(window.location.search);
       return params.get(name);
@@ -39,10 +36,7 @@ export default function Home() {
     setMParam(getURLParameter("m"));
     setUParam(getURLParameter("u"));
 
-    // Daten beim Laden der Seite holen
     loadData();
-
-    //console.log("poiReadTrigger in Home.js:", poiReadTrigger);
   }, [poiReadTrigger]);
 
   const handleAddLocation = async (name, type, lat, lng) => {
@@ -56,8 +50,7 @@ export default function Home() {
         throw new Error("Fehler beim Hinzufügen des Standorts");
       }
       console.log("Standort erfolgreich hinzugefügt");
-      loadData(); // Aktualisiere die Daten nach dem Hinzufügen
-      console.log("poiReadTrigger in Home.js:", poiReadTrigger);
+      loadData();
     } catch (error) {
       console.error(error.message);
     }
@@ -72,13 +65,11 @@ export default function Home() {
       )
     );
   };
-  //------------------------------------
-  // Daten beim Laden der Seite holen
+
   useEffect(() => {
     loadData();
-    //console.log("poiReadTrigger in Home.js:", poiReadTrigger);
   }, [poiReadTrigger]);
-  //------------------------------------
+
   return (
     <div>
       <MapComponentWithNoSSR

setupTests.js

@@ -0,0 +1,2 @@
+// setupTests.js
+import "@testing-library/jest-dom";

tailwind.config.js

@@ -1,7 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
-  content: [],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {
       zIndex: {