Testing: Upgrade React and Enzyme to the latest version (#3079)

blocks/test/fixtures/core__cover-image.html

@@ -1,5 +1,5 @@
 <!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
     <h2>Guten Berg!</h2>
 </section>
 <!-- /wp:core/cover-image -->

blocks/test/fixtures/core__cover-image.json

@@ -11,6 +11,6 @@
             "hasParallax": false,
             "dimRatio": 40
         },
-        "originalContent": "<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>"
+        "originalContent": "<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n    <h2>Guten Berg!</h2>\n</section>"
     }
 ]

blocks/test/fixtures/core__cover-image.parsed.json

@@ -5,7 +5,7 @@
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
             "dimRatio": 40
         },
-        "rawContent": "\n<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>\n"
+        "rawContent": "\n<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n    <h2>Guten Berg!</h2>\n</section>\n"
     },
     {
         "attrs": {},

blocks/test/fixtures/core__cover-image.serialized.html

@@ -1,5 +1,5 @@
 <!-- wp:cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
     <h2>Guten Berg!</h2>
 </section>
 <!-- /wp:cover-image -->

blocks/test/fixtures/core__paragraph__align-right.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:paragraph {"align":"right"} -->
-<p style="text-align:right;">... like this one, which is separate from the above and right aligned.</p>
+<p style="text-align:right">... like this one, which is separate from the above and right aligned.</p>
 <!-- /wp:paragraph -->

components/dropdown-menu/test/index.js

@@ -59,7 +59,7 @@ describe( 'DropdownMenu', () => {
 			const wrapper = mount( <DropdownMenu controls={ controls } /> );
 
 			// Close menu by keyup
-			wrapper.find( '.components-dropdown-menu__toggle' ).simulate( 'keydown', {
+			wrapper.find( 'button.components-dropdown-menu__toggle' ).simulate( 'keydown', {
 				stopPropagation: () => {},
 				preventDefault: () => {},
 				keyCode: DOWN,

components/dropdown/test/index.js

@@ -9,7 +9,13 @@ import { mount } from 'enzyme';
 import Dropdown from '../';
 
 describe( 'Dropdown', () => {
+	const expectPopoverOpened = ( wrapper, opened ) => expect( wrapper.find( 'Popover' ) ).toHaveProp( 'isOpen', opened );
+
 	it( 'should toggle the dropdown properly', () => {
+		const expectButtonExpanded = ( wrapper, expanded ) => {
+			expect( wrapper.find( 'button' ) ).toHaveLength( 1 );
+			expect( wrapper.find( 'button' ) ).toHaveProp( 'aria-expanded', expanded );
+		};
 		const wrapper = mount( <Dropdown
 			className="container"
 			contentClassName="content"
@@ -19,15 +25,14 @@ describe( 'Dropdown', () => {
 			renderContent={ () => null }
 		/> );
 
-		const button = wrapper.find( 'button' );
-		const popover = wrapper.find( 'Popover' );
+		expectButtonExpanded( wrapper, false );
+		expectPopoverOpened( wrapper, false );
+
+		wrapper.find( 'button' ).simulate( 'click' );
+		wrapper.update();
 
-		expect( button ).toHaveLength( 1 );
-		expect( popover.prop( 'isOpen' ) ).toBe( false );
-		expect( button.prop( 'aria-expanded' ) ).toBe( false );
-		button.simulate( 'click' );
-		expect( popover.prop( 'isOpen' ) ).toBe( true );
-		expect( button.prop( 'aria-expanded' ) ).toBe( true );
+		expectButtonExpanded( wrapper, true );
+		expectPopoverOpened( wrapper, true );
 	} );
 
 	it( 'should close the dropdown when calling onClose', () => {
@@ -41,13 +46,16 @@ describe( 'Dropdown', () => {
 			renderContent={ () => null }
 		/> );
 
-		const openButton = wrapper.find( '.open' );
-		const closeButton = wrapper.find( '.close' );
-		const popover = wrapper.find( 'Popover' );
-		expect( popover.prop( 'isOpen' ) ).toBe( false );
-		openButton.simulate( 'click' );
-		expect( popover.prop( 'isOpen' ) ).toBe( true );
-		closeButton.simulate( 'click' );
-		expect( popover.prop( 'isOpen' ) ).toBe( false );
+		expectPopoverOpened( wrapper, false );
+
+		wrapper.find( '.open' ).simulate( 'click' );
+		wrapper.update();
+
+		expectPopoverOpened( wrapper, true );
+
+		wrapper.find( '.close' ).simulate( 'click' );
+		wrapper.update();
+
+		expectPopoverOpened( wrapper, false );
 	} );
 } );

components/navigable-menu/test/index.js

@@ -18,6 +18,7 @@ const { UP, DOWN } = keycodes;
 describe( 'NavigableMenu', () => {
 	// Skipping this this because the `isVisible` check in utils/focus/tabbable.js always returns false in tests
 	// Probbably a jsdom issue
+	// eslint-disable-next-line jest/no-disabled-tests
 	it.skip( 'should navigate by keypresses', () => {
 		let currentIndex = 0;
 		const wrapper = mount( (

components/panel/test/header.js

@@ -14,7 +14,7 @@ describe( 'PanelHeader', () => {
 			const panelHeader = shallow( <PanelHeader /> );
 			expect( panelHeader.hasClass( 'components-panel__header' ) ).toBe( true );
 			expect( panelHeader.type() ).toBe( 'div' );
-			expect( panelHeader.find( 'div' ).shallow().children().length ).toBe( 0 );
+			expect( panelHeader.find( 'div' ).shallow().children() ).toHaveLength( 0 );
 		} );
 
 		it( 'should render a label matching the text provided in the prop', () => {
@@ -26,13 +26,13 @@ describe( 'PanelHeader', () => {
 
 		it( 'should render child elements in the panel header body when provided', () => {
 			const panelHeader = shallow( <PanelHeader children="Some Text" /> );
-			expect( panelHeader.instance().props.children ).toBe( 'Some Text' );
 			expect( panelHeader.text() ).toBe( 'Some Text' );
+			expect( panelHeader.find( 'div' ).shallow().children() ).toHaveLength( 1 );
 		} );
 
 		it( 'should render both child elements and label when passed in', () => {
 			const panelHeader = shallow( <PanelHeader label="Some Label" children="Some Text" /> );
-			expect( panelHeader.find( 'div' ).shallow().children().length ).toBe( 2 );
+			expect( panelHeader.find( 'div' ).shallow().children() ).toHaveLength( 2 );
 		} );
 	} );
 } );

components/panel/test/index.js

@@ -31,7 +31,6 @@ describe( 'Panel', () => {
 
 		it( 'should add additional child elements to be rendered in the panel', () => {
 			const panel = shallow( <Panel children="The Panel" /> );
-			expect( panel.instance().props.children ).toBe( 'The Panel' );
 			expect( panel.text() ).toBe( 'The Panel' );
 			expect( panel.find( 'div' ).shallow().children().length ).toBe( 1 );
 		} );

components/popover/test/index.js

@@ -262,13 +262,13 @@ describe( 'Popover', () => {
 		} );
 
 		it( 'should render content if popover is open', () => {
-			const wrapper = shallow( <Popover isOpen>Hello</Popover> );
+			const wrapper = shallow( <Popover isOpen>Hello</Popover>, { disableLifecycleMethods: true } );
 
 			expect( wrapper.type() ).not.toBeNull();
 		} );
 
 		it( 'should pass additional to portaled element', () => {
-			const wrapper = shallow( <Popover isOpen role="tooltip">Hello</Popover> );
+			const wrapper = shallow( <Popover isOpen role="tooltip">Hello</Popover>, { disableLifecycleMethods: true } );
 
 			expect( wrapper.find( '.components-popover' ).prop( 'role' ) ).toBe( 'tooltip' );
 		} );

components/tooltip/test/index.js

@@ -67,6 +67,8 @@ describe( 'Tooltip', () => {
 		} );
 
 		it( 'should show popover on delayed mouseenter', () => {
+			const expectPopoverOpened = ( wrapper, opened ) => expect( wrapper.find( 'Popover' ) ).toHaveProp( 'isOpen', opened );
+
 			// Mount: Issues with using `setState` asynchronously with shallow-
 			// rendered components: https://github.com/airbnb/enzyme/issues/450
 			const originalMouseEnter = jest.fn();
@@ -86,14 +88,13 @@ describe( 'Tooltip', () => {
 
 			expect( originalMouseEnter ).toHaveBeenCalled();
 
-			const popover = wrapper.find( 'Popover' );
 			expect( wrapper.state( 'isOver' ) ).toBe( false );
-			expect( popover.prop( 'isOpen' ) ).toBe( false );
-
+			expectPopoverOpened( wrapper, false );
 			wrapper.instance().delayedSetIsOver.flush();
+			wrapper.update();
 
 			expect( wrapper.state( 'isOver' ) ).toBe( true );
-			expect( popover.prop( 'isOpen' ) ).toBe( true );
+			expectPopoverOpened( wrapper, true );
 		} );
 
 		it( 'should ignore mouseenter on disabled elements', () => {

editor/inserter/menu.js

@@ -290,8 +290,8 @@ export class InserterMenu extends Component {
 				onClick={ this.selectBlock( block.name ) }
 				ref={ this.bindReferenceNode( block.name ) }
 				tabIndex="-1"
-				onMouseEnter={ ! disabled && this.props.showInsertionPoint }
-				onMouseLeave={ ! disabled && this.props.hideInsertionPoint }
+				onMouseEnter={ ! disabled ? this.props.showInsertionPoint : null }
+				onMouseLeave={ ! disabled ? this.props.hideInsertionPoint : null }
 				disabled={ disabled }
 			>
 				<BlockIcon icon={ block.icon } />

editor/inserter/test/menu.js

@@ -181,6 +181,7 @@ describe( 'InserterMenu', () => {
 		const blocksTab = wrapper.find( '.editor-inserter__tab' )
 			.filterWhere( ( node ) => node.text() === 'Blocks' );
 		blocksTab.simulate( 'click' );
+		wrapper.update();
 
 		const disabledBlocks = wrapper.find( '.editor-inserter__block[disabled]' );
 		expect( disabledBlocks.length ).toBe( 1 );

element/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { createElement, Component, cloneElement, Children } from 'react';
-import { render, findDOMNode, unstable_createPortal } from 'react-dom'; // eslint-disable-line camelcase
+import { render, findDOMNode, createPortal } from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { isString } from 'lodash';
 
@@ -59,7 +59,7 @@ export { Children };
  * @param {Component} component Component
  * @param {Element}   target    DOM node into which element should be rendered
  */
-export { unstable_createPortal as createPortal }; // eslint-disable-line camelcase
+export { createPortal };
 
 /**
  * Renders a given element into a string

element/test/index.js

@@ -5,11 +5,19 @@ import { createElement, renderToString, concatChildren, switchChildrenNodeName }
 
 describe( 'element', () => {
 	describe( 'renderToString', () => {
-		it( 'should return an empty string for a falsey value', () => {
+		it( 'should return an empty string for booleans/null/undefined values', () => {
 			expect( renderToString() ).toBe( '' );
 			expect( renderToString( false ) ).toBe( '' );
+			expect( renderToString( true ) ).toBe( '' );
 			expect( renderToString( null ) ).toBe( '' );
-			expect( renderToString( 0 ) ).toBe( '' );
+		} );
+
+		it( 'should return a string 0', () => {
+			expect( renderToString( 0 ) ).toBe( '0' );
+		} );
+
+		it( 'should return a string 12345', () => {
+			expect( renderToString( 12345 ) ).toBe( '12345' );
 		} );
 
 		it( 'should return a string verbatim', () => {