From b7d2a9d23c498b3333b507b28f232a79cf4e089e Mon Sep 17 00:00:00 2001
From: Karen Grigoryan <karen.grigoryan@elastic.co>
Date: Sun, 5 Jan 2025 12:45:05 +0100
Subject: [PATCH] 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
---
 .../jest/babel-transformer.js                 | 25 +++++++++
 .../public/common/mock/test_providers.tsx     | 54 ++++++++++---------
 .../public/overview/jest.config.js            |  8 +++
 3 files changed, 62 insertions(+), 25 deletions(-)
 create mode 100644 x-pack/solutions/security/plugins/security_solution/jest/babel-transformer.js

diff --git a/x-pack/solutions/security/plugins/security_solution/jest/babel-transformer.js b/x-pack/solutions/security/plugins/security_solution/jest/babel-transformer.js
new file mode 100644
index 0000000000000..d72b0ff2f1521
--- /dev/null
+++ b/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]',
+      },
+    ],
+  ],
+});
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/mock/test_providers.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/mock/test_providers.tsx
index c4525faf3b316..7414e3c1c2de3 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/mock/test_providers.tsx
+++ b/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>
   );
 };
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/overview/jest.config.js b/x-pack/solutions/security/plugins/security_solution/public/overview/jest.config.js
index b7348132cd6af..cf25241bf13f3 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/overview/jest.config.js
+++ b/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',
+  },
 };