fix(tooling): fix jest setup for UI testing (#460)

Author: Shreyas281299

.babelrc.js

@@ -74,7 +74,7 @@ jobs:
         run: yarn workspace @webex/widgets run build:src
 
       - name: Build cc widgets
-        run: yarn run build
+        run: yarn run build:prod
 
       - name: Cache Distributables
         uses: actions/cache@v4

.github/workflows/deploy.yml

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}, modules: 'commonjs'}], // Transform to CommonJS
+    ['@babel/preset-react', {runtime: 'automatic'}],
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-transform-runtime', // Optional: For optimized helpers
+  ],
+};

babel.config.js

@@ -0,0 +1,20 @@
+const path = require('path');
+
+module.exports = {
+  rootDir: '.',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    '^.+\\.(css|less|scss)$': 'babel-jest',
+  },
+  testEnvironment: 'jsdom',
+  testMatch: ['**/tooling/tests/**/*.js'],
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@momentum-design/components|@momentum-ui/react-collaboration|@lit|lit|cheerio))',
+  ],
+  // Use babel-jest or ts-jest depending on your setup
+  transform: {
+    '\\.[jt]sx?$': 'babel-jest',
+    '\\.[jt]s?$': 'babel-jest',
+  },
+  moduleDirectories: ['node_modules', 'src'],
+};

jest.config.js

@@ -0,0 +1,15 @@
+// Mock canvas methods to prevent errors in tests
+// This is a workaround for the fact that JSDOM does not support canvas methods like getContext.
+import 'jest-canvas-mock';
+
+// Web components used in @momentum-design imports rely on browser-only APIs like attachInternals.
+// Jest (via JSDOM) doesn't support these, causing runtime errors in tests.
+// We mock these methods on HTMLElement to prevent test failures.
+window.HTMLElement.prototype.attachInternals = function () {
+  return {
+    setValidity: () => {},
+    checkValidity: () => true,
+    reportValidity: () => true,
+    setFormValue: () => {},
+  };
+};

jest.setup.js

@@ -18,12 +18,14 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.1",
     "@testing-library/react-hooks": "^8.0.1",
+    "babel-jest": "^29.7.0",
     "crypto-browserify": "^3.12.1",
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "jest": "29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "node-gyp": "^10.2.0",
     "os-browserify": "^0.3.0",
     "process": "^0.11.10",
@@ -62,10 +64,5 @@
     "release:widgets": "semantic-release",
     "postinstall": "husky install",
     "prepare": "husky"
-  },
-  "jest": {
-    "testMatch": [
-      "**/tooling/tests/*.js"
-    ]
   }
 }

package.json

@@ -0,0 +1,3 @@
+const baseConfig = require('../../../babel.config.js');
+
+module.exports = baseConfig;

packages/contact-center/cc-components/.babelrc.js

@@ -0,0 +1,6 @@
+const jestConfig = require('../../../jest.config.js');
+
+jestConfig.rootDir = '../../../';
+jestConfig.testMatch = ['**/cc-components/tests/**/*.ts', '**/cc-components/tests/**/*.tsx'];
+
+module.exports = jestConfig;

packages/contact-center/cc-components/bable.config.js

@@ -38,7 +38,6 @@
     "@testing-library/react": "16.0.1",
     "@types/jest": "29.5.14",
     "@types/react-test-renderer": "18",
-    "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "eslint": "^9.20.1",
     "eslint-config-prettier": "^10.0.1",
@@ -60,19 +59,9 @@
     "webpack-cli": "5.1.4",
     "webpack-merge": "6.0.1"
   },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "testMatch": [
-      "**/tests/**/*.ts",
-      "**/tests/**/*.tsx"
-    ],
-    "moduleNameMapper": {
-      "^.+\\.(css|less|scss)$": "babel-jest"
-    }
-  },
   "peerDependencies": {
     "@momentum-ui/react-collaboration": ">=26.197.0",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   }
-}
+}