@wordpress/data 7.3.0 → 7.4.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, render, fireEvent } from '@testing-library/react';
+import { act, render, fireEvent, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -44,7 +44,7 @@ describe( 'useSelect', () => {
 			return <div role="status">{ data.results }</div>;
 		} );
 
-		const rendered = render(
+		render(
 			<RegistryProvider value={ registry }>
 				<TestComponent keyName="foo" />
 			</RegistryProvider>
@@ -57,7 +57,7 @@ describe( 'useSelect', () => {
 		expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 
 		// Ensure expected state was rendered.
-		expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 'bar' );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'bar' );
 	} );
 
 	it( 'uses memoized selector if dependencies do not change', () => {
@@ -76,7 +76,7 @@ describe( 'useSelect', () => {
 			return <div role="status">{ data }</div>;
 		} );
 
-		const rendered = render(
+		const { rerender } = render(
 			<RegistryProvider value={ registry }>
 				<TestComponent keyName="foo" change={ true } />
 			</RegistryProvider>
@@ -87,10 +87,10 @@ describe( 'useSelect', () => {
 		expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 
 		// Ensure expected state was rendered.
-		expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 'foo' );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'foo' );
 
 		// Rerender with non dependency changed.
-		rendered.rerender(
+		rerender(
 			<RegistryProvider value={ registry }>
 				<TestComponent keyName="foo" change={ false } />
 			</RegistryProvider>
@@ -101,10 +101,10 @@ describe( 'useSelect', () => {
 		expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 
 		// Ensure expected state was rendered.
-		expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 'foo' );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'foo' );
 
 		// Rerender with dependency changed.
-		rendered.rerender(
+		rerender(
 			<RegistryProvider value={ registry }>
 				<TestComponent keyName="bar" change={ false } />
 			</RegistryProvider>
@@ -115,7 +115,7 @@ describe( 'useSelect', () => {
 		expect( TestComponent ).toHaveBeenCalledTimes( 3 );
 
 		// Ensure expected state was rendered.
-		expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 'bar' );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'bar' );
 	} );
 
 	it( 'avoid calling nested listener after unmounted', async () => {
@@ -144,14 +144,14 @@ describe( 'useSelect', () => {
 			return show ? <Child /> : 'none';
 		}
 
-		const rendered = render(
+		render(
 			<RegistryProvider value={ registry }>
 				<Parent />
 			</RegistryProvider>
 		);
 
 		// Initial render renders only parent and subscribes the parent to store.
-		expect( rendered.getByText( 'none' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'none' ) ).toBeInTheDocument();
 		expect( mapSelectParent ).toHaveBeenCalledTimes( 2 );
 		expect( mapSelectChild ).toHaveBeenCalledTimes( 0 );
 
@@ -166,7 +166,7 @@ describe( 'useSelect', () => {
 		} );
 
 		// Child was rendered and subscribed to the store, as the _second_ subscription.
-		expect( rendered.getByText( 'yes' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'yes' ) ).toBeInTheDocument();
 		expect( mapSelectParent ).toHaveBeenCalledTimes( 3 );
 		expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
 
@@ -178,7 +178,7 @@ describe( 'useSelect', () => {
 		// Check that child was unmounted without any extra state update being performed on it.
 		// I.e., `mapSelectChild` was never called again, and no "state update on an unmounted
 		// component" warning was triggered.
-		expect( rendered.getByText( 'none' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'none' ) ).toBeInTheDocument();
 		expect( mapSelectParent ).toHaveBeenCalledTimes( 4 );
 		expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
 	} );
@@ -232,13 +232,13 @@ describe( 'useSelect', () => {
 			( type, testValues ) => {
 				const [ valueA, valueB ] = testValues;
 				selectorSpy.mockReturnValue( valueA );
-				const rendered = render(
+				render(
 					<RegistryProvider value={ registry }>
 						<TestComponent />
 					</RegistryProvider>
 				);
 				// Ensure expected state was rendered.
-				expect( rendered.getByRole( 'status' ).dataset.d ).toBe(
+				expect( screen.getByRole( 'status' ).dataset.d ).toBe(
 					JSON.stringify( valueA )
 				);
 
@@ -248,7 +248,7 @@ describe( 'useSelect', () => {
 					selectorSpy.mockReturnValue( valueB );
 					registry.dispatch( 'testStore' ).forceUpdate();
 				} );
-				expect( rendered.getByRole( 'status' ).dataset.d ).toBe(
+				expect( screen.getByRole( 'status' ).dataset.d ).toBe(
 					JSON.stringify( valueB )
 				);
 				expect( mapSelectSpy ).toHaveBeenCalledTimes( 3 );
@@ -297,7 +297,7 @@ describe( 'useSelect', () => {
 				return <div role="status">{ count1 }</div>;
 			} );
 
-			const rendered = render(
+			const { unmount } = render(
 				<RegistryProvider value={ registry }>
 					<TestComponent />
 				</RegistryProvider>
@@ -306,7 +306,7 @@ describe( 'useSelect', () => {
 			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
 			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 1 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
 				registry.dispatch( 'store-2' ).increment();
@@ -315,7 +315,7 @@ describe( 'useSelect', () => {
 			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
 			expect( selectCount2 ).toHaveBeenCalledTimes( 3 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
 				registry.dispatch( 'store-1' ).increment();
@@ -324,10 +324,10 @@ describe( 'useSelect', () => {
 			expect( selectCount1 ).toHaveBeenCalledTimes( 3 );
 			expect( selectCount2 ).toHaveBeenCalledTimes( 3 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 3 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
 
 			// Test if the unsubscribers get called correctly.
-			rendered.unmount();
+			expect( () => unmount() ).not.toThrow();
 		} );
 
 		it( 'can subscribe to multiple stores at once', () => {
@@ -354,28 +354,28 @@ describe( 'useSelect', () => {
 				);
 			} );
 
-			const rendered = render(
+			render(
 				<RegistryProvider value={ registry }>
 					<TestComponent />
 				</RegistryProvider>
 			);
 
 			expect( selectCount1And2 ).toHaveBeenCalledTimes( 2 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( '0,0' );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0,0' );
 
 			act( () => {
 				registry.dispatch( 'store-2' ).increment();
 			} );
 
 			expect( selectCount1And2 ).toHaveBeenCalledTimes( 3 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( '0,1' );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0,1' );
 
 			act( () => {
 				registry.dispatch( 'store-3' ).increment();
 			} );
 
 			expect( selectCount1And2 ).toHaveBeenCalledTimes( 3 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( '0,1' );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0,1' );
 		} );
 
 		it( 're-calls the selector when deps changed', () => {
@@ -404,14 +404,14 @@ describe( 'useSelect', () => {
 				);
 			} );
 
-			const rendered = render(
+			render(
 				<RegistryProvider value={ registry }>
 					<TestComponent />
 				</RegistryProvider>
 			);
 
 			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 2 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count:0,dep:0'
 			);
 
@@ -420,7 +420,7 @@ describe( 'useSelect', () => {
 			} );
 
 			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 4 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count:0,dep:1'
 			);
 
@@ -429,7 +429,7 @@ describe( 'useSelect', () => {
 			} );
 
 			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 5 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count:1,dep:1'
 			);
 		} );
@@ -477,16 +477,16 @@ describe( 'useSelect', () => {
 				);
 			};
 
-			const rendered = render(
+			render(
 				<RegistryProvider value={ registry }>
 					<TestComponent />
 				</RegistryProvider>
 			);
 
-			fireEvent.click( rendered.getByText( 'triggerChildDispatch' ) );
+			fireEvent.click( screen.getByText( 'triggerChildDispatch' ) );
 
 			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 3 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1:1'
 			);
 		} );
@@ -525,14 +525,14 @@ describe( 'useSelect', () => {
 				);
 			} );
 
-			const rendered = render(
+			render(
 				<RegistryProvider value={ registry }>
 					<TestComponent />
 				</RegistryProvider>
 			);
 
 			expect( selectCount1And2 ).toHaveBeenCalledTimes( 2 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1:0,count2:0'
 			);
 
@@ -541,7 +541,7 @@ describe( 'useSelect', () => {
 			} );
 
 			expect( selectCount1And2 ).toHaveBeenCalledTimes( 3 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1:0,count2:1'
 			);
 		} );
@@ -581,7 +581,7 @@ describe( 'useSelect', () => {
 				);
 			} );
 
-			const rendered = render(
+			render(
 				<RegistryProvider value={ registry }>
 					<TestComponent />
 				</RegistryProvider>
@@ -589,15 +589,15 @@ describe( 'useSelect', () => {
 
 			expect( selectCount1 ).toHaveBeenCalledTimes( 0 );
 			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count2'
 			);
 
-			rendered.getByText( 'Toggle' ).click();
+			screen.getByText( 'Toggle' ).click();
 
 			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
 			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1'
 			);
 		} );
@@ -624,7 +624,7 @@ describe( 'useSelect', () => {
 				);
 			} );
 
-			const rendered = render(
+			render(
 				<RegistryProvider value={ registry }>
 					<RegistryProvider value={ subRegistry }>
 						<TestComponent />
@@ -632,7 +632,7 @@ describe( 'useSelect', () => {
 				</RegistryProvider>
 			);
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'parent:0,child:0'
 			);
 
@@ -640,7 +640,7 @@ describe( 'useSelect', () => {
 				registry.dispatch( 'parent-store' ).increment();
 			} );
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'parent:1,child:0'
 			);
 		} );
@@ -664,13 +664,13 @@ describe( 'useSelect', () => {
 				);
 			} );
 
-			const rendered = render(
+			const { unmount } = render(
 				<RegistryProvider value={ registry }>
 					<TestComponent />
 				</RegistryProvider>
 			);
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1:0,count2:blank'
 			);
 
@@ -678,12 +678,12 @@ describe( 'useSelect', () => {
 				registry.dispatch( 'store-1' ).increment();
 			} );
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1:1,count2:blank'
 			);
 
 			// Test if the unsubscribers get called correctly.
-			rendered.unmount();
+			expect( () => unmount() ).not.toThrow();
 		} );
 
 		it( 'handles registration of a non-existing store during rendering', () => {
@@ -698,15 +698,13 @@ describe( 'useSelect', () => {
 				return <div role="status">{ state }</div>;
 			} );
 
-			const rendered = render(
+			const { unmount } = render(
 				<RegistryProvider value={ registry }>
 					<TestComponent />
 				</RegistryProvider>
 			);
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
-				'blank'
-			);
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'blank' );
 
 			act( () => {
 				registry.registerStore(
@@ -716,18 +714,16 @@ describe( 'useSelect', () => {
 			} );
 
 			// This is not ideal, but is the way it's working before and we want to prevent breaking changes.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
-				'blank'
-			);
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'blank' );
 
 			act( () => {
 				registry.dispatch( 'not-yet-registered-store' ).increment();
 			} );
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
 
 			// Test if the unsubscribers get called correctly.
-			rendered.unmount();
+			expect( () => unmount() ).not.toThrow();
 		} );
 
 		it( 'handles registration of a non-existing store of sub-registry during rendering', () => {
@@ -745,7 +741,7 @@ describe( 'useSelect', () => {
 				return <div role="status">{ state }</div>;
 			} );
 
-			const rendered = render(
+			const { unmount } = render(
 				<RegistryProvider value={ registry }>
 					<RegistryProvider value={ subRegistry }>
 						<TestComponent />
@@ -753,9 +749,7 @@ describe( 'useSelect', () => {
 				</RegistryProvider>
 			);
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
-				'blank'
-			);
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'blank' );
 
 			act( () => {
 				registry.registerStore(
@@ -765,9 +759,7 @@ describe( 'useSelect', () => {
 			} );
 
 			// This is not ideal, but is the way it's working before and we want to prevent breaking changes.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent(
-				'blank'
-			);
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'blank' );
 
 			act( () => {
 				registry
@@ -775,10 +767,10 @@ describe( 'useSelect', () => {
 					.increment();
 			} );
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( '1' );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
 
 			// Test if the unsubscribers get called correctly.
-			rendered.unmount();
+			expect( () => unmount() ).not.toThrow();
 		} );
 
 		it( 'handles custom generic stores without a unsubscribe function', () => {
@@ -824,21 +816,21 @@ describe( 'useSelect', () => {
 				return <div role="status">{ state }</div>;
 			} );
 
-			const rendered = render(
+			const { unmount } = render(
 				<RegistryProvider value={ registry }>
 					<TestComponent />
 				</RegistryProvider>
 			);
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
 				registry.dispatch( customStore ).increment();
 			} );
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
 
-			expect( () => rendered.unmount() ).not.toThrow();
+			expect( () => unmount() ).not.toThrow();
 		} );
 	} );
 
@@ -874,7 +866,7 @@ describe( 'useSelect', () => {
 				return <div role="status">{ count }</div>;
 			} );
 
-			const rendered = render(
+			render(
 				<AsyncModeProvider value={ true }>
 					<RegistryProvider value={ registry }>
 						<TestComponent />
@@ -887,7 +879,7 @@ describe( 'useSelect', () => {
 			expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 
 			// Ensure expected state was rendered.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
 				registry.dispatch( 'counter' ).inc();
@@ -895,9 +887,9 @@ describe( 'useSelect', () => {
 
 			// still not called right after increment
 			expect( selectSpy ).toHaveBeenCalledTimes( 2 );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
-			expect( await rendered.findByText( 1 ) ).toBeInTheDocument();
+			expect( await screen.findByText( 1 ) ).toBeInTheDocument();
 
 			expect( selectSpy ).toHaveBeenCalledTimes( 3 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
@@ -922,10 +914,10 @@ describe( 'useSelect', () => {
 				</AsyncModeProvider>
 			);
 
-			const rendered = render( <App async={ true } /> );
+			const { rerender } = render( <App async={ true } /> );
 
 			// Ensure expected state was rendered.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			// Schedules an async update of the component.
 			act( () => {
@@ -933,13 +925,13 @@ describe( 'useSelect', () => {
 			} );
 
 			// Ensure the async update wasn't processed yet.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			// Switch from async mode to sync.
-			rendered.rerender( <App async={ false } /> );
+			rerender( <App async={ false } /> );
 
 			// Ensure the async update was flushed during the rerender.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
 
 			// initial render + subscription check + rerender with isAsync=false
 			expect( selectSpy ).toHaveBeenCalledTimes( 3 );
@@ -970,10 +962,10 @@ describe( 'useSelect', () => {
 				</AsyncModeProvider>
 			);
 
-			const rendered = render( <App variant="a" /> );
+			const { rerender } = render( <App variant="a" /> );
 
 			// Ensure expected state was rendered.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 'a:0' );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'a:0' );
 
 			// Schedules an async update of the component.
 			act( () => {
@@ -981,13 +973,13 @@ describe( 'useSelect', () => {
 			} );
 
 			// Ensure the async update wasn't processed yet.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 'a:0' );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'a:0' );
 
 			// Rerender with a prop change that causes dependency change.
-			rendered.rerender( <App variant="b" /> );
+			rerender( <App variant="b" /> );
 
 			// Ensure the async update was flushed (cancelled) during the rerender.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 'b:1' );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'b:1' );
 
 			// Give the async update time to run in case it wasn't cancelled
 			await new Promise( setImmediate );
@@ -1015,10 +1007,10 @@ describe( 'useSelect', () => {
 				</AsyncModeProvider>
 			);
 
-			const rendered = render( <App /> );
+			const { unmount } = render( <App /> );
 
 			// Ensure expected state was rendered.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			// Schedules an async update of the component.
 			act( () => {
@@ -1026,10 +1018,10 @@ describe( 'useSelect', () => {
 			} );
 
 			// Ensure the async update wasn't processed yet.
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			// Unmount
-			rendered.unmount();
+			unmount();
 
 			// Give the async update time to run in case it wasn't cancelled
 			await new Promise( setImmediate );
@@ -1060,19 +1052,19 @@ describe( 'useSelect', () => {
 				</AsyncModeProvider>
 			);
 
-			const rendered = render( <App reg={ registry } /> );
+			const { rerender } = render( <App reg={ registry } /> );
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
 				registry.dispatch( 'counter' ).inc();
 			} );
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 0 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
-			rendered.rerender( <App reg={ registry2 } /> );
+			rerender( <App reg={ registry2 } /> );
 
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 100 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '100' );
 
 			// Give the async update time to run in case it wasn't cancelled
 			await new Promise( setImmediate );
@@ -1108,13 +1100,13 @@ describe( 'useSelect', () => {
 				</RegistryProvider>
 			);
 
-			const rendered = render( <App multiple={ 1 } /> );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+			const { rerender } = render( <App multiple={ 1 } /> );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
 
 			// Check that the most recent value of `multiple` is used to render:
 			// the old callback wasn't memoized and there is no stale closure problem.
-			rendered.rerender( <App multiple={ 2 } /> );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 2 );
+			rerender( <App multiple={ 2 } /> );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '2' );
 		} );
 
 		it( 'subscribes only stores used by the initial callback', () => {
@@ -1133,24 +1125,24 @@ describe( 'useSelect', () => {
 			);
 
 			// initial render with counter-1
-			const rendered = render( <App store="counter-1" /> );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+			const { rerender } = render( <App store="counter-1" /> );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
 
 			// update from counter-1
 			act( () => {
 				registry.dispatch( 'counter-1' ).inc();
 			} );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 2 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '2' );
 
 			// rerender with counter-2
-			rendered.rerender( <App store="counter-2" /> );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 10 );
+			rerender( <App store="counter-2" /> );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
 
 			// update from counter-2 is ignored because component is subcribed only to counter-1
 			act( () => {
 				registry.dispatch( 'counter-2' ).inc();
 			} );
-			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 10 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
 		} );
 	} );
 } );