Update Emotion dependencies (main)

package.json

@@ -146,11 +146,11 @@
     "@elastic/search-ui": "1.24.1",
     "@elastic/search-ui-app-search-connector": "1.24.1",
     "@elastic/search-ui-engines-connector": "1.24.1",
-    "@emotion/cache": "11.11.0",
-    "@emotion/css": "11.11.0",
-    "@emotion/react": "11.11.1",
-    "@emotion/serialize": "1.1.2",
-    "@emotion/styled": "11.11.0",
+    "@emotion/cache": "11.14.0",
+    "@emotion/css": "11.13.5",
+    "@emotion/react": "11.14.0",
+    "@emotion/serialize": "1.3.3",
+    "@emotion/styled": "11.14.1",
     "@faker-js/faker": "9.7.0",
     "@formatjs/icu-messageformat-parser": "2.11.1",
     "@formatjs/intl": "2.10.2",

src/core/packages/overlays/browser-internal/src/banners/banners_list.test.tsx

@@ -43,7 +43,7 @@ describe('BannersList', () => {
       </Wrapper>
     );
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"0\\" data-test-subj=\\"global-banner-item\\" class=\\"css-rhtlbg-BannerItem\\"><h1>Hello!</h1></div></div>"`
+      `"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"0\\" data-test-subj=\\"global-banner-item\\" class=\\"css-1y3glo5\\"><h1>Hello!</h1></div></div>"`
     );
   });
 
@@ -92,7 +92,7 @@ describe('BannersList', () => {
 
     // Two new banners should be rendered
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"1\\" data-test-subj=\\"global-banner-item\\" class=\\"css-rhtlbg-BannerItem\\"><h1>First Banner!</h1></div><div data-test-priority=\\"0\\" data-test-subj=\\"global-banner-item\\" class=\\"css-rhtlbg-BannerItem\\"><h1>Second banner!</h1></div></div>"`
+      `"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"1\\" data-test-subj=\\"global-banner-item\\" class=\\"css-1y3glo5\\"><h1>First Banner!</h1></div><div data-test-priority=\\"0\\" data-test-subj=\\"global-banner-item\\" class=\\"css-1y3glo5\\"><h1>Second banner!</h1></div></div>"`
     );
     // Original banner should be unmounted
     expect(unmount).toHaveBeenCalled();

src/platform/packages/shared/kbn-css-utils/public/use_memo_css.ts

@@ -8,7 +8,7 @@
  */
 
 import { useMemo } from 'react';
-import type { CSSInterpolation } from '@emotion/css';
+import type { CSSInterpolation } from '@emotion/serialize';
 import type { UseEuiTheme } from '@elastic/eui';
 import { useEuiTheme } from '@elastic/eui';
 

src/platform/packages/shared/kbn-test/jest-preset.js

@@ -96,6 +96,7 @@ module.exports = {
   snapshotSerializers: [
     '<rootDir>/src/platform/packages/shared/react/kibana_mount/test_helpers/react_mount_serializer.ts',
     'enzyme-to-json/serializer',
+    '<rootDir>/src/platform/packages/shared/kbn-test/src/jest/setup/enzyme_emotion_serializer.js',
     '<rootDir>/src/platform/packages/shared/kbn-test/src/jest/setup/emotion.js',
   ],
 

src/platform/packages/shared/kbn-test/src/jest/setup/enzyme_emotion_serializer.js

@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/**
+ * Custom serializer to handle Emotion-styled components in Enzyme shallow renders.
+ * This runs AFTER enzyme-to-json to clean up Emotion's internal structures.
+ *
+ * The problem: When using Enzyme's shallow() with Emotion-styled components (Emotion 11.12+),
+ * the component's internal structure (ForwardRef with __EMOTION_TYPE_PLEASE_DO_NOT_USE__)
+ * gets exposed in snapshots. This serializer transforms them back to the original component name.
+ *
+ * Example: <ForwardRef __EMOTION_TYPE_PLEASE_DO_NOT_USE__="dl"> → <dl>
+ */
+
+module.exports = {
+  test(val) {
+    // After enzyme-to-json, match plain objects that represent Emotion's ForwardRef wrappers
+
+    // Skip if not an object
+    if (!val || typeof val !== 'object') {
+      return false;
+    }
+
+    // Must have type and props (enzyme-to-json output structure)
+    if (!val.type || !val.props || typeof val.props !== 'object') {
+      return false;
+    }
+
+    // CRITICAL: Only match if this is a ForwardRef with Emotion's internal property
+    // This is the specific structure from Emotion 11.12+ after enzyme-to-json processes it
+    if (val.type === 'ForwardRef' && val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__) {
+      return true;
+    }
+
+    return false;
+  },
+  serialize(val, config, indentation, depth, refs, printer) {
+    try {
+      // Clone props and extract the original component type
+      const props = { ...val.props };
+      const originalType = props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__;
+
+      // Remove Emotion's internal property from props
+      delete props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__;
+
+      // Return the cleaned structure with the original component type
+      return printer(
+        {
+          ...val,
+          type: originalType, // Use the original type (e.g., 'dl', 'span', etc.)
+          props,
+        },
+        config,
+        indentation,
+        depth,
+        refs
+      );
+    } catch (error) {
+      // If serialization fails, fall back to printing the original value
+      // This prevents the serializer from breaking tests
+      return printer(val, config, indentation, depth, refs);
+    }
+  },
+};

src/platform/packages/shared/kbn-test/src/jest/transforms/babel/transformer_config.js

@@ -27,6 +27,8 @@ module.exports = () => ({
         [
           require.resolve('@emotion/babel-preset-css-prop'),
           {
+            // Use Babel's compile-time labeling for better test performance
+            // This is preferred over Emotion's runtime labeling via stack traces because of performance
             autoLabel: 'always',
             labelFormat: '[local]',
             sourceMap: false,