[feature branch] Upgrade chakra to v3

packages/extension-chakra-storefront/CHANGELOG.md

@@ -4,5 +4,6 @@
 - Send PWA Kit events to Data Cloud [#318] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2229)
 - Fix dependencies vulnerabilities [#2338](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2338)
 - Fix accessibility issues [#2375](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2375)
+- Create a safe version of `<Portal>` that won't break the SSR rendering [#2785](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2785)
 
 For historical changelog, look for the original `retail-react-app` in the [release notes](https://github.com/SalesforceCommerceCloud/pwa-kit/releases).

packages/extension-chakra-storefront/jest-setup.js

@@ -144,6 +144,34 @@ jest.mock('@salesforce/cc-datacloud-typescript', () => ({
 global.TextEncoder = require('util').TextEncoder
 global.TextDecoder = require('util').TextDecoder
 
+// Add ResizeObserver polyfill for Chakra UI testing
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn()
+}))
+
+// JSDOM environment doesn't natively implement this modern Web API function.
+// Chakra v3 is using it, so we need to mock it here
+global.structuredClone = (val) => {
+    if (val === undefined) return undefined
+
+    if (val === null) return null
+
+    if (typeof val !== 'object' && typeof val !== 'function') {
+        return val
+    }
+
+    try {
+        return JSON.parse(JSON.stringify(val))
+    } catch (e) {
+        // Fallback for values that can't be JSON serialized
+        // This is a simplified version that won't handle all cases
+        // but should work for most Chakra UI scenarios
+        return {...val}
+    }
+}
+
 // This file consists of global mocks for jsdom.
 class StorageMock {
     constructor() {
@@ -201,7 +229,7 @@ const prepareHandlers = (handlerConfig = []) => {
     return handlerConfig.map((config) => {
         return rest[config.method?.toLowerCase() || 'get'](config.path, (req, res, ctx) => {
             return res(
-                ctx.delay(0),
+                ctx.delay(config.delay || 0),
                 ctx.status(config.status || 200),
                 config.res && ctx.json(config.res(req, res, ctx))
             )

packages/extension-chakra-storefront/jest.config.js

@@ -8,6 +8,10 @@
 const path = require('path')
 const base = require('@salesforce/pwa-kit-dev/configs/jest/jest.config.js')
 
+const createTestGlob = (relativePath) => {
+    return `<rootDir>/src/${relativePath}/**/*.test.{js,jsx,ts,tsx}`
+}
+
 module.exports = {
     ...base,
     moduleNameMapper: {
@@ -18,16 +22,32 @@ module.exports = {
             '<rootDir>/node_modules/@tanstack/react-query/build/modern/index.cjs',
         '^is-what$': '<rootDir>/node_modules/is-what/dist/cjs/index.cjs',
         '^copy-anything$': '<rootDir>/node_modules/copy-anything/dist/cjs/index.cjs',
-        "^@salesforce/cc-datacloud-typescript$": "<rootDir>/node_modules/@salesforce/cc-datacloud-typescript/dist/index.js",
+        '^@salesforce/cc-datacloud-typescript$':
+            '<rootDir>/node_modules/@salesforce/cc-datacloud-typescript/dist/index.js',
+        // Chakra v3 use ESM by default, but we need to use CJS for jest 27
+        '^@ark-ui/react/(.*)$': [
+            '<rootDir>/node_modules/@ark-ui/react/dist/components/$1/index.cjs',
+            '<rootDir>/node_modules/@ark-ui/react/dist/components/$1.cjs',
+            '<rootDir>/node_modules/@ark-ui/react/dist/providers/$1/index.cjs',
+            '<rootDir>/node_modules/@ark-ui/react/dist/providers/$1.cjs'
+        ],
+        '^@chakra-ui/react/(.*)$': [
+            '<rootDir>/node_modules/@chakra-ui/react/dist/cjs/$1/index.cjs',
+            '<rootDir>/node_modules/@chakra-ui/react/dist/cjs/index.cjs'
+        ],
+        '^proxy-compare$': '<rootDir>/node_modules/proxy-compare/dist/cjs/index.js',
+        '^uqr$': '<rootDir>/node_modules/uqr/dist/index.cjs',
         // handle pwa-kit extensibility special import
         '^overridable!(.*)': '$1'
     },
     setupFilesAfterEnv: [path.join(__dirname, 'jest-setup.js')],
     collectCoverageFrom: [
+        'src/**/*.{js,jsx}',
         'app/**/*.{js,jsx}',
         'non-pwa/**/*.{js,jsx}',
         'worker/**/*.{js,jsx}',
         'scripts/generator/*.{js,jsx}',
+        'src/**/*.{js,jsx}',
         '!app/pages/test-container/**/*.{js,jsx}',
         '!app/utils/test-utils.js',
         '!app/mocks/*.js',
@@ -39,6 +59,7 @@ module.exports = {
         '!node_modules/**'
     ],
     //@TODO: Revert this threshold back to original numbers stattements: 80, branches: 72, functions: 78, lines: 83
+    // TODO: Revert this threshold once we start adding tests back to the codebase
     coverageThreshold: {
         global: {
             statements: 73,