Fix unit tests

WordPress · Apr 1, 2022 · 9c504f7 · 9c504f7
1 parent 9ab44f2
commit 9c504f7
Show file tree

Hide file tree

Showing 44 changed files with 1,571 additions and 1,690 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -110,7 +110,7 @@
 		"@storybook/manager-webpack5": "6.4.9",
 		"@storybook/react": "6.4.9",
 		"@testing-library/jest-dom": "5.16.1",
-		"@testing-library/react": "11.2.2",
+		"@testing-library/react": "13.0.0-alpha.6",
 		"@testing-library/react-native": "9.0.0",
 		"@testing-library/user-event": "^14.0.0-beta.13",
 		"@types/classnames": "2.3.1",

diff --git a/packages/block-editor/src/components/block-edit/test/edit.js b/packages/block-editor/src/components/block-edit/test/edit.js
@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import { noop } from 'lodash';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -91,13 +92,13 @@ describe( 'Edit', () => {
 			save: noop,
 		} );
 
-		const wrapper = mount(
+		const { container } = render(
 			<BlockContextProvider value={ { value: 'Ok' } }>
 				<Edit name="core/test-block" />
 			</BlockContextProvider>
 		);
 
-		expect( wrapper.html() ).toBe( 'Ok' );
+		expect( container.innerHTML ).toBe( 'Ok' );
 	} );
 
 	describe( 'light wrapper', () => {
@@ -112,13 +113,13 @@ describe( 'Edit', () => {
 				save: noop,
 			} );
 
-			const wrapper = mount(
+			const { container } = render(
 				<BlockContextProvider value={ { value: 'Ok' } }>
 					<Edit name="core/test-block" />
 				</BlockContextProvider>
 			);
 
-			expect( wrapper.html() ).toBe( 'Ok' );
+			expect( container.innerHTML ).toBe( 'Ok' );
 		} );
 	} );
 } );
diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -1,15 +1,13 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { DOWN } from '@wordpress/keycodes';
-import { Button } from '@wordpress/components';
 import { copy } from '@wordpress/icons';
 
 /**
@@ -156,80 +154,4 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 		);
 		expect( wrapper ).toMatchSnapshot();
 	} );
-
-	describe( 'Dropdown', () => {
-		beforeAll( () => {
-			useSelect.mockImplementation( () => ( {
-				possibleBlockTransformations: [
-					{ name: 'core/paragraph', frecency: 3 },
-				],
-				canRemove: true,
-			} ) );
-		} );
-		const getDropdown = () =>
-			mount(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			).find( 'Dropdown' );
-
-		test( 'should dropdown exist', () => {
-			expect( getDropdown() ).toHaveLength( 1 );
-		} );
-
-		describe( '.renderToggle', () => {
-			const onToggleStub = jest.fn();
-			const mockKeyDown = {
-				preventDefault: () => {},
-				keyCode: DOWN,
-			};
-
-			afterEach( () => {
-				onToggleStub.mockReset();
-			} );
-
-			test( 'should simulate a keydown event, which should call onToggle and open transform toggle.', () => {
-				const toggleClosed = mount(
-					getDropdown().props().renderToggle( {
-						onToggle: onToggleStub,
-						isOpen: false,
-					} )
-				);
-				const iconButtonClosed = toggleClosed.find( Button );
-
-				iconButtonClosed.simulate( 'keydown', mockKeyDown );
-
-				expect( onToggleStub ).toHaveBeenCalledTimes( 1 );
-			} );
-
-			test( 'should simulate a click event, which should call onToggle.', () => {
-				const toggleOpen = mount(
-					getDropdown().props().renderToggle( {
-						onToggle: onToggleStub,
-						isOpen: true,
-					} )
-				);
-				const iconButtonOpen = toggleOpen.find( Button );
-
-				iconButtonOpen.simulate( 'keydown', mockKeyDown );
-
-				expect( onToggleStub ).toHaveBeenCalledTimes( 0 );
-			} );
-		} );
-
-		describe( '.renderContent', () => {
-			test( 'should create the transform items for the chosen block. A heading block will have 3 items', () => {
-				const onCloseStub = jest.fn();
-				const content = shallow(
-					<div>
-						{ getDropdown()
-							.props()
-							.renderContent( { onClose: onCloseStub } ) }
-					</div>
-				);
-				const blockList = content.find( 'BlockTransformationsMenu' );
-				expect(
-					blockList.prop( 'possibleBlockTransformations' )
-				).toHaveLength( 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
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
+import { render, act, fireEvent } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -38,14 +39,21 @@ describe( 'createCustomColorsHOC', () => {
 
 		const setAttributes = jest.fn();
 
-		const wrapper = mount(
-			<EnhancedComponent
-				attributes={ { backgroundColor: null } }
-				setAttributes={ setAttributes }
-			/>
-		);
+		let container;
+		act( () => {
+			container = render(
+				<EnhancedComponent
+					attributes={ { backgroundColor: null } }
+					setAttributes={ setAttributes }
+				/>
+			).container;
+		} );
+
+		act( () => {
+			const button = container.querySelector( 'button' );
+			fireEvent.click( button );
+		} );
 
-		wrapper.find( 'button' ).simulate( 'click' );
 		expect( setAttributes ).toHaveBeenCalledWith( {
 			backgroundColor: 'red',
 			customBackgroundColor: undefined,
@@ -66,14 +74,20 @@ describe( 'createCustomColorsHOC', () => {
 
 		const setAttributes = jest.fn();
 
-		const wrapper = mount(
-			<EnhancedComponent
-				attributes={ { backgroundColor: null } }
-				setAttributes={ setAttributes }
-			/>
-		);
+		let container;
+		act( () => {
+			container = render(
+				<EnhancedComponent
+					attributes={ { backgroundColor: null } }
+					setAttributes={ setAttributes }
+				/>
+			).container;
+		} );
+		act( () => {
+			const button = container.querySelector( 'button' );
+			fireEvent.click( button );
+		} );
 
-		wrapper.find( 'button' ).simulate( 'click' );
 		expect( setAttributes ).toHaveBeenCalledWith( {
 			backgroundColor: undefined,
 			customBackgroundColor: '000000',