@wordpress/data 7.2.1-next.4d3b314fd5.0 → 7.4.0

package/src/components/with-select/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import TestRenderer, { act } from 'react-test-renderer';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -17,13 +18,11 @@ import withDispatch from '../../with-dispatch';
 import { createRegistry } from '../../../registry';
 import { RegistryProvider } from '../../registry-provider';
 
-describe( 'withSelect', () => {
-	let registry;
-	beforeEach( () => {
-		registry = createRegistry();
-	} );
+jest.useRealTimers();
 
+describe( 'withSelect', () => {
 	it( 'passes the relevant data to the component', () => {
+		const registry = createRegistry();
 		registry.registerStore( 'reactReducer', {
 			reducer: () => ( { reactKey: 'reactState' } ),
 			selectors: {
@@ -38,42 +37,38 @@ describe( 'withSelect', () => {
 		// including both `withSelect` and `select` in the same scope, which
 		// shouldn't occur for a typical component, and if it did might wrongly
 		// encourage the developer to use `select` within the component itself.
-		const mapSelectToProps = jest
-			.fn()
-			.mockImplementation( ( _select, ownProps ) => ( {
-				data: _select( 'reactReducer' ).reactSelector(
-					ownProps.keyName
-				),
-			} ) );
-
-		const OriginalComponent = jest
-			.fn()
-			.mockImplementation( ( props ) => <div>{ props.data }</div> );
+		const mapSelectToProps = jest.fn( ( _select, ownProps ) => ( {
+			data: _select( 'reactReducer' ).reactSelector( ownProps.keyName ),
+		} ) );
+
+		const OriginalComponent = jest.fn( ( props ) => (
+			<div role="status">{ props.data }</div>
+		) );
 
 		const DataBoundComponent =
 			withSelect( mapSelectToProps )( OriginalComponent );
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent keyName="reactKey" />
-				</RegistryProvider>
-			);
-		} );
-		const testInstance = testRenderer.root;
+
+		render(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent keyName="reactKey" />
+			</RegistryProvider>
+		);
+
 		// Expected two times:
 		// - Once on initial render.
 		// - Once on effect before subscription set.
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
-		// Wrapper is the enhanced component. Find props on the rendered child.
-		expect( testInstance.findByType( 'div' ).props ).toEqual( {
-			children: 'reactState',
-		} );
+		// Wrapper is the enhanced component.
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent(
+			'reactState'
+		);
 	} );
 
-	it( 'should rerun selection on state changes', () => {
+	it( 'should rerun selection on state changes', async () => {
+		const user = userEvent.setup();
+		const registry = createRegistry();
 		registry.registerStore( 'counter', {
 			reducer: ( state = 0, action ) => {
 				if ( action.type === 'increment' ) {
@@ -90,38 +85,28 @@ describe( 'withSelect', () => {
 			},
 		} );
 
-		const mapSelectToProps = jest
-			.fn()
-			.mockImplementation( ( _select ) => ( {
-				count: _select( 'counter' ).getCount(),
-			} ) );
+		const mapSelectToProps = jest.fn( ( _select ) => ( {
+			count: _select( 'counter' ).getCount(),
+		} ) );
 
-		const mapDispatchToProps = jest
-			.fn()
-			.mockImplementation( ( _dispatch ) => ( {
-				increment: _dispatch( 'counter' ).increment,
-			} ) );
+		const mapDispatchToProps = jest.fn( ( _dispatch ) => ( {
+			increment: _dispatch( 'counter' ).increment,
+		} ) );
 
-		const OriginalComponent = jest
-			.fn()
-			.mockImplementation( ( props ) => (
-				<button onClick={ props.increment }>{ props.count }</button>
-			) );
+		const OriginalComponent = jest.fn( ( props ) => (
+			<button onClick={ props.increment }>{ props.count }</button>
+		) );
 
 		const DataBoundComponent = compose( [
 			withSelect( mapSelectToProps ),
 			withDispatch( mapDispatchToProps ),
 		] )( OriginalComponent );
 
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent />
-				</RegistryProvider>
-			);
-		} );
-		const testInstance = testRenderer.root;
+		render(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent />
+			</RegistryProvider>
+		);
 
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 		// 2 times:
@@ -131,11 +116,11 @@ describe( 'withSelect', () => {
 		expect( mapDispatchToProps ).toHaveBeenCalledTimes( 1 );
 
 		// Simulate a click on the button.
-		act( () => {
-			testInstance.findByType( 'button' ).props.onClick();
-		} );
+		const button = screen.getByRole( 'button' );
 
-		expect( testInstance.findByType( 'button' ).props.children ).toBe( 1 );
+		await user.click( button );
+
+		expect( button ).toHaveTextContent( '1' );
 		// 2 times =
 		//  1. Initial mount
 		// 2. When click handler is called.
@@ -184,56 +169,51 @@ describe( 'withSelect', () => {
 			}
 
 			render() {
-				return <div>{ this.props.count }</div>;
+				return <div role="status">{ this.props.count }</div>;
 			}
 		}
 
 		const renderSpy = jest.spyOn( OriginalComponent.prototype, 'render' );
 
-		const mapSelectToProps = jest
-			.fn()
-			.mockImplementation( ( _select ) => ( {
-				count: _select( 'counter' ).getCount(),
-			} ) );
+		const mapSelectToProps = jest.fn( ( _select ) => ( {
+			count: _select( 'counter' ).getCount(),
+		} ) );
 
-		const mapDispatchToProps = jest
-			.fn()
-			.mockImplementation( ( _dispatch ) => ( {
-				increment: _dispatch( 'counter' ).increment,
-			} ) );
+		const mapDispatchToProps = jest.fn( ( _dispatch ) => ( {
+			increment: _dispatch( 'counter' ).increment,
+		} ) );
 
 		const DataBoundComponent = compose( [
 			withSelect( mapSelectToProps ),
 			withDispatch( mapDispatchToProps ),
 		] )( OriginalComponent );
 
-		let testRenderer, testInstance;
-		const createTestRenderer = () =>
-			TestRenderer.create(
+		it( 'should rerun if had dispatched action during mount', () => {
+			const { unmount } = render(
 				<RegistryProvider value={ testRegistry }>
 					<DataBoundComponent />
 				</RegistryProvider>
 			);
-		act( () => {
-			testRenderer = createTestRenderer();
-		} );
-		testInstance = testRenderer.root;
-		it( 'should rerun if had dispatched action during mount', () => {
-			expect( testInstance.findByType( 'div' ).props.children ).toBe( 2 );
+
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '2' );
 			// Expected 3 times because:
 			// - 1 on initial render
 			// - 1 on effect before subscription set.
 			// - 1 for the rerender because of the mapOutput change detected.
 			expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
 			expect( renderSpy ).toHaveBeenCalledTimes( 2 );
+
+			unmount();
 		} );
+
 		it( 'should rerun on unmount and mount', () => {
-			act( () => {
-				testRenderer.unmount();
-				testRenderer = createTestRenderer();
-			} );
-			testInstance = testRenderer.root;
-			expect( testInstance.findByType( 'div' ).props.children ).toBe( 4 );
+			render(
+				<RegistryProvider value={ testRegistry }>
+					<DataBoundComponent />
+				</RegistryProvider>
+			);
+
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '4' );
 			// Expected an additional 3 times because of the unmount and remount:
 			// - 1 on initial render
 			// - 1 on effect before subscription set.
@@ -244,6 +224,7 @@ describe( 'withSelect', () => {
 	} );
 
 	it( 'should rerun selection on props changes', () => {
+		const registry = createRegistry();
 		registry.registerStore( 'counter', {
 			reducer: ( state = 0, action ) => {
 				if ( action.type === 'increment' ) {
@@ -257,28 +238,22 @@ describe( 'withSelect', () => {
 			},
 		} );
 
-		const mapSelectToProps = jest
-			.fn()
-			.mockImplementation( ( _select, ownProps ) => ( {
-				count: _select( 'counter' ).getCount( ownProps.offset ),
-			} ) );
+		const mapSelectToProps = jest.fn( ( _select, ownProps ) => ( {
+			count: _select( 'counter' ).getCount( ownProps.offset ),
+		} ) );
 
-		const OriginalComponent = jest
-			.fn()
-			.mockImplementation( ( props ) => <div>{ props.count }</div> );
+		const OriginalComponent = jest.fn( ( props ) => (
+			<div role="status">{ props.count }</div>
+		) );
 
 		const DataBoundComponent =
 			withSelect( mapSelectToProps )( OriginalComponent );
 
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent offset={ 0 } />
-				</RegistryProvider>
-			);
-		} );
-		const testInstance = testRenderer.root;
+		const { rerender } = render(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent offset={ 0 } />
+			</RegistryProvider>
+		);
 
 		// 2 times:
 		// - 1 on initial render
@@ -286,20 +261,19 @@ describe( 'withSelect', () => {
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
-		act( () => {
-			testRenderer.update(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent offset={ 10 } />
-				</RegistryProvider>
-			);
-		} );
+		rerender(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent offset={ 10 } />
+			</RegistryProvider>
+		);
 
-		expect( testInstance.findByType( 'div' ).props.children ).toBe( 10 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
 	} );
 
 	it( 'should not run selection if props have not changed', () => {
+		const registry = createRegistry();
 		registry.registerStore( 'unchanging', {
 			reducer: ( state = {} ) => state,
 			selectors: {
@@ -308,8 +282,7 @@ describe( 'withSelect', () => {
 		} );
 
 		const mapSelectToProps = jest.fn();
-
-		const OriginalComponent = jest.fn().mockImplementation( () => <div /> );
+		const OriginalComponent = jest.fn( () => <div /> );
 
 		const DataBoundComponent = compose( [
 			withSelect( mapSelectToProps ),
@@ -319,14 +292,11 @@ describe( 'withSelect', () => {
 			<DataBoundComponent propName={ props.propName } />
 		);
 
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<Parent propName="foo" />
-				</RegistryProvider>
-			);
-		} );
+		const { rerender } = render(
+			<RegistryProvider value={ registry }>
+				<Parent propName="foo" />
+			</RegistryProvider>
+		);
 
 		// 2 times:
 		// - 1 on initial render
@@ -334,19 +304,18 @@ describe( 'withSelect', () => {
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
-		act( () => {
-			testRenderer.update(
-				<RegistryProvider value={ registry }>
-					<Parent propName="foo" />
-				</RegistryProvider>
-			);
-		} );
+		rerender(
+			<RegistryProvider value={ registry }>
+				<Parent propName="foo" />
+			</RegistryProvider>
+		);
 
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should not rerender if state has changed but merge props the same', () => {
+	it( 'should not rerender if state has changed but merge props the same', async () => {
+		const registry = createRegistry();
 		registry.registerStore( 'demo', {
 			reducer: () => ( {} ),
 			selectors: {
@@ -357,24 +326,20 @@ describe( 'withSelect', () => {
 			},
 		} );
 
-		const mapSelectToProps = jest
-			.fn()
-			.mockImplementation( ( _select ) => ( {
-				value: _select( 'demo' ).getUnchangingValue(),
-			} ) );
+		const mapSelectToProps = jest.fn( ( _select ) => ( {
+			value: _select( 'demo' ).getUnchangingValue(),
+		} ) );
 
-		const OriginalComponent = jest.fn().mockImplementation( () => <div /> );
+		const OriginalComponent = jest.fn( () => <div /> );
 
 		const DataBoundComponent =
 			withSelect( mapSelectToProps )( OriginalComponent );
 
-		act( () => {
-			TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent />
-				</RegistryProvider>
-			);
-		} );
+		render(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent />
+			</RegistryProvider>
+		);
 
 		// 2 times:
 		// - 1 on initial render
@@ -382,13 +347,14 @@ describe( 'withSelect', () => {
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
-		registry.dispatch( 'demo' ).update();
+		await act( async () => registry.dispatch( 'demo' ).update() );
 
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	it( 'should render if props have changed but not state', () => {
+		const registry = createRegistry();
 		registry.registerStore( 'unchanging', {
 			reducer: ( state = {} ) => state,
 			selectors: {
@@ -397,21 +363,17 @@ describe( 'withSelect', () => {
 		} );
 
 		const mapSelectToProps = jest.fn();
-
-		const OriginalComponent = jest.fn().mockImplementation( () => <div /> );
+		const OriginalComponent = jest.fn( () => <div /> );
 
 		const DataBoundComponent = compose( [
 			withSelect( mapSelectToProps ),
 		] )( OriginalComponent );
 
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent />
-				</RegistryProvider>
-			);
-		} );
+		const { rerender } = render(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent />
+			</RegistryProvider>
+		);
 
 		// 2 times:
 		// - 1 on initial render
@@ -419,19 +381,18 @@ describe( 'withSelect', () => {
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
-		act( () => {
-			testRenderer.update(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent propName="foo" />
-				</RegistryProvider>
-			);
-		} );
+		rerender(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent propName="foo" />
+			</RegistryProvider>
+		);
 
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
 	} );
 
-	it( 'should not rerun selection on unchanging state', () => {
+	it( 'should not rerun selection on unchanging state', async () => {
+		const registry = createRegistry();
 		const store = registry.registerStore( 'unchanging', {
 			reducer: ( state = {} ) => state,
 			selectors: {
@@ -440,20 +401,17 @@ describe( 'withSelect', () => {
 		} );
 
 		const mapSelectToProps = jest.fn();
-
-		const OriginalComponent = jest.fn().mockImplementation( () => <div /> );
+		const OriginalComponent = jest.fn( () => <div /> );
 
 		const DataBoundComponent = compose( [
 			withSelect( mapSelectToProps ),
 		] )( OriginalComponent );
 
-		act( () => {
-			TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent />
-				</RegistryProvider>
-			);
-		} );
+		render(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent />
+			</RegistryProvider>
+		);
 
 		// 2 times:
 		// - 1 on initial render
@@ -461,13 +419,14 @@ describe( 'withSelect', () => {
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
-		store.dispatch( { type: 'dummy' } );
+		await act( async () => store.dispatch( { type: 'dummy' } ) );
 
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	it( 'omits props which are not returned on subsequent mappings', () => {
+		const registry = createRegistry();
 		registry.registerStore( 'demo', {
 			reducer: ( state = 'OK' ) => state,
 			selectors: {
@@ -475,32 +434,24 @@ describe( 'withSelect', () => {
 			},
 		} );
 
-		const mapSelectToProps = jest
-			.fn()
-			.mockImplementation( ( _select, ownProps ) => {
-				return {
-					[ ownProps.propName ]: _select( 'demo' ).getValue(),
-				};
-			} );
+		const mapSelectToProps = jest.fn( ( _select, ownProps ) => {
+			return {
+				[ ownProps.propName ]: _select( 'demo' ).getValue(),
+			};
+		} );
 
-		const OriginalComponent = jest
-			.fn()
-			.mockImplementation( ( props ) => (
-				<div>{ JSON.stringify( props ) }</div>
-			) );
+		const OriginalComponent = jest.fn( ( props ) => (
+			<div role="status">{ JSON.stringify( props ) }</div>
+		) );
 
 		const DataBoundComponent =
 			withSelect( mapSelectToProps )( OriginalComponent );
 
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent propName="foo" />
-				</RegistryProvider>
-			);
-		} );
-		const testInstance = testRenderer.root;
+		const { rerender } = render(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent propName="foo" />
+			</RegistryProvider>
+		);
 
 		// 2 times:
 		// - 1 on initial render
@@ -508,32 +459,31 @@ describe( 'withSelect', () => {
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
-		expect(
-			JSON.parse( testInstance.findByType( 'div' ).props.children )
-		).toEqual( {
-			foo: 'OK',
-			propName: 'foo',
-		} );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent(
+			JSON.stringify( {
+				propName: 'foo',
+				foo: 'OK',
+			} )
+		);
 
-		act( () => {
-			testRenderer.update(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent propName="bar" />
-				</RegistryProvider>
-			);
-		} );
+		rerender(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent propName="bar" />
+			</RegistryProvider>
+		);
 
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
-		expect(
-			JSON.parse( testInstance.findByType( 'div' ).props.children )
-		).toEqual( {
-			bar: 'OK',
-			propName: 'bar',
-		} );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent(
+			JSON.stringify( {
+				propName: 'bar',
+				bar: 'OK',
+			} )
+		);
 	} );
 
 	it( 'allows undefined return from mapSelectToProps', () => {
+		const registry = createRegistry();
 		registry.registerStore( 'demo', {
 			reducer: ( state = 'OK' ) => state,
 			selectors: {
@@ -541,72 +491,57 @@ describe( 'withSelect', () => {
 			},
 		} );
 
-		const mapSelectToProps = jest
-			.fn()
-			.mockImplementation( ( _select, ownProps ) => {
-				if ( ownProps.pass ) {
-					return {
-						count: _select( 'demo' ).getValue(),
-					};
-				}
-			} );
+		const mapSelectToProps = jest.fn( ( _select, ownProps ) => {
+			if ( ownProps.pass ) {
+				return {
+					count: _select( 'demo' ).getValue(),
+				};
+			}
+		} );
 
-		const OriginalComponent = jest
-			.fn()
-			.mockImplementation( ( props ) => (
-				<div>{ props.count || 'Unknown' }</div>
-			) );
+		const OriginalComponent = jest.fn( ( props ) => (
+			<div role="status">{ props.count || 'Unknown' }</div>
+		) );
 
 		const DataBoundComponent =
 			withSelect( mapSelectToProps )( OriginalComponent );
 
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent pass={ false } />
-				</RegistryProvider>
-			);
-		} );
-		const testInstance = testRenderer.root;
+		const { rerender } = render(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent pass={ false } />
+			</RegistryProvider>
+		);
 
 		// 2 times:
 		// - 1 on initial render
 		// - 1 on effect before subscription set.
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
-		expect( testInstance.findByType( 'div' ).props.children ).toBe(
-			'Unknown'
-		);
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'Unknown' );
 
-		act( () => {
-			testRenderer.update(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent pass />
-				</RegistryProvider>
-			);
-		} );
+		rerender(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent pass />
+			</RegistryProvider>
+		);
 
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
-		expect( testInstance.findByType( 'div' ).props.children ).toBe( 'OK' );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'OK' );
 
-		act( () => {
-			testRenderer.update(
-				<RegistryProvider value={ registry }>
-					<DataBoundComponent pass={ false } />
-				</RegistryProvider>
-			);
-		} );
+		rerender(
+			<RegistryProvider value={ registry }>
+				<DataBoundComponent pass={ false } />
+			</RegistryProvider>
+		);
 
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 4 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 3 );
-		expect( testInstance.findByType( 'div' ).props.children ).toBe(
-			'Unknown'
-		);
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'Unknown' );
 	} );
 
-	it( 'should limit unnecessary selections run on children', () => {
+	it( 'should limit unnecessary selections run on children', async () => {
+		const registry = createRegistry();
 		registry.registerStore( 'childRender', {
 			reducer: ( state = true, action ) =>
 				action.type === 'TOGGLE_RENDER' ? ! state : state,
@@ -619,20 +554,14 @@ describe( 'withSelect', () => {
 		} );
 
 		const childMapSelectToProps = jest.fn();
-		const parentMapSelectToProps = jest
-			.fn()
-			.mockImplementation( ( _select ) => ( {
-				isRenderingChild: _select( 'childRender' ).getValue(),
-			} ) );
-
-		const ChildOriginalComponent = jest
-			.fn()
-			.mockImplementation( () => <div /> );
-		const ParentOriginalComponent = jest
-			.fn()
-			.mockImplementation( ( props ) => (
-				<div>{ props.isRenderingChild ? <Child /> : null }</div>
-			) );
+		const parentMapSelectToProps = jest.fn( ( _select ) => ( {
+			isRenderingChild: _select( 'childRender' ).getValue(),
+		} ) );
+
+		const ChildOriginalComponent = jest.fn( () => <div /> );
+		const ParentOriginalComponent = jest.fn( ( props ) => (
+			<div>{ props.isRenderingChild ? <Child /> : null }</div>
+		) );
 
 		const Child = withSelect( childMapSelectToProps )(
 			ChildOriginalComponent
@@ -641,13 +570,11 @@ describe( 'withSelect', () => {
 			ParentOriginalComponent
 		);
 
-		act( () => {
-			TestRenderer.create(
-				<RegistryProvider value={ registry }>
-					<Parent />
-				</RegistryProvider>
-			);
-		} );
+		render(
+			<RegistryProvider value={ registry }>
+				<Parent />
+			</RegistryProvider>
+		);
 
 		// 2 times:
 		// - 1 on initial render
@@ -657,7 +584,7 @@ describe( 'withSelect', () => {
 		expect( ChildOriginalComponent ).toHaveBeenCalledTimes( 1 );
 		expect( ParentOriginalComponent ).toHaveBeenCalledTimes( 1 );
 
-		act( () => {
+		await act( async () => {
 			registry.dispatch( 'childRender' ).toggleRender();
 		} );
 
@@ -668,7 +595,7 @@ describe( 'withSelect', () => {
 	} );
 
 	it( 'should rerun selection on registry change', () => {
-		const firstRegistry = registry;
+		const firstRegistry = createRegistry();
 		firstRegistry.registerStore( 'demo', {
 			reducer: ( state = 'first' ) => state,
 			selectors: {
@@ -676,28 +603,22 @@ describe( 'withSelect', () => {
 			},
 		} );
 
-		const mapSelectToProps = jest
-			.fn()
-			.mockImplementation( ( _select ) => ( {
-				value: _select( 'demo' ).getValue(),
-			} ) );
+		const mapSelectToProps = jest.fn( ( _select ) => ( {
+			value: _select( 'demo' ).getValue(),
+		} ) );
 
-		const OriginalComponent = jest
-			.fn()
-			.mockImplementation( ( props ) => <div>{ props.value }</div> );
+		const OriginalComponent = jest.fn( ( props ) => (
+			<div role="status">{ props.value }</div>
+		) );
 
 		const DataBoundComponent =
 			withSelect( mapSelectToProps )( OriginalComponent );
 
-		let testRenderer;
-		act( () => {
-			testRenderer = TestRenderer.create(
-				<RegistryProvider value={ firstRegistry }>
-					<DataBoundComponent />
-				</RegistryProvider>
-			);
-		} );
-		const testInstance = testRenderer.root;
+		const { rerender } = render(
+			<RegistryProvider value={ firstRegistry }>
+				<DataBoundComponent />
+			</RegistryProvider>
+		);
 
 		// 2 times:
 		// - 1 on initial render
@@ -705,9 +626,7 @@ describe( 'withSelect', () => {
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
-		expect( testInstance.findByType( 'div' ).props ).toEqual( {
-			children: 'first',
-		} );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'first' );
 
 		const secondRegistry = createRegistry();
 		secondRegistry.registerStore( 'demo', {
@@ -717,13 +636,12 @@ describe( 'withSelect', () => {
 			},
 		} );
 
-		act( () => {
-			testRenderer.update(
-				<RegistryProvider value={ secondRegistry }>
-					<DataBoundComponent />
-				</RegistryProvider>
-			);
-		} );
+		rerender(
+			<RegistryProvider value={ secondRegistry }>
+				<DataBoundComponent />
+			</RegistryProvider>
+		);
+
 		// 4 times:
 		// - 1 on initial render
 		// - 1 on effect before subscription set.
@@ -731,9 +649,6 @@ describe( 'withSelect', () => {
 		// - 1 on effect before new subscription set (because registry has changed)
 		expect( mapSelectToProps ).toHaveBeenCalledTimes( 4 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
-
-		expect( testInstance.findByType( 'div' ).props ).toEqual( {
-			children: 'second',
-		} );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'second' );
 	} );
 } );