Fix test configuration and DashboardPage mock

- Use null-loader to exclude test files from webpack build
- Fix DashboardPage.test.tsx mock pattern (proper Jest hoisting)
- Fix tasksSlice.ts error handling (optional chaining)
- Update jest.config.js with proper ts-jest configuration

Author: martin

frontend/craco.config.js

@@ -7,16 +7,17 @@ module.exports = {
       // Add .vue extension to resolve
       webpackConfig.resolve.extensions.push('.vue');
 
-      // Exclude test files from webpack compilation
+      // 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)$/,
-        loader: 'ignore-loader',
+        use: 'null-loader',
       });
 
-      // Also exclude __tests__ directories
+      // Exclude __tests__ directories
       webpackConfig.module.rules.unshift({
-        test: /[\\/]__tests__[\\/]/,
-        loader: 'ignore-loader',
+        test: /[\\/]__tests__[\\/].*\.(ts|tsx|js|jsx)$/,
+        use: 'null-loader',
       });
 
       // Add vue-loader rule BEFORE the oneOf rule

frontend/jest.config.js

@@ -1,7 +1,16 @@
 module.exports = {
+  // Use jsdom test environment for React tests
   testEnvironment: 'jsdom',
   // Ensure Jest globals (describe, it, expect, jest) are available
   injectGlobals: true,
+  // Globals available in test files
+  globals: {
+    'ts-jest': {
+      tsconfig: {
+        jsx: 'react-jsx',
+      },
+    },
+  },
   // Setup files that run BEFORE test environment
   setupFiles: ['<rootDir>/src/testSetupBeforeEnv.ts'],
   // Setup files that run AFTER test environment (for DOM matchers etc.)
@@ -11,11 +20,7 @@ module.exports = {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
   transform: {
-    '^.+\\.(ts|tsx)$': ['ts-jest', {
-      tsconfig: {
-        jsx: 'react-jsx',
-      },
-    }],
+    '^.+\\.(ts|tsx)$': 'ts-jest',
     '^.+\\.(js|jsx)$': 'babel-jest',
   },
   // Transform axios and other ES modules
@@ -26,6 +31,11 @@ module.exports = {
     '**/__tests__/**/*.(ts|tsx|js)',
     '**/*.(test|spec).(ts|tsx|js)',
   ],
+  // Ignore E2E test directory
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/e2e/',
+  ],
   collectCoverageFrom: [
     'src/**/*.{ts,tsx}',
     '!src/**/*.d.ts',

frontend/package-lock.json

@@ -74,6 +74,7 @@
     "@playwright/test": "^1.40.1",
     "@vue/compiler-sfc": "^3.5.27",
     "ignore-loader": "^0.1.2",
+    "null-loader": "^4.0.1",
     "vue-loader": "^17.4.2"
   }
 }

frontend/package.json

@@ -7,18 +7,22 @@ import DashboardPage from '../DashboardPage';
 import authReducer from '../../store/slices/authSlice';
 import tasksReducer from '../../store/slices/tasksSlice';
 
-// Mock functions must be prefixed with 'mock' to be hoisted correctly
-const mockGet = jest.fn();
-const mockPost = jest.fn();
-
-// Mock axios
-jest.mock('../../api/axios', () => ({
-  __esModule: true,
-  default: {
-    get: mockGet,
-    post: mockPost,
-  },
-}));
+// Mock axios - define mock functions inside the factory
+jest.mock('../../api/axios', () => {
+  const mockAxios = {
+    get: jest.fn(),
+    post: jest.fn(),
+  };
+  return {
+    __esModule: true,
+    default: mockAxios,
+  };
+});
+
+// Import the mocked module to access mock functions
+import axiosInstance from '../../api/axios';
+const mockGet = axiosInstance.get as jest.Mock;
+const mockPost = axiosInstance.post as jest.Mock;
 
 // Mock recharts to avoid canvas issues in tests
 jest.mock('recharts', () => ({

frontend/src/pages/__tests__/DashboardPage.test.tsx

@@ -67,9 +67,9 @@ const tasksSlice = createSlice({
       })
       .addCase(fetchTasks.rejected, (state, action) => {
         console.error('Failed to fetch tasks:', action.error);
-        console.error('Error message:', action.error.message);
+        console.error('Error message:', action.error?.message);
         state.loading = false;
-        state.error = action.error.message || 'Failed to fetch tasks';
+        state.error = action.error?.message || 'Failed to fetch tasks';
       })
       .addCase(createTask.fulfilled, (state, action) => {
         state.tasks.push(action.payload);

frontend/src/store/slices/tasksSlice.ts

@@ -42,3 +42,10 @@ Object.defineProperty(global, 'sessionStorage', {
   value: new StorageMock(),
   writable: true,
 });
+
+// Ensure Jest globals are defined (they should be, but this is a safety net)
+if (typeof global.jest === 'undefined') {
+  // This should never happen in a proper Jest environment
+  // If it does, something is wrong with the test setup
+  console.warn('Jest globals not found - this file should only run in Jest');
+}