Switch away from using enzyme for tests (components/higher-order/with…

…-focus-return/test/index.js) (#7815)

* Switch away from using enzyme for tests

This switches all tests in `components/higher-order/with-focus-return/test/index.js` from using enzyme.shallow  and enzyme.mount to `React.TestRenderer`.  This is because `enzyme` does not fully support React 16.3+ (and movement to do so is really slow). This will fix issues with breakage due to the enzyme incompatibility as components receive React 16.3+ features (such as `forwardRef` usage in #7557).

I had to switch away from using shallow in this case because HOC’s are wrapped in forwardRef and assertions thus could not be properly made on the shallowly rendered HOC.

* fix linting and add betterer traversal to retrieve instance

this makes the test more resilient so it works with the forwardRef work as well.

components/higher-order/with-focus-return/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import renderer from 'react-test-renderer';
 
 /**
  * WordPress dependencies
@@ -27,6 +27,12 @@ describe( 'withFocusReturn()', () => {
 		const activeElement = document.createElement( 'button' );
 		const switchFocusTo = document.createElement( 'input' );
 
+		const getInstance = ( wrapper ) => {
+			return wrapper.root.find(
+				( node ) => node.instance instanceof Component
+			).instance;
+		};
+
 		beforeEach( () => {
 			activeElement.focus();
 		} );
@@ -36,24 +42,25 @@ describe( 'withFocusReturn()', () => {
 		} );
 
 		it( 'should render a basic Test component inside the HOC', () => {
-			const renderedComposite = shallow( <Composite /> );
-			const wrappedElement = renderedComposite.find( 'Test' );
-			const wrappedElementShallow = wrappedElement.shallow();
-			expect( wrappedElementShallow.hasClass( 'test' ) ).toBe( true );
-			expect( wrappedElementShallow.type() ).toBe( 'div' );
-			expect( wrappedElementShallow.text() ).toBe( 'Testing' );
+			const renderedComposite = renderer.create( <Composite /> );
+			const wrappedElement = renderedComposite.root.findByType( Test );
+			const wrappedElementShallow = wrappedElement.children[ 0 ];
+			expect( wrappedElementShallow.props.className ).toBe( 'test' );
+			expect( wrappedElementShallow.type ).toBe( 'div' );
+			expect( wrappedElementShallow.children[ 0 ] ).toBe( 'Testing' );
 		} );
 
 		it( 'should pass additional props through to the wrapped element', () => {
-			const renderedComposite = shallow( <Composite test="test" /> );
-			const wrappedElement = renderedComposite.find( 'Test' );
+			const renderedComposite = renderer.create( <Composite test="test" /> );
+			const wrappedElement = renderedComposite.root.findByType( Test );
 			// Ensure that the wrapped Test element has the appropriate props.
-			expect( wrappedElement.props().test ).toBe( 'test' );
+			expect( wrappedElement.props.test ).toBe( 'test' );
 		} );
 
 		it( 'should not switch focus back to the bound focus element', () => {
-			const mountedComposite = mount( <Composite /> );
-			expect( mountedComposite.instance().activeElementOnMount ).toBe( activeElement );
+			const mountedComposite = renderer.create( <Composite /> );
+
+			expect( getInstance( mountedComposite ).activeElementOnMount ).toBe( activeElement );
 
 			// Change activeElement.
 			switchFocusTo.focus();
@@ -65,8 +72,8 @@ describe( 'withFocusReturn()', () => {
 		} );
 
 		it( 'should return focus to element associated with HOC', () => {
-			const mountedComposite = mount( <Composite /> );
-			expect( mountedComposite.instance().activeElementOnMount ).toBe( activeElement );
+			const mountedComposite = renderer.create( <Composite /> );
+			expect( getInstance( mountedComposite ).activeElementOnMount ).toBe( activeElement );
 
 			// Change activeElement.
 			document.activeElement.blur();