Fix E2E tests: use static build server instead of dev server

- Use 'serve -s build' instead of 'npm start' for E2E tests
- This avoids webpack dev server compiling test files
- Update Playwright config to match CI setup
- Remove webServer config in CI (server started externally)

Author: martin

.github/workflows/tests.yml

@@ -203,16 +203,16 @@ jobs:
           cd frontend
           npm run build
       
-      - name: Start frontend
+      - name: Start frontend (serve static build)
         run: |
           cd frontend
-          npm start &
+          npx serve -s build -l 3000 &
       
       - name: Wait for services
         run: |
           # Wait for backend - use health endpoint (no auth required)
           timeout 120 bash -c 'until curl -sf http://localhost:8080/api/v1/health 2>/dev/null || curl -sf http://localhost:8080/actuator/health 2>/dev/null; do sleep 2; done'
-          # Wait for frontend on port 3000 (npm start default)
+          # Wait for frontend on port 3000
           timeout 120 bash -c 'until curl -sf http://localhost:3000 2>/dev/null; do sleep 2; done'
       
       - name: Run E2E tests

frontend/craco.config.js

@@ -1,24 +1,37 @@
 const { VueLoaderPlugin } = require('vue-loader');
 const webpack = require('webpack');
+const path = require('path');
 
 module.exports = {
   webpack: {
     configure: (webpackConfig) => {
       // Add .vue extension to resolve
       webpackConfig.resolve.extensions.push('.vue');
 
-      // Exclude test files from webpack compilation - use null-loader pattern
-      // This replaces test files with empty modules
-      webpackConfig.module.rules.unshift({
-        test: /\.(test|spec)\.(ts|tsx|js|jsx)$/,
-        use: 'null-loader',
-      });
-
-      // Exclude __tests__ directories
-      webpackConfig.module.rules.unshift({
-        test: /[\\/]__tests__[\\/].*\.(ts|tsx|js|jsx)$/,
-        use: 'null-loader',
-      });
+      // Completely exclude test files from webpack compilation
+      // by modifying the oneOf rules to exclude test patterns
+      if (webpackConfig.module.rules) {
+        webpackConfig.module.rules.forEach((rule) => {
+          if (rule.oneOf) {
+            // Add exclusion pattern to all oneOf rules
+            rule.oneOf.forEach((oneOfRule) => {
+              if (oneOfRule.test && !oneOfRule.exclude) {
+                oneOfRule.exclude = [];
+              }
+              if (oneOfRule.exclude && Array.isArray(oneOfRule.exclude)) {
+                oneOfRule.exclude.push(/__tests__/);
+                oneOfRule.exclude.push(/\.(test|spec)\.(ts|tsx|js|jsx)$/);
+              } else if (oneOfRule.exclude) {
+                oneOfRule.exclude = [
+                  oneOfRule.exclude,
+                  /__tests__/,
+                  /\.(test|spec)\.(ts|tsx|js|jsx)$/,
+                ];
+              }
+            });
+          }
+        });
+      }
 
       // Add vue-loader rule BEFORE the oneOf rule
       webpackConfig.module.rules.unshift({
@@ -44,6 +57,17 @@ module.exports = {
         vue: 'vue/dist/vue.esm-bundler.js',
       };
 
+      // Ignore test files in watch mode
+      webpackConfig.watchOptions = {
+        ...webpackConfig.watchOptions,
+        ignored: [
+          '**/node_modules/**',
+          '**/__tests__/**',
+          '**/*.test.*',
+          '**/*.spec.*',
+        ],
+      };
+
       return webpackConfig;
     },
   },

frontend/e2e/playwright.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
   use: {
-    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:8090',
+    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000',
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
   },
@@ -28,10 +28,12 @@ export default defineConfig({
     },
   ],
 
-  webServer: {
-    command: 'npm start',
-    url: 'http://localhost:8090',
-    reuseExistingServer: !process.env.CI,
+  // In CI, the server is started externally via 'serve -s build'
+  // Locally, use 'npx serve -s build -l 3000' to serve the built app
+  webServer: process.env.CI ? undefined : {
+    command: 'npx serve -s build -l 3000',
+    url: 'http://localhost:3000',
+    reuseExistingServer: true,
     timeout: 120 * 1000,
   },
 });