feat: enhance jest configuration and add babel transformer

- Add a new babel transformer for jest in the security solution plugin
  to enable overview/data_quality.test.tsx to pass without compilation
  warnings
- Integrate `@emotion/babel-preset-css-prop` with custom label format
- Update `test_providers.tsx` to include `KibanaRenderContextProvider` and `coreMock`
- Modify jest configuration in `overview` to use the new babel transformer
- Ensure compatibility with existing jest preset and module name mapping

x-pack/solutions/security/plugins/security_solution/jest/babel-transformer.js

@@ -0,0 +1,25 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const babelJest = require('babel-jest');
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const rootTransformerConfig = require('@kbn/test/src/jest/transforms/babel/transformer_config');
+
+module.exports = babelJest.default.createTransformer({
+  ...rootTransformerConfig,
+  presets: [
+    ...rootTransformerConfig.presets,
+    [
+      require.resolve('@emotion/babel-preset-css-prop'),
+      {
+        labelFormat: '[filename]--[local]',
+      },
+    ],
+  ],
+});

x-pack/solutions/security/plugins/security_solution/public/common/mock/test_providers.tsx

@@ -17,6 +17,8 @@ import { ThemeProvider } from 'styled-components';
 import type { Capabilities } from '@kbn/core/public';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
+import { coreMock } from '@kbn/core/public/mocks';
 import type { Action } from '@kbn/ui-actions-plugin/public';
 import { CellActionsProvider } from '@kbn/cell-actions';
 import { TestProvider as ExpandableFlyoutTestProvider } from '@kbn/expandable-flyout/src/test/provider';
@@ -74,31 +76,33 @@ export const TestProvidersComponent = ({
   });
 
   return (
-    <I18nProvider>
-      <MockKibanaContextProvider startServices={startServices}>
-        <UpsellingProviderMock>
-          <ReduxStoreProvider store={store}>
-            <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
-              <QueryClientProvider client={queryClient}>
-                <MockDiscoverInTimelineContext>
-                  <MockAssistantProvider>
-                    <ExpandableFlyoutTestProvider>
-                      <ConsoleManager>
-                        <CellActionsProvider
-                          getTriggerCompatibleActions={() => Promise.resolve(cellActions)}
-                        >
-                          <DragDropContext onDragEnd={onDragEnd}>{children}</DragDropContext>
-                        </CellActionsProvider>
-                      </ConsoleManager>
-                    </ExpandableFlyoutTestProvider>
-                  </MockAssistantProvider>
-                </MockDiscoverInTimelineContext>
-              </QueryClientProvider>
-            </ThemeProvider>
-          </ReduxStoreProvider>
-        </UpsellingProviderMock>
-      </MockKibanaContextProvider>
-    </I18nProvider>
+    <MockKibanaContextProvider startServices={startServices}>
+      <KibanaRenderContextProvider {...coreMock.createStart()}>
+        <I18nProvider>
+          <UpsellingProviderMock>
+            <ReduxStoreProvider store={store}>
+              <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+                <QueryClientProvider client={queryClient}>
+                  <MockDiscoverInTimelineContext>
+                    <MockAssistantProvider>
+                      <ExpandableFlyoutTestProvider>
+                        <ConsoleManager>
+                          <CellActionsProvider
+                            getTriggerCompatibleActions={() => Promise.resolve(cellActions)}
+                          >
+                            <DragDropContext onDragEnd={onDragEnd}>{children}</DragDropContext>
+                          </CellActionsProvider>
+                        </ConsoleManager>
+                      </ExpandableFlyoutTestProvider>
+                    </MockAssistantProvider>
+                  </MockDiscoverInTimelineContext>
+                </QueryClientProvider>
+              </ThemeProvider>
+            </ReduxStoreProvider>
+          </UpsellingProviderMock>
+        </I18nProvider>
+      </KibanaRenderContextProvider>
+    </MockKibanaContextProvider>
   );
 };
 

x-pack/solutions/security/plugins/security_solution/public/overview/jest.config.js

@@ -5,6 +5,9 @@
  * 2.0.
  */
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+const rootConfig = require('@kbn/test/jest-preset');
+
 module.exports = {
   preset: '@kbn/test',
   rootDir: '../../../../../../..',
@@ -16,4 +19,9 @@ module.exports = {
     '<rootDir>/x-pack/solutions/security/plugins/security_solution/public/overview/**/*.{ts,tsx}',
   ],
   moduleNameMapper: require('../../server/__mocks__/module_name_map'),
+  transform: {
+    ...rootConfig.transform,
+    '^.+\\.(js|tsx?)$':
+      '<rootDir>/x-pack/solutions/security/plugins/security_solution/jest/babel-transformer.js',
+  },
 };