diff --git a/editor/components/color-palette/control.js b/editor/components/color-palette/control.js
index 5863a5f9e605f4..a7755eec4d25ef 100644
--- a/editor/components/color-palette/control.js
+++ b/editor/components/color-palette/control.js
@@ -16,7 +16,7 @@ import { getColorName } from '../colors';
 // translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(current %s: %s)' );
 
-const ColorPaletteControl = withColorContext( ( { label, value, onChange, colors } ) => {
+export function ColorPaletteControl( { label, value, onChange, colors } ) {
 	const colorName = getColorName( colors, value );
 	const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value );
 
@@ -43,6 +43,6 @@ const ColorPaletteControl = withColorContext( ( { label, value, onChange, colors
 			/>
 		</BaseControl>
 	);
-} );
+}
 
-export default ColorPaletteControl;
+export default withColorContext( ColorPaletteControl );
diff --git a/editor/components/color-palette/test/__snapshots__/control.js.snap b/editor/components/color-palette/test/__snapshots__/control.js.snap
new file mode 100644
index 00000000000000..0dc3d026904136
--- /dev/null
+++ b/editor/components/color-palette/test/__snapshots__/control.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorPaletteControl matches the snapshot 1`] = `
+<BaseControl
+  className="editor-color-palette-control"
+  label={
+    <React.Fragment>
+      Test Color
+      <ColorIndicator
+        aria-label="(current test color: red)"
+        colorValue="#f00"
+      />
+    </React.Fragment>
+  }
+>
+  <WithColorContext(ColorPalette)
+    className="editor-color-palette-control__color-palette"
+    onChange={[Function]}
+    value="#f00"
+  />
+</BaseControl>
+`;
diff --git a/editor/components/color-palette/test/control.js b/editor/components/color-palette/test/control.js
new file mode 100644
index 00000000000000..9d43713fb48e7b
--- /dev/null
+++ b/editor/components/color-palette/test/control.js
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { ColorPaletteControl } from '../control';
+
+describe( 'ColorPaletteControl', () => {
+	it( 'matches the snapshot', () => {
+		const wrapper = shallow(
+			<ColorPaletteControl
+				label="Test Color"
+				value="#f00"
+				colors={ [ { color: '#f00', name: 'red' } ] }
+				onChange={ noop }
+			/>
+		);
+
+		expect( wrapper ).toMatchSnapshot();
+	} );
+} );
diff --git a/editor/components/panel-color-settings/test/__snapshots__/index.js.snap b/editor/components/panel-color-settings/test/__snapshots__/index.js.snap
index 06183b8c884add..e1050e34708c36 100644
--- a/editor/components/panel-color-settings/test/__snapshots__/index.js.snap
+++ b/editor/components/panel-color-settings/test/__snapshots__/index.js.snap
@@ -19,13 +19,13 @@ exports[`PanelColorSettings matches the snapshot 1`] = `
     </span>
   }
 >
-  <WithColorContext(Component)
+  <WithColorContext(ColorPaletteControl)
     key="0"
     label="border color"
     onChange={[Function]}
     value="#000"
   />
-  <WithColorContext(Component)
+  <WithColorContext(ColorPaletteControl)
     key="1"
     label="background color"
     onChange={[Function]}