test(color-picker-web): mock SketchPicker for better snapshot readability

Author: samuelreichert

packages/pluggableWidgets/color-picker-web/src/components/ColorPicker.tsx

@@ -54,7 +54,7 @@ export const ColorPicker = (props: ColorPickerProps): ReactElement => {
         rgba: "rgb(255,255,255,1)"
     };
     const { type, mode, disabled, defaultColors, color, format, invalidFormatMessage } = props;
-    const colorElement = getColorPicker(type);
+    const ColorElement = getColorPicker(type);
     const [hidden, setHidden] = useState(mode !== "inline");
     const [currentColor, setCurrentColor] = useState<string | undefined>(color);
     const [alertMessage, setAlertMessage] = useState<string | undefined>();
@@ -129,6 +129,7 @@ export const ColorPicker = (props: ColorPickerProps): ReactElement => {
             close: () => setColorPickerHidden(true),
             ...(isTriangleAvailable && { triangle: "hide" })
         };
+
         return (
             <div
                 className={classNames({
@@ -140,7 +141,7 @@ export const ColorPicker = (props: ColorPickerProps): ReactElement => {
                     <div className={"widget-color-picker-cover"} onClick={() => setColorPickerHidden(true)} />
                 ) : null}
                 {disabled ? <div className={"widget-color-picker-overlay"} /> : null}
-                {createElement(colorElement, { ...config })}
+                {<ColorElement {...config} />}
             </div>
         );
     };

packages/pluggableWidgets/color-picker-web/src/components/__tests__/ColorPicker.spec.tsx

@@ -4,6 +4,14 @@ import userEvent, { UserEvent } from "@testing-library/user-event";
 import { createElement } from "react";
 import { ColorPicker, ColorPickerProps } from "../ColorPicker";
 
+jest.mock("react-color/lib", () => {
+    const actualModule = jest.requireActual("react-color/lib");
+    return {
+        ...actualModule,
+        SketchPicker: () => <div className="sketch-picker" />
+    };
+});
+
 describe("ColorPicker", () => {
     let colorPickerProps: ColorPickerProps;
     let user: UserEvent;