Merge pull request #266 from patternfly/compass_theme_rm_vitest

fix: Remove vitest since it's not compatible with webpack

Author: dlabaj

jest.config.cjs

@@ -0,0 +1,20 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  testEnvironment: 'jest-environment-jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': '<rootDir>/src/test/mocks/styleMock.cjs',
+    '\\.(svg|png|jpg|jpeg|gif|ico|webp)$': '<rootDir>/src/test/mocks/fileMock.cjs',
+    '^@app/(.*)$': '<rootDir>/src/app/$1',
+    'monaco-editor': '<rootDir>/src/test/mocks/monaco-editor.ts',
+  },
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)$': ['ts-jest', { useESM: false }],
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@patternfly|react-router)/)',
+  ],
+  testMatch: ['**/__tests__/**/*.(ts|tsx|js)', '**/*.test.(ts|tsx|js)'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts', '!src/test/**'],
+};

package.json

@@ -11,9 +11,9 @@
     "build": "NODE_OPTIONS='--max-old-space-size=4096' webpack --config webpack.prod.js",
     "start": "sirv dist --cors --single --host --port 8080",
     "start:dev": "webpack serve --color --progress --config webpack.dev.js",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "eslint": "eslint --ext .tsx,.js ./src/",
     "lint": "npm run eslint",
     "format": "prettier --check --write ./src/**/*.{tsx,ts}",
@@ -25,14 +25,14 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.34.0",
     "@typescript-eslint/parser": "^8.34.0",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/coverage-v8": "^4.0.10",
+    "@types/jest": "^29.5.14",
     "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
@@ -43,7 +43,9 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "html-webpack-plugin": "^5.6.3",
     "imagemin": "^9.0.0",
-    "jsdom": "^25.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-fixed-jsdom": "^0.0.9",
     "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.4.49",
     "prettier": "^3.5.3",
@@ -56,14 +58,13 @@
     "style-loader": "^4.0.0",
     "svg-url-loader": "^8.0.0",
     "terser-webpack-plugin": "^5.3.14",
+    "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.2",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.34.0",
     "url-loader": "^4.1.1",
-    "vite": "^6.4.1",
-    "vitest": "^4.0.5",
     "webpack": "^5.97.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",

src/app/app.test.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import App from '@app/index';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, test } from 'vitest';
 
 describe('App tests', () => {
   test('should render default App component', () => {

src/test/mocks/fileMock.cjs

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

src/test/mocks/styleMock.cjs

@@ -0,0 +1 @@
+module.exports = {};

src/test/setup.ts

@@ -1,36 +1,40 @@
+import { TextDecoder, TextEncoder } from 'util';
 import '@testing-library/jest-dom';
-import { vi } from 'vitest';
+
+// Polyfill for jsdom (react-router etc. may use these)
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder as typeof global.TextDecoder;
 
 // Mock PatternFly Chatbot MessageBar to avoid monaco-editor dependency
-vi.mock('@patternfly/chatbot/dist/dynamic/MessageBar', () => ({
-  MessageBar: vi.fn(() => null),
+jest.mock('@patternfly/chatbot/dist/dynamic/MessageBar', () => ({
+  MessageBar: jest.fn(() => null),
 }));
 
 // Mock CSS imports
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: vi.fn().mockImplementation(query => ({
+  value: jest.fn().mockImplementation((query: string) => ({
     matches: false,
     media: query,
     onchange: null,
-    addListener: vi.fn(), // deprecated
-    removeListener: vi.fn(), // deprecated
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
   })),
 });
 
 // Mock ResizeObserver
 global.ResizeObserver = class ResizeObserver {
-  observe = vi.fn();
-  unobserve = vi.fn();
-  disconnect = vi.fn();
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
 };
 
 // Mock IntersectionObserver
 global.IntersectionObserver = class IntersectionObserver {
-  observe = vi.fn();
-  unobserve = vi.fn();
-  disconnect = vi.fn();
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
 } as any;