diff --git a/src/components/ColorPicker/colorPicker.test.ts b/src/components/ColorPicker/colorPicker.test.ts
deleted file mode 100644
index 735477c9c..000000000
--- a/src/components/ColorPicker/colorPicker.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ColorPaletteCustom } from '../../colors';
-import { getColorNameAndShadeFromColor } from './colorPickerUtils';
-
-test('getColorNameAndShadeFromColor returns null when no matching color is found', () => {
-    // Arrange
-    const palette: ColorPaletteCustom = {
-      green: '#00FF00',
-      orange: '#E07C24',
-    };
-    const color = '#FF6666';
-  
-    // Act
-    const result = getColorNameAndShadeFromColor({ palette, color });
-  
-    // Assert
-    expect(result).toBeNull();
-});  
\ No newline at end of file
diff --git a/src/components/ColorPicker/colorPicker.test.tsx b/src/components/ColorPicker/colorPicker.test.tsx
new file mode 100644
index 000000000..cb44c2eba
--- /dev/null
+++ b/src/components/ColorPicker/colorPicker.test.tsx
@@ -0,0 +1,34 @@
+import { ColorPaletteCustom } from "../../colors";
+import {
+  getColorNameAndShadeFromColor,
+  colorPickerHotkeyBindings,
+} from "./colorPickerUtils";
+import { render, screen } from "@testing-library/react";
+
+test("getColorNameAndShadeFromColor returns null when no matching color is found", () => {
+  const palette: ColorPaletteCustom = {
+    green: "#00FF00",
+    orange: "#E07C24",
+  };
+  const color = "#FF6666";
+
+  const result = getColorNameAndShadeFromColor({ palette, color });
+
+  expect(result).toBeNull();
+});
+
+describe('colorPickerHotkeyBindings', () => {
+  test('renders all hotkey bindings', () => {
+    render(
+      <div>
+        <h1>{colorPickerHotkeyBindings.join(',')}</h1>
+      </div>
+    );
+
+    colorPickerHotkeyBindings.forEach((hotkey) => {
+      const hotkeyElement = screen.getByText(hotkey);
+      expect(hotkeyElement).toBeInTheDocument();
+    });
+  });
+});
+