diff --git a/packages/block-editor/src/components/colors/test/__snapshots__/with-colors.js.snap b/packages/block-editor/src/components/colors/test/__snapshots__/with-colors.js.snap
deleted file mode 100644
index 9a99ff083e73b3..00000000000000
--- a/packages/block-editor/src/components/colors/test/__snapshots__/with-colors.js.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`createCustomColorsHOC provides the wrapped component with color values and setter functions as props 1`] = `
-
-`;
diff --git a/packages/block-editor/src/components/colors/test/with-colors.js b/packages/block-editor/src/components/colors/test/with-colors.js
index fefc3c68527d99..dc1efe7e386dad 100644
--- a/packages/block-editor/src/components/colors/test/with-colors.js
+++ b/packages/block-editor/src/components/colors/test/with-colors.js
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* Internal dependencies
@@ -13,18 +14,37 @@ describe( 'createCustomColorsHOC', () => {
const withCustomColors = createCustomColorsHOC( [
{ name: 'Red', slug: 'red', color: 'ff0000' },
] );
- const EnhancedComponent = withCustomColors( 'backgroundColor' )( () => (
-
- ) );
+ const BaseComponent = jest.fn( () => );
+ const EnhancedComponent =
+ withCustomColors( 'backgroundColor' )( BaseComponent );
- const wrapper = shallow(
+ render(
);
- expect( wrapper.dive() ).toMatchSnapshot();
+ expect( BaseComponent ).toHaveBeenCalledWith(
+ expect.objectContaining( {
+ attributes: {
+ backgroundColor: null,
+ },
+ backgroundColor: {
+ class: undefined,
+ color: undefined,
+ },
+ colorUtils: {
+ getMostReadableColor: expect.any( Function ),
+ },
+ colors: undefined,
+ setBackgroundColor: expect.any( Function ),
+ } ),
+ expect.anything()
+ );
} );
- it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', () => {
+ it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', async () => {
+ const user = userEvent.setup( {
+ advanceTimers: jest.advanceTimersByTime,
+ } );
const withCustomColors = createCustomColorsHOC( [
{ name: 'Red', slug: 'red', color: 'ff0000' },
] );
@@ -38,21 +58,25 @@ describe( 'createCustomColorsHOC', () => {
const setAttributes = jest.fn();
- const wrapper = mount(
+ render(
);
- wrapper.find( 'button' ).simulate( 'click' );
+ await user.click( screen.getByRole( 'button' ) );
+
expect( setAttributes ).toHaveBeenCalledWith( {
backgroundColor: 'red',
customBackgroundColor: undefined,
} );
} );
- it( 'setting the color to a value not in the provided custom color array updates customBackgroundColor attribute', () => {
+ it( 'setting the color to a value not in the provided custom color array updates customBackgroundColor attribute', async () => {
+ const user = userEvent.setup( {
+ advanceTimers: jest.advanceTimersByTime,
+ } );
const withCustomColors = createCustomColorsHOC( [
{ name: 'Red', slug: 'red', color: 'ff0000' },
] );
@@ -66,14 +90,15 @@ describe( 'createCustomColorsHOC', () => {
const setAttributes = jest.fn();
- const wrapper = mount(
+ render(
);
- wrapper.find( 'button' ).simulate( 'click' );
+ await user.click( screen.getByRole( 'button' ) );
+
expect( setAttributes ).toHaveBeenCalledWith( {
backgroundColor: undefined,
customBackgroundColor: '000000',