diff --git a/test/jest.config.js b/test/jest.config.js
index c726f920..242924cc 100644
--- a/test/jest.config.js
+++ b/test/jest.config.js
@@ -44,4 +44,14 @@ module.exports = {
   testPathIgnorePatterns: ['<rootDir>/build/', '<rootDir>/node_modules/'],
   transformIgnorePatterns: ['<rootDir>/node_modules'],
   globalSetup: '<rootDir>/global-setup.js',
+
+  /**
+   * This configuration specifies different file extensions 
+   * and the corresponding transformers to be used
+   */
+  transform: {
+    '\\.[jt]sx?$': 'babel-jest',
+    '^.+\\.svg$': '<rootDir>/test/mocks/transformMock.ts',
+    '^.+\\.html$': '<rootDir>/test/mocks/transformMock.ts',
+  },
 };
diff --git a/test/mocks/transformMock.ts b/test/mocks/transformMock.ts
new file mode 100644
index 00000000..ac888d71
--- /dev/null
+++ b/test/mocks/transformMock.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The transform configuration in Jest allows you to 
+ * specify custom transformation logic for specific file types during testing. 
+ */
+module.exports = {
+  /**
+   * This function is responsible for transforming the file.
+   * @returns the string module.exports = {};, which is an empty CommonJS module.
+   */
+  process() {
+    return {
+      code: `module.exports = {};`,
+    };
+  },
+  /**
+   * The cache key helps Jest determine if a file needs to be retransformed or if it can use the cached transformation result. 
+   * @returns a unique string that serves as a cache key for the transformation. 
+   */
+  getCacheKey() {
+    return 'svgTransform';
+  },
+};
\ No newline at end of file