@wordpress/block-editor 9.7.0 → 9.7.1-next.d6164808d3.0

package/src/components/link-control/test/index.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act, Simulate } from 'react-dom/test-utils';
-import { queryByText, queryByRole } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { UP, DOWN, ENTER } from '@wordpress/keycodes';
+
 /**
  * WordPress dependencies
  */
@@ -71,33 +71,26 @@ function eventLoopTick() {
 	return new Promise( ( resolve ) => setImmediate( resolve ) );
 }
 
-let container = null;
-
 beforeEach( () => {
 	// Setup a DOM element as a render target.
-	container = document.createElement( 'div' );
-	document.body.appendChild( container );
 	mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions );
 } );
 
 afterEach( () => {
 	// Cleanup on exiting.
-	unmountComponentAtNode( container );
-	container.remove();
-	container = null;
 	mockFetchSearchSuggestions.mockReset();
 	mockFetchRichUrlData?.mockReset(); // Conditionally reset as it may NOT be a mock.
 } );
 
 function getURLInput() {
-	return container.querySelector( 'input[aria-label="URL"]' );
+	return screen.queryByRole( 'combobox', { name: 'URL' } );
 }
 
-function getSearchResults() {
+function getSearchResults( container ) {
 	const input = getURLInput();
-	// The input has `aria-owns` to indicate that it owns (and is related to)
+	// The input has `aria-controls` to indicate that it owns (and is related to)
 	// the search results with `role="listbox"`.
-	const relatedSelector = input.getAttribute( 'aria-owns' );
+	const relatedSelector = input.getAttribute( 'aria-controls' );
 
 	// Select by relationship as well as role.
 	return container.querySelectorAll(
@@ -106,24 +99,91 @@ function getSearchResults() {
 }
 
 function getCurrentLink() {
-	return container.querySelector(
-		'.block-editor-link-control__search-item.is-current'
-	);
+	return screen.queryByLabelText( 'Currently selected' );
+}
+
+function getSelectedResultElement() {
+	return screen.queryByRole( 'option', { selected: true } );
+}
+
+/**
+ * Workaround to trigger an arrow up keypress event.
+ *
+ * @todo Remove this workaround in favor of userEvent.keyboard() or userEvent.type().
+ *
+ * For some reason, this doesn't work:
+ *
+ * ```
+ * await user.keyboard( '[ArrowDown]' );
+ * ```
+ *
+ * because the event sent has a `keyCode` of `0`.
+ *
+ * @param {Element} element Element to trigger the event on.
+ */
+function triggerArrowUp( element ) {
+	fireEvent.keyDown( element, {
+		key: 'ArrowUp',
+		keyCode: 38,
+	} );
+}
+
+/**
+ * Workaround to trigger an arrow down keypress event.
+ *
+ * @todo Remove this workaround in favor of userEvent.keyboard() or userEvent.type().
+ *
+ * For some reason, this doesn't work:
+ *
+ * ```
+ * await user.keyboard( '[ArrowDown]' );
+ * ```
+ *
+ * because the event sent has a `keyCode` of `0`.
+ *
+ * @param {Element} element Element to trigger the event on.
+ */
+function triggerArrowDown( element ) {
+	fireEvent.keyDown( element, {
+		key: 'ArrowDown',
+		keyCode: 40,
+	} );
+}
+
+/**
+ * Workaround to trigger an Enter keypress event.
+ *
+ * @todo Remove this workaround in favor of userEvent.keyboard() or userEvent.type().
+ *
+ * For some reason, this doesn't work:
+ *
+ * ```
+ * await user.keyboard( '[Enter]' );
+ * ```
+ *
+ * because the event sent has a `keyCode` of `0`.
+ *
+ * @param {Element} element Element to trigger the event on.
+ */
+function triggerEnter( element ) {
+	fireEvent.keyDown( element, {
+		key: 'Enter',
+		keyCode: 13,
+	} );
 }
 
 describe( 'Basic rendering', () => {
 	it( 'should render', () => {
-		act( () => {
-			render( <LinkControl />, container );
-		} );
+		render( <LinkControl /> );
 
 		// Search Input UI.
 		const searchInput = getURLInput();
 
-		expect( searchInput ).not.toBeNull();
+		expect( searchInput ).toBeInTheDocument();
 	} );
 
 	it( 'should not render protocol in links', async () => {
+		const user = userEvent.setup();
 		mockFetchSearchSuggestions.mockImplementation( () =>
 			Promise.resolve( [
 				{
@@ -145,94 +205,61 @@ describe( 'Basic rendering', () => {
 
 		const searchTerm = 'Hello';
 
-		act( () => {
-			render( <LinkControl />, container );
-		} );
+		render( <LinkControl /> );
 
 		// Search Input UI.
 		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, { target: { value: searchTerm } } );
-		} );
-
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
-
-		// Find all elements with link
-		// Filter out the element with the text 'ENTER' because it doesn't contain link.
-		const linkElements = Array.from(
-			container.querySelectorAll(
-				'.block-editor-link-control__search-item-info'
-			)
-		).filter( ( elem ) => ! elem.innerHTML.includes( 'ENTER' ) );
+		searchInput.focus();
+		await user.keyboard( searchTerm );
 
-		linkElements.forEach( ( elem ) => {
-			expect( elem.innerHTML ).not.toContain( '://' );
-		} );
+		expect( screen.queryByText( '://' ) ).not.toBeInTheDocument();
 	} );
 
 	describe( 'forceIsEditingLink', () => {
-		const isEditing = () => !! getURLInput();
-
 		it( 'undefined', () => {
-			act( () => {
-				render(
-					<LinkControl value={ { url: 'https://example.com' } } />,
-					container
-				);
-			} );
+			render( <LinkControl value={ { url: 'https://example.com' } } /> );
 
-			expect( isEditing() ).toBe( false );
+			expect( getURLInput() ).not.toBeInTheDocument();
 		} );
 
 		it( 'true', () => {
-			act( () => {
-				render(
-					<LinkControl
-						value={ { url: 'https://example.com' } }
-						forceIsEditingLink
-					/>,
-					container
-				);
-			} );
+			render(
+				<LinkControl
+					value={ { url: 'https://example.com' } }
+					forceIsEditingLink
+				/>
+			);
 
-			expect( isEditing() ).toBe( true );
+			expect( getURLInput() ).toBeVisible();
 		} );
 
-		it( 'false', () => {
-			act( () => {
-				render(
-					<LinkControl value={ { url: 'https://example.com' } } />,
-					container
-				);
-			} );
+		it( 'false', async () => {
+			const user = userEvent.setup();
+			const { rerender } = render(
+				<LinkControl value={ { url: 'https://example.com' } } />
+			);
 
 			// Click the "Edit" button to trigger into the editing mode.
-			const editButton = queryByRole( container, 'button', {
+			const editButton = screen.queryByRole( 'button', {
 				name: 'Edit',
 			} );
 
-			act( () => {
-				Simulate.click( editButton );
-			} );
+			await user.click( editButton );
 
-			expect( isEditing() ).toBe( true );
+			expect( getURLInput() ).toBeVisible();
 
 			// If passed `forceIsEditingLink` of `false` while editing, should
 			// forcefully reset to the preview state.
-			act( () => {
-				render(
-					<LinkControl
-						value={ { url: 'https://example.com' } }
-						forceIsEditingLink={ false }
-					/>,
-					container
-				);
-			} );
+			rerender(
+				<LinkControl
+					value={ { url: 'https://example.com' } }
+					forceIsEditingLink={ false }
+				/>
+			);
 
-			expect( isEditing() ).toBe( false );
+			expect( getURLInput() ).not.toBeInTheDocument();
 		} );
 
 		it( 'should display human friendly error message if value URL prop is empty when component is forced into no-editing (preview) mode', async () => {
@@ -249,65 +276,49 @@ describe( 'Basic rendering', () => {
 				type: 'post',
 			};
 
-			act( () => {
-				render(
-					<LinkControl
-						value={ valueWithEmptyURL }
-						forceIsEditingLink={ false }
-					/>,
-					container
-				);
-			} );
+			render(
+				<LinkControl
+					value={ valueWithEmptyURL }
+					forceIsEditingLink={ false }
+				/>
+			);
 
-			const linkPreview = queryByRole( container, 'generic', {
-				name: 'Currently selected',
-			} );
+			const linkPreview = getCurrentLink();
 
 			const isPreviewError = linkPreview.classList.contains( 'is-error' );
 			expect( isPreviewError ).toBe( true );
 
-			expect( queryByText( linkPreview, 'Link is empty' ) ).toBeTruthy();
+			expect( screen.queryByText( 'Link is empty' ) ).toBeVisible();
 		} );
 	} );
 
 	describe( 'Unlinking', () => {
 		it( 'should not show "Unlink" button if no onRemove handler is provided', () => {
-			act( () => {
-				render(
-					<LinkControl value={ { url: 'https://example.com' } } />,
-					container
-				);
-			} );
+			render( <LinkControl value={ { url: 'https://example.com' } } /> );
 
-			const unLinkButton = queryByRole( container, 'button', {
+			const unLinkButton = screen.queryByRole( 'button', {
 				name: 'Unlink',
 			} );
 
-			expect( unLinkButton ).toBeNull();
 			expect( unLinkButton ).not.toBeInTheDocument();
 		} );
 
-		it( 'should show "Unlink" button if a onRemove handler is provided', () => {
+		it( 'should show "Unlink" button if a onRemove handler is provided', async () => {
+			const user = userEvent.setup();
 			const mockOnRemove = jest.fn();
-			act( () => {
-				render(
-					<LinkControl
-						value={ { url: 'https://example.com' } }
-						onRemove={ mockOnRemove }
-					/>,
-					container
-				);
-			} );
+			render(
+				<LinkControl
+					value={ { url: 'https://example.com' } }
+					onRemove={ mockOnRemove }
+				/>
+			);
 
-			const unLinkButton = queryByRole( container, 'button', {
+			const unLinkButton = screen.queryByRole( 'button', {
 				name: 'Unlink',
 			} );
-			expect( unLinkButton ).toBeTruthy();
-			expect( unLinkButton ).toBeInTheDocument();
+			expect( unLinkButton ).toBeVisible();
 
-			act( () => {
-				Simulate.click( unLinkButton );
-			} );
+			await user.click( unLinkButton );
 
 			expect( mockOnRemove ).toHaveBeenCalled();
 		} );
@@ -316,6 +327,7 @@ describe( 'Basic rendering', () => {
 
 describe( 'Searching for a link', () => {
 	it( 'should display loading UI when input is valid but search results have yet to be returned', async () => {
+		const user = userEvent.setup();
 		const searchTerm = 'Hello';
 
 		let resolver;
@@ -327,28 +339,25 @@ describe( 'Searching for a link', () => {
 
 		mockFetchSearchSuggestions.mockImplementation( fauxRequest );
 
-		act( () => {
-			render( <LinkControl />, container );
-		} );
+		const { container } = render( <LinkControl /> );
 
 		// Search Input UI.
 		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, { target: { value: searchTerm } } );
-		} );
+		searchInput.focus();
+		await user.keyboard( searchTerm );
 
 		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 		await eventLoopTick();
 
-		const searchResultElements = getSearchResults();
+		const searchResultElements = getSearchResults( container );
 
-		let loadingUI = container.querySelector( '.components-spinner' );
+		let loadingUI = screen.queryByRole( 'presentation' );
 
 		expect( searchResultElements ).toHaveLength( 0 );
 
-		expect( loadingUI ).not.toBeNull();
+		expect( loadingUI ).toBeVisible();
 
 		act( () => {
 			resolver( fauxEntitySuggestions );
@@ -356,36 +365,29 @@ describe( 'Searching for a link', () => {
 
 		await eventLoopTick();
 
-		loadingUI = container.querySelector( '.components-spinner' );
+		loadingUI = screen.queryByRole( 'presentation' );
 
-		expect( loadingUI ).toBeNull();
+		expect( loadingUI ).not.toBeInTheDocument();
 	} );
 
 	it( 'should display only search suggestions when current input value is not URL-like', async () => {
+		const user = userEvent.setup();
 		const searchTerm = 'Hello world';
 		const firstFauxSuggestion = fauxEntitySuggestions[ 0 ];
 
-		act( () => {
-			render( <LinkControl />, container );
-		} );
+		const { container } = render( <LinkControl /> );
 
 		// Search Input UI.
 		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, { target: { value: searchTerm } } );
-		} );
+		searchInput.focus();
+		await user.keyboard( searchTerm );
 
 		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 		await eventLoopTick();
-		// TODO: select these by aria relationship to autocomplete rather than arbitrary selector.
 
-		const searchResultElements = getSearchResults();
-
-		const firstSearchResultItemHTML = searchResultElements[ 0 ].innerHTML;
-		const lastSearchResultItemHTML =
-			searchResultElements[ searchResultElements.length - 1 ].innerHTML;
+		const searchResultElements = getSearchResults( container );
 
 		expect( searchResultElements ).toHaveLength(
 			fauxEntitySuggestions.length
@@ -394,35 +396,31 @@ describe( 'Searching for a link', () => {
 		expect( searchInput.getAttribute( 'aria-expanded' ) ).toBe( 'true' );
 
 		// Sanity check that a search suggestion shows up corresponding to the data.
-		expect( firstSearchResultItemHTML ).toEqual(
-			expect.stringContaining( firstFauxSuggestion.title )
+		expect( searchResultElements[ 0 ] ).toHaveTextContent(
+			firstFauxSuggestion.title
 		);
-		expect( firstSearchResultItemHTML ).toEqual(
-			expect.stringContaining( firstFauxSuggestion.type )
+		expect( searchResultElements[ 0 ] ).toHaveTextContent(
+			firstFauxSuggestion.type
 		);
 
 		// The fallback URL suggestion should not be shown when input is not URL-like.
-		expect( lastSearchResultItemHTML ).not.toEqual(
-			expect.stringContaining( 'URL' )
-		);
+		expect(
+			searchResultElements[ searchResultElements.length - 1 ]
+		).not.toHaveTextContent( 'URL' );
 	} );
 
 	it( 'should trim search term', async () => {
+		const user = userEvent.setup();
 		const searchTerm = '   Hello    ';
 
-		act( () => {
-			render( <LinkControl />, container );
-		} );
+		const { container } = render( <LinkControl /> );
 
 		// Search Input UI.
-		const searchInput = container.querySelector(
-			'input[aria-label="URL"]'
-		);
+		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, { target: { value: searchTerm } } );
-		} );
+		searchInput.focus();
+		await user.keyboard( searchTerm );
 
 		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 		await eventLoopTick();
@@ -437,11 +435,6 @@ describe( 'Searching for a link', () => {
 			( mark ) => mark.innerHTML !== 'Hello'
 		);
 
-		// Grab the first argument that was passed to the fetchSuggestions
-		// handler (which is mocked out).
-		const mockFetchSuggestionsFirstArg =
-			mockFetchSearchSuggestions.mock.calls[ 0 ][ 0 ];
-
 		// Given we're mocking out the results we should always have 4 mark elements.
 		expect( searchResultTextHighlightElements ).toHaveLength( 4 );
 
@@ -453,30 +446,30 @@ describe( 'Searching for a link', () => {
 		// with the trimmed search value. We do this because we are mocking out
 		// the fetch handler in our test so we need to assert it would be called
 		// correctly in a real world scenario.
-		expect( mockFetchSuggestionsFirstArg ).toEqual( 'Hello' );
+		expect( mockFetchSearchSuggestions ).toHaveBeenCalledWith(
+			'Hello',
+			expect.anything()
+		);
 	} );
 
 	it( 'should not call search handler when showSuggestions is false', async () => {
-		act( () => {
-			render( <LinkControl showSuggestions={ false } />, container );
-		} );
+		const user = userEvent.setup();
+		const { container } = render(
+			<LinkControl showSuggestions={ false } />
+		);
 
 		// Search Input UI.
 		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, {
-				target: { value: 'anything' },
-			} );
-		} );
+		searchInput.focus();
+		await user.keyboard( 'anything' );
 
-		const searchResultElements = getSearchResults();
+		const searchResultElements = getSearchResults( container );
 
 		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 		await eventLoopTick();
 
-		// TODO: select these by aria relationship to autocomplete rather than arbitrary selector.
 		expect( searchResultElements ).toHaveLength( 0 );
 		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
 	} );
@@ -487,71 +480,54 @@ describe( 'Searching for a link', () => {
 	] )(
 		'should display a URL suggestion as a default fallback for the search term "%s" which could potentially be a valid url.',
 		async ( searchTerm ) => {
-			act( () => {
-				render( <LinkControl />, container );
-			} );
+			const user = userEvent.setup();
+			const { container } = render( <LinkControl /> );
 
 			// Search Input UI.
 			const searchInput = getURLInput();
 
 			// Simulate searching for a term.
-			act( () => {
-				Simulate.change( searchInput, {
-					target: { value: searchTerm },
-				} );
-			} );
+			searchInput.focus();
+			await user.keyboard( searchTerm );
 
 			// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 			await eventLoopTick();
-			// TODO: select these by aria relationship to autocomplete rather than arbitrary selector.
 
-			const searchResultElements = getSearchResults();
+			const searchResultElements = getSearchResults( container );
 
-			const lastSearchResultItemHTML =
-				searchResultElements[ searchResultElements.length - 1 ]
-					.innerHTML;
-			const additionalDefaultFallbackURLSuggestionLength = 1;
+			const lastSearchResultItem =
+				searchResultElements[ searchResultElements.length - 1 ];
 
 			// We should see a search result for each of the expect search suggestions
 			// plus 1 additional one for the fallback URL suggestion.
 			expect( searchResultElements ).toHaveLength(
-				fauxEntitySuggestions.length +
-					additionalDefaultFallbackURLSuggestionLength
+				fauxEntitySuggestions.length + 1
 			);
 
 			// The last item should be a URL search suggestion.
-			expect( lastSearchResultItemHTML ).toEqual(
-				expect.stringContaining( searchTerm )
-			);
-			expect( lastSearchResultItemHTML ).toEqual(
-				expect.stringContaining( 'URL' )
-			);
-			expect( lastSearchResultItemHTML ).toEqual(
-				expect.stringContaining( 'Press ENTER to add this link' )
+			expect( lastSearchResultItem ).toHaveTextContent( searchTerm );
+			expect( lastSearchResultItem ).toHaveTextContent( 'URL' );
+			expect( lastSearchResultItem ).toHaveTextContent(
+				'Press ENTER to add this link'
 			);
 		}
 	);
 
 	it( 'should not display a URL suggestion as a default fallback when noURLSuggestion is passed.', async () => {
-		act( () => {
-			render( <LinkControl noURLSuggestion />, container );
-		} );
+		const user = userEvent.setup();
+		const { container } = render( <LinkControl noURLSuggestion /> );
 
 		// Search Input UI.
 		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, {
-				target: { value: 'couldbeurlorentitysearchterm' },
-			} );
-		} );
+		searchInput.focus();
+		await user.keyboard( 'couldbeurlorentitysearchterm' );
 
 		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 		await eventLoopTick();
-		// TODO: select these by aria relationship to autocomplete rather than arbitrary selector.
 
-		const searchResultElements = getSearchResults();
+		const searchResultElements = getSearchResults( container );
 
 		// We should see a search result for each of the expect search suggestions and nothing else.
 		expect( searchResultElements ).toHaveLength(
@@ -568,40 +544,26 @@ describe( 'Manual link entry', () => {
 	] )(
 		'should display a single suggestion result when the current input value is URL-like (eg: %s)',
 		async ( searchTerm ) => {
-			act( () => {
-				render( <LinkControl />, container );
-			} );
+			const user = userEvent.setup();
+			const { container } = render( <LinkControl /> );
 
 			// Search Input UI.
 			const searchInput = getURLInput();
 
 			// Simulate searching for a term.
-			act( () => {
-				Simulate.change( searchInput, {
-					target: { value: searchTerm },
-				} );
-			} );
+			searchInput.focus();
+			await user.keyboard( searchTerm );
 
 			// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 			await eventLoopTick();
 
-			const searchResultElements = getSearchResults();
+			const searchResultElements = getSearchResults( container );
 
-			const firstSearchResultItemHTML =
-				searchResultElements[ 0 ].innerHTML;
-			const expectedResultsLength = 1;
-
-			expect( searchResultElements ).toHaveLength(
-				expectedResultsLength
-			);
-			expect( firstSearchResultItemHTML ).toEqual(
-				expect.stringContaining( searchTerm )
-			);
-			expect( firstSearchResultItemHTML ).toEqual(
-				expect.stringContaining( 'URL' )
-			);
-			expect( firstSearchResultItemHTML ).toEqual(
-				expect.stringContaining( 'Press ENTER to add this link' )
+			expect( searchResultElements ).toHaveLength( 1 );
+			expect( searchResultElements[ 0 ] ).toHaveTextContent( searchTerm );
+			expect( searchResultElements[ 0 ] ).toHaveTextContent( 'URL' );
+			expect( searchResultElements[ 0 ] ).toHaveTextContent(
+				'Press ENTER to add this link'
 			);
 		}
 	);
@@ -609,97 +571,94 @@ describe( 'Manual link entry', () => {
 	describe( 'Handling of empty values', () => {
 		const testTable = [
 			[ 'containing only spaces', '        ' ],
-			[ 'containing only tabs', '		' ],
+			[ 'containing only tabs', '[Tab]' ],
 			[ 'from strings with no length', '' ],
 		];
 
 		it.each( testTable )(
 			'should not allow creation of links %s when using the keyboard',
 			async ( _desc, searchString ) => {
-				act( () => {
-					render( <LinkControl />, container );
-				} );
+				const user = userEvent.setup();
+
+				render( <LinkControl /> );
 
 				// Search Input UI.
 				const searchInput = getURLInput();
 
-				let submitButton = queryByRole( container, 'button', {
+				let submitButton = screen.queryByRole( 'button', {
 					name: 'Submit',
 				} );
 
-				expect( submitButton.disabled ).toBeTruthy();
-				expect( submitButton ).not.toBeNull();
-				expect( submitButton ).toBeInTheDocument();
+				expect( submitButton ).toBeDisabled();
+				expect( submitButton ).toBeVisible();
 
-				// Simulate searching for a term.
-				act( () => {
-					Simulate.change( searchInput, {
-						target: { value: searchString },
-					} );
-				} );
+				searchInput.focus();
+				if ( searchString.length ) {
+					// Simulate searching for a term.
+					await user.keyboard( searchString );
+				} else {
+					// Simulate clearing the search term.
+					await userEvent.clear( searchInput );
+				}
 
 				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 				await eventLoopTick();
 
 				// Attempt to submit the empty search value in the input.
-				act( () => {
-					Simulate.keyDown( searchInput, { keyCode: ENTER } );
-				} );
+				await user.keyboard( '[Enter]' );
 
-				submitButton = queryByRole( container, 'button', {
+				submitButton = screen.queryByRole( 'button', {
 					name: 'Submit',
 				} );
 
 				// Verify the UI hasn't allowed submission.
 				expect( searchInput ).toBeInTheDocument();
-				expect( submitButton.disabled ).toBeTruthy();
-				expect( submitButton ).not.toBeNull();
-				expect( submitButton ).toBeInTheDocument();
+				expect( submitButton ).toBeDisabled();
+				expect( submitButton ).toBeVisible();
 			}
 		);
 
 		it.each( testTable )(
 			'should not allow creation of links %s via the UI "submit" button',
 			async ( _desc, searchString ) => {
-				act( () => {
-					render( <LinkControl />, container );
-				} );
+				const user = userEvent.setup();
+
+				render( <LinkControl /> );
 
 				// Search Input UI.
 				const searchInput = getURLInput();
 
-				let submitButton = queryByRole( container, 'button', {
+				let submitButton = screen.queryByRole( 'button', {
 					name: 'Submit',
 				} );
 
-				expect( submitButton.disabled ).toBeTruthy();
-				expect( submitButton ).not.toBeNull();
-				expect( submitButton ).toBeInTheDocument();
+				expect( submitButton ).toBeDisabled();
+				expect( submitButton ).toBeVisible();
 
 				// Simulate searching for a term.
-				act( () => {
-					Simulate.change( searchInput, {
-						target: { value: searchString },
-					} );
-				} );
+				searchInput.focus();
+				if ( searchString.length ) {
+					// Simulate searching for a term.
+					await user.keyboard( searchString );
+				} else {
+					// Simulate clearing the search term.
+					await userEvent.clear( searchInput );
+				}
 
 				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 				await eventLoopTick();
 
 				// Attempt to submit the empty search value in the input.
-				act( () => {
-					Simulate.click( submitButton );
-				} );
+				await user.click( submitButton );
 
-				submitButton = queryByRole( container, 'button', {
+				submitButton = screen.queryByRole( 'button', {
 					name: 'Submit',
 				} );
 
 				// Verify the UI hasn't allowed submission.
 				expect( searchInput ).toBeInTheDocument();
-				expect( submitButton.disabled ).toBeTruthy();
-				expect( submitButton ).not.toBeNull();
-				expect( submitButton ).toBeInTheDocument();
+				expect( submitButton ).toBeDisabled();
+				expect( submitButton ).toBeVisible();
 			}
 		);
 	} );
@@ -712,40 +671,30 @@ describe( 'Manual link entry', () => {
 		] )(
 			'should recognise "%s" as a %s link and handle as manual entry by displaying a single suggestion',
 			async ( searchTerm, searchType ) => {
-				act( () => {
-					render( <LinkControl />, container );
-				} );
+				const user = userEvent.setup();
+				const { container } = render( <LinkControl /> );
 
 				// Search Input UI.
 				const searchInput = getURLInput();
 
 				// Simulate searching for a term.
-				act( () => {
-					Simulate.change( searchInput, {
-						target: { value: searchTerm },
-					} );
-				} );
+				searchInput.focus();
+				await user.keyboard( searchTerm );
 
 				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 				await eventLoopTick();
 
-				const searchResultElements = getSearchResults();
+				const searchResultElements = getSearchResults( container );
 
-				const firstSearchResultItemHTML =
-					searchResultElements[ 0 ].innerHTML;
-				const expectedResultsLength = 1;
-
-				expect( searchResultElements ).toHaveLength(
-					expectedResultsLength
-				);
-				expect( firstSearchResultItemHTML ).toEqual(
-					expect.stringContaining( searchTerm )
+				expect( searchResultElements ).toHaveLength( 1 );
+				expect( searchResultElements[ 0 ] ).toHaveTextContent(
+					searchTerm
 				);
-				expect( firstSearchResultItemHTML ).toEqual(
-					expect.stringContaining( searchType )
+				expect( searchResultElements[ 0 ] ).toHaveTextContent(
+					searchType
 				);
-				expect( firstSearchResultItemHTML ).toEqual(
-					expect.stringContaining( 'Press ENTER to add this link' )
+				expect( searchResultElements[ 0 ] ).toHaveTextContent(
+					'Press ENTER to add this link'
 				);
 			}
 		);
@@ -756,27 +705,20 @@ describe( 'Default search suggestions', () => {
 	it( 'should display a list of initial search suggestions when there is no search value or suggestions', async () => {
 		const expectedResultsLength = 3; // Set within `LinkControl`.
 
-		act( () => {
-			render( <LinkControl showInitialSuggestions />, container );
-		} );
+		render( <LinkControl showInitialSuggestions /> );
 
 		await eventLoopTick();
 
-		// Search Input UI.
-		const searchInput = getURLInput();
-
-		const searchResultsWrapper =
-			container.querySelector( '[role="listbox"]' );
-		const initialSearchResultElements =
-			searchResultsWrapper.querySelectorAll( '[role="option"]' );
-
-		const searchResultsLabel = container.querySelector(
-			`#${ searchResultsWrapper.getAttribute( 'aria-labelledby' ) }`
-		);
+		expect(
+			screen.queryByRole( 'listbox', {
+				name: 'Recently updated',
+			} )
+		).toBeVisible();
 
 		// Verify input has no value has default suggestions should only show
 		// when this does not have a value.
-		expect( searchInput.value ).toBe( '' );
+		// Search Input UI.
+		expect( getURLInput() ).toHaveValue( '' );
 
 		// Ensure only called once as a guard against potential infinite
 		// re-render loop within `componentDidUpdate` calling `updateSuggestions`
@@ -784,25 +726,22 @@ describe( 'Default search suggestions', () => {
 		expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
 
 		// Verify the search results already display the initial suggestions.
-		expect( initialSearchResultElements ).toHaveLength(
+		expect( screen.queryAllByRole( 'option' ) ).toHaveLength(
 			expectedResultsLength
 		);
-
-		expect( searchResultsLabel.innerHTML ).toEqual( 'Recently updated' );
 	} );
 
 	it( 'should not display initial suggestions when input value is present', async () => {
+		const user = userEvent.setup();
+
 		// Render with an initial value an ensure that no initial suggestions
 		// are shown.
-		act( () => {
-			render(
-				<LinkControl
-					showInitialSuggestions
-					value={ fauxEntitySuggestions[ 0 ] }
-				/>,
-				container
-			);
-		} );
+		const { container } = render(
+			<LinkControl
+				showInitialSuggestions
+				value={ fauxEntitySuggestions[ 0 ] }
+			/>
+		);
 
 		await eventLoopTick();
 
@@ -813,34 +752,31 @@ describe( 'Default search suggestions', () => {
 		const currentLinkUI = getCurrentLink();
 		const currentLinkBtn = currentLinkUI.querySelector( 'button' );
 
-		act( () => {
-			Simulate.click( currentLinkBtn );
-		} );
+		await user.click( currentLinkBtn );
 
 		const searchInput = getURLInput();
 		searchInput.focus();
 
 		await eventLoopTick();
 
-		const searchResultElements = getSearchResults();
+		const searchResultElements = getSearchResults( container );
 
 		// Search input is set to the URL value.
-		expect( searchInput.value ).toEqual( fauxEntitySuggestions[ 0 ].url );
+		expect( searchInput ).toHaveValue( fauxEntitySuggestions[ 0 ].url );
 
 		// It should match any url that's like ?p= and also include a URL option.
 		expect( searchResultElements ).toHaveLength( 5 );
 
-		expect( searchInput.getAttribute( 'aria-expanded' ) ).toBe( 'true' );
+		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
 
 		expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	it( 'should display initial suggestions when input value is manually deleted', async () => {
+		const user = userEvent.setup();
 		const searchTerm = 'Hello world';
 
-		act( () => {
-			render( <LinkControl showInitialSuggestions />, container );
-		} );
+		const { container } = render( <LinkControl showInitialSuggestions /> );
 
 		let searchResultElements;
 		let searchInput;
@@ -849,36 +785,33 @@ describe( 'Default search suggestions', () => {
 		searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, { target: { value: searchTerm } } );
-		} );
+		searchInput.focus();
+		await user.keyboard( searchTerm );
 
 		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 		await eventLoopTick();
 
-		expect( searchInput.value ).toBe( searchTerm );
+		expect( searchInput ).toHaveValue( searchTerm );
 
-		searchResultElements = getSearchResults();
+		searchResultElements = getSearchResults( container );
 
 		// Delete the text.
-		act( () => {
-			Simulate.change( searchInput, { target: { value: '' } } );
-		} );
+		await userEvent.clear( searchInput );
 
 		await eventLoopTick();
 
-		searchResultElements = getSearchResults();
+		searchResultElements = getSearchResults( container );
 
 		searchInput = getURLInput();
 
 		// Check the input is empty now.
-		expect( searchInput.value ).toBe( '' );
+		expect( searchInput ).toHaveValue( '' );
 
-		const searchResultLabel = container.querySelector(
-			'.block-editor-link-control__search-results-label'
-		);
-
-		expect( searchResultLabel.innerHTML ).toBe( 'Recently updated' );
+		expect(
+			screen.queryByRole( 'listbox', {
+				name: 'Recently updated',
+			} )
+		).toBeVisible();
 
 		expect( searchResultElements ).toHaveLength( 3 );
 	} );
@@ -890,25 +823,23 @@ describe( 'Default search suggestions', () => {
 			Promise.resolve( noResults )
 		);
 
-		act( () => {
-			render( <LinkControl showInitialSuggestions />, container );
-		} );
+		const { container } = render( <LinkControl showInitialSuggestions /> );
 
 		await eventLoopTick();
 
 		const searchInput = getURLInput();
 
-		const searchResultElements = getSearchResults();
+		const searchResultElements = getSearchResults( container );
 
 		const searchResultLabel = container.querySelector(
 			'.block-editor-link-control__search-results-label'
 		);
 
-		expect( searchResultLabel ).toBeFalsy();
+		expect( searchResultLabel ).not.toBeInTheDocument();
 
 		expect( searchResultElements ).toHaveLength( 0 );
 
-		expect( searchInput.getAttribute( 'aria-expanded' ) ).toBe( 'false' );
+		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'false' );
 	} );
 } );
 
@@ -928,6 +859,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 	] )(
 		'should allow creating a link for a valid Entity title "%s" (%s)',
 		async ( entityNameText ) => {
+			const user = userEvent.setup();
 			let resolver;
 			let resolvedEntity;
 
@@ -958,43 +890,29 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 				);
 			};
 
-			act( () => {
-				render( <LinkControlConsumer />, container );
-			} );
+			const { container } = render( <LinkControlConsumer /> );
 
 			// Search Input UI.
-			const searchInput = container.querySelector(
-				'input[aria-label="URL"]'
-			);
+			const searchInput = getURLInput();
 
 			// Simulate searching for a term.
-			act( () => {
-				Simulate.change( searchInput, {
-					target: { value: entityNameText },
-				} );
-			} );
+			searchInput.focus();
+			await user.keyboard( entityNameText );
 
 			await eventLoopTick();
 
-			// TODO: select these by aria relationship to autocomplete rather than arbitrary selector.
-			const searchResultElements = container.querySelectorAll(
-				'[role="listbox"] [role="option"]'
-			);
+			const searchResultElements = screen.queryAllByRole( 'option' );
 
 			const createButton = Array.from( searchResultElements ).filter(
 				( result ) => result.innerHTML.includes( 'Create:' )
 			)[ 0 ];
 
-			expect( createButton ).not.toBeNull();
-			expect( createButton.innerHTML ).toEqual(
-				expect.stringContaining( entityNameText )
-			);
+			expect( createButton ).toBeVisible();
+			expect( createButton ).toHaveTextContent( entityNameText );
 
 			// No need to wait in this test because we control the Promise
 			// resolution manually via the `resolver` reference.
-			act( () => {
-				Simulate.click( createButton );
-			} );
+			await user.click( createButton );
 
 			await eventLoopTick();
 
@@ -1002,14 +920,10 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			const loadingIndicator = container.querySelector(
 				'.block-editor-link-control__loading'
 			);
-			const currentLinkLabel = container.querySelector(
-				'[aria-label="Currently selected"]'
-			);
+			const currentLinkLabel = getCurrentLink();
 
-			expect( currentLinkLabel ).toBeNull();
-			expect( loadingIndicator.innerHTML ).toEqual(
-				expect.stringContaining( 'Creating' )
-			);
+			expect( currentLinkLabel ).not.toBeInTheDocument();
+			expect( loadingIndicator ).toHaveTextContent( 'Creating' );
 
 			// Resolve the `createSuggestion` promise.
 			await act( async () => {
@@ -1018,22 +932,15 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			await eventLoopTick();
 
-			const currentLink = container.querySelector(
-				'[aria-label="Currently selected"]'
-			);
-
-			const currentLinkHTML = currentLink.innerHTML;
+			const currentLink = getCurrentLink();
 
-			expect( currentLinkHTML ).toEqual(
-				expect.stringContaining( entityNameText )
-			);
-			expect( currentLinkHTML ).toEqual(
-				expect.stringContaining( '/?p=123' )
-			);
+			expect( currentLink ).toHaveTextContent( entityNameText );
+			expect( currentLink ).toHaveTextContent( '/?p=123' );
 		}
 	);
 
 	it( 'should allow createSuggestion prop to return a non-Promise value', async () => {
+		const user = userEvent.setup();
 		const LinkControlConsumer = () => {
 			const [ link, setLink ] = useState( null );
 
@@ -1053,21 +960,14 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			);
 		};
 
-		act( () => {
-			render( <LinkControlConsumer />, container );
-		} );
+		const { container } = render( <LinkControlConsumer /> );
 
 		// Search Input UI.
-		const searchInput = container.querySelector(
-			'input[aria-label="URL"]'
-		);
+		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, {
-				target: { value: 'Some new page to create' },
-			} );
-		} );
+		searchInput.focus();
+		await user.keyboard( 'Some new page to create' );
 
 		await eventLoopTick();
 
@@ -1080,27 +980,18 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			( result ) => result.innerHTML.includes( 'Create:' )
 		)[ 0 ];
 
-		await act( async () => {
-			Simulate.click( createButton );
-		} );
+		await user.click( createButton );
 
 		await eventLoopTick();
 
-		const currentLink = container.querySelector(
-			'[aria-label="Currently selected"]'
-		);
-
-		const currentLinkHTML = currentLink.innerHTML;
+		const currentLink = getCurrentLink();
 
-		expect( currentLinkHTML ).toEqual(
-			expect.stringContaining( 'Some new page to create' )
-		);
-		expect( currentLinkHTML ).toEqual(
-			expect.stringContaining( '/?p=123' )
-		);
+		expect( currentLink ).toHaveTextContent( 'Some new page to create' );
+		expect( currentLink ).toHaveTextContent( '/?p=123' );
 	} );
 
 	it( 'should allow creation of entities via the keyboard', async () => {
+		const user = userEvent.setup();
 		const entityNameText = 'A new page to be created';
 
 		const LinkControlConsumer = () => {
@@ -1124,21 +1015,14 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			);
 		};
 
-		act( () => {
-			render( <LinkControlConsumer />, container );
-		} );
+		const { container } = render( <LinkControlConsumer /> );
 
 		// Search Input UI.
-		const searchInput = container.querySelector(
-			'input[aria-label="URL"]'
-		);
+		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, {
-				target: { value: entityNameText },
-			} );
-		} );
+		searchInput.focus();
+		await user.keyboard( entityNameText );
 
 		await eventLoopTick();
 
@@ -1151,32 +1035,21 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		)[ 0 ];
 
 		// Step down into the search results, highlighting the first result item.
-		act( () => {
-			Simulate.keyDown( searchInput, { keyCode: DOWN } );
-		} );
+		triggerArrowDown( searchInput );
 
-		act( () => {
-			Simulate.keyDown( createButton, { keyCode: ENTER } );
-		} );
+		createButton.focus();
+		await user.keyboard( '[Enter]' );
 
-		await act( async () => {
-			Simulate.keyDown( searchInput, { keyCode: ENTER } );
-		} );
+		searchInput.focus();
+		await user.keyboard( '[Enter]' );
 
 		await eventLoopTick();
 
-		const currentLink = container.querySelector(
-			'[aria-label="Currently selected"]'
-		);
-
-		const currentLinkHTML = currentLink.innerHTML;
-
-		expect( currentLinkHTML ).toEqual(
-			expect.stringContaining( entityNameText )
-		);
+		expect( getCurrentLink() ).toHaveTextContent( entityNameText );
 	} );
 
 	it( 'should allow customisation of button text', async () => {
+		const user = userEvent.setup();
 		const entityNameText = 'A new page to be created';
 
 		const LinkControlConsumer = () => {
@@ -1188,21 +1061,14 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			);
 		};
 
-		act( () => {
-			render( <LinkControlConsumer />, container );
-		} );
+		const { container } = render( <LinkControlConsumer /> );
 
 		// Search Input UI.
-		const searchInput = container.querySelector(
-			'input[aria-label="URL"]'
-		);
+		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, {
-				target: { value: entityNameText },
-			} );
-		} );
+		searchInput.focus();
+		await user.keyboard( entityNameText );
 
 		await eventLoopTick();
 
@@ -1215,26 +1081,22 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			( result ) => result.innerHTML.includes( 'Custom suggestion text' )
 		)[ 0 ];
 
-		expect( createButton ).not.toBeNull();
+		expect( createButton ).toBeVisible();
 	} );
 
 	describe( 'Do not show create option', () => {
 		it.each( [ [ undefined ], [ null ], [ false ] ] )(
 			'should not show not show an option to create an entity when "createSuggestion" handler is %s',
 			async ( handler ) => {
-				act( () => {
-					render(
-						<LinkControl createSuggestion={ handler } />,
-						container
-					);
-				} );
+				const { container } = render(
+					<LinkControl createSuggestion={ handler } />
+				);
+
 				// Await the initial suggestions to be fetched.
 				await eventLoopTick();
 
 				// Search Input UI.
-				const searchInput = container.querySelector(
-					'input[aria-label="URL"]'
-				);
+				const searchInput = getURLInput();
 
 				// TODO: select these by aria relationship to autocomplete rather than arbitrary selector.
 				const searchResultElements = container.querySelectorAll(
@@ -1245,28 +1107,24 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 				)[ 0 ];
 
 				// Verify input has no value.
-				expect( searchInput.value ).toBe( '' );
+				expect( searchInput ).toHaveValue( '' );
 				expect( createButton ).toBeFalsy(); // Shouldn't exist!
 			}
 		);
 
 		it( 'should not show not show an option to create an entity when input is empty', async () => {
-			act( () => {
-				render(
-					<LinkControl
-						showInitialSuggestions={ true } // Should show even if we're not showing initial suggestions.
-						createSuggestion={ jest.fn() }
-					/>,
-					container
-				);
-			} );
+			const { container } = render(
+				<LinkControl
+					showInitialSuggestions={ true } // Should show even if we're not showing initial suggestions.
+					createSuggestion={ jest.fn() }
+				/>
+			);
+
 			// Await the initial suggestions to be fetched.
 			await eventLoopTick();
 
 			// Search Input UI.
-			const searchInput = container.querySelector(
-				'input[aria-label="URL"]'
-			);
+			const searchInput = getURLInput();
 
 			// TODO: select these by aria relationship to autocomplete rather than arbitrary selector.
 			const searchResultElements = container.querySelectorAll(
@@ -1277,7 +1135,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			)[ 0 ];
 
 			// Verify input has no value.
-			expect( searchInput.value ).toBe( '' );
+			expect( searchInput ).toHaveValue( '' );
 			expect( createButton ).toBeFalsy(); // Shouldn't exist!
 		} );
 
@@ -1290,24 +1148,17 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		] )(
 			'should not show option to "Create Page" when text is a form of direct entry (eg: %s)',
 			async ( inputText ) => {
-				act( () => {
-					render(
-						<LinkControl createSuggestion={ jest.fn() } />,
-						container
-					);
-				} );
+				const user = userEvent.setup();
+				const { container } = render(
+					<LinkControl createSuggestion={ jest.fn() } />
+				);
 
 				// Search Input UI.
-				const searchInput = container.querySelector(
-					'input[aria-label="URL"]'
-				);
+				const searchInput = getURLInput();
 
 				// Simulate searching for a term.
-				act( () => {
-					Simulate.change( searchInput, {
-						target: { value: inputText },
-					} );
-				} );
+				searchInput.focus();
+				await user.keyboard( inputText );
 
 				await eventLoopTick();
 
@@ -1327,6 +1178,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 	describe( 'Error handling', () => {
 		it( 'should display human-friendly, perceivable error notice and re-show create button and search input if page creation request fails', async () => {
+			const user = userEvent.setup();
 			const searchText = 'This page to be created';
 			let searchInput;
 
@@ -1336,22 +1188,16 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			const createSuggestion = () => Promise.reject( throwsError() );
 
-			act( () => {
-				render(
-					<LinkControl createSuggestion={ createSuggestion } />,
-					container
-				);
-			} );
+			const { container } = render(
+				<LinkControl createSuggestion={ createSuggestion } />
+			);
 
 			// Search Input UI.
-			searchInput = container.querySelector( 'input[aria-label="URL"]' );
+			searchInput = getURLInput();
 
 			// Simulate searching for a term.
-			act( () => {
-				Simulate.change( searchInput, {
-					target: { value: searchText },
-				} );
-			} );
+			searchInput.focus();
+			await user.keyboard( searchText );
 
 			await eventLoopTick();
 
@@ -1363,13 +1209,11 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 				( result ) => result.innerHTML.includes( 'Create:' )
 			)[ 0 ];
 
-			await act( async () => {
-				Simulate.click( createButton );
-			} );
+			await user.click( createButton );
 
 			await eventLoopTick();
 
-			searchInput = container.querySelector( 'input[aria-label="URL"]' );
+			searchInput = getURLInput();
 
 			// This is a Notice component
 			// we allow selecting by className here as an edge case because the
@@ -1383,16 +1227,14 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			expect( throwsError ).toThrow( Error );
 
 			// Check human readable error notice is perceivable.
-			expect( errorNotice ).not.toBeFalsy();
-			expect( errorNotice.innerHTML ).toEqual(
-				expect.stringContaining(
-					'API response returned invalid entity'
-				)
+			expect( errorNotice ).toBeVisible();
+			expect( errorNotice ).toHaveTextContent(
+				'API response returned invalid entity'
 			);
 
 			// Verify input is repopulated with original search text.
-			expect( searchInput ).not.toBeFalsy();
-			expect( searchInput.value ).toBe( searchText );
+			expect( searchInput ).toBeVisible();
+			expect( searchInput ).toHaveValue( searchText );
 
 			// Verify search results are re-shown and create button is available.
 			searchResultElements = container.querySelectorAll(
@@ -1415,27 +1257,22 @@ describe( 'Selecting links', () => {
 			return <LinkControl value={ link } />;
 		};
 
-		act( () => {
-			render( <LinkControlConsumer />, container );
-		} );
+		render( <LinkControlConsumer /> );
 
-		// TODO: select by aria role or visible text.
 		const currentLink = getCurrentLink();
-		const currentLinkHTML = currentLink.innerHTML;
 		const currentLinkAnchor = currentLink.querySelector(
 			`[href="${ selectedLink.url }"]`
 		);
 
-		expect( currentLinkHTML ).toEqual(
-			expect.stringContaining( selectedLink.title )
-		);
+		expect( currentLink ).toHaveTextContent( selectedLink.title );
 		expect(
-			queryByRole( currentLink, 'button', { name: 'Edit' } )
-		).toBeTruthy();
-		expect( currentLinkAnchor ).not.toBeNull();
+			screen.queryByRole( 'button', { name: 'Edit' } )
+		).toBeVisible();
+		expect( currentLinkAnchor ).toBeVisible();
 	} );
 
-	it( 'should hide "selected" link UI and display search UI prepopulated with previously selected link title when "Change" button is clicked', () => {
+	it( 'should hide "selected" link UI and display search UI prepopulated with previously selected link title when "Change" button is clicked', async () => {
+		const user = userEvent.setup();
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
@@ -1449,26 +1286,22 @@ describe( 'Selecting links', () => {
 			);
 		};
 
-		act( () => {
-			render( <LinkControlConsumer />, container );
-		} );
+		render( <LinkControlConsumer /> );
 
 		// Required in order to select the button below.
 		let currentLinkUI = getCurrentLink();
 		const currentLinkBtn = currentLinkUI.querySelector( 'button' );
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.click( currentLinkBtn );
-		} );
+		await user.click( currentLinkBtn );
 
 		const searchInput = getURLInput();
 		currentLinkUI = getCurrentLink();
 
 		// We should be back to showing the search input.
-		expect( searchInput ).not.toBeNull();
-		expect( searchInput.value ).toBe( selectedLink.url ); // Prepopulated with previous link's URL.
-		expect( currentLinkUI ).toBeNull();
+		expect( searchInput ).toBeVisible();
+		expect( searchInput ).toHaveValue( selectedLink.url ); // Prepopulated with previous link's URL.
+		expect( currentLinkUI ).not.toBeInTheDocument();
 	} );
 
 	describe( 'Selection using mouse click', () => {
@@ -1487,6 +1320,7 @@ describe( 'Selecting links', () => {
 		] )(
 			'should display a current selected link UI when a %s suggestion for the search "%s" is clicked',
 			async ( type, searchTerm, selectedLink ) => {
+				const user = userEvent.setup();
 				const LinkControlConsumer = () => {
 					const [ link, setLink ] = useState();
 
@@ -1498,48 +1332,36 @@ describe( 'Selecting links', () => {
 					);
 				};
 
-				act( () => {
-					render( <LinkControlConsumer />, container );
-				} );
+				const { container } = render( <LinkControlConsumer /> );
 
 				// Search Input UI.
 				const searchInput = getURLInput();
 
 				// Simulate searching for a term.
-				act( () => {
-					Simulate.change( searchInput, {
-						target: { value: searchTerm },
-					} );
-				} );
+				searchInput.focus();
+				await user.keyboard( searchTerm );
 
 				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 				await eventLoopTick();
 
-				const searchResultElements = getSearchResults();
+				const searchResultElements = getSearchResults( container );
 
 				const firstSearchSuggestion = searchResultElements[ 0 ];
 
 				// Simulate selecting the first of the search suggestions.
-				act( () => {
-					Simulate.click( firstSearchSuggestion );
-				} );
+				await user.click( firstSearchSuggestion );
 
-				const currentLink = container.querySelector(
-					'.block-editor-link-control__search-item.is-current'
-				);
-				const currentLinkHTML = currentLink.innerHTML;
+				const currentLink = getCurrentLink();
 				const currentLinkAnchor = currentLink.querySelector(
 					`[href="${ selectedLink.url }"]`
 				);
 
 				// Check that this suggestion is now shown as selected.
-				expect( currentLinkHTML ).toEqual(
-					expect.stringContaining( selectedLink.title )
-				);
-				expect( currentLinkHTML ).toEqual(
-					expect.stringContaining( 'Edit' )
-				);
-				expect( currentLinkAnchor ).not.toBeNull();
+				expect( currentLink ).toHaveTextContent( selectedLink.title );
+				expect(
+					screen.getByRole( 'button', { name: 'Edit' } )
+				).toBeVisible();
+				expect( currentLinkAnchor ).toBeVisible();
 			}
 		);
 	} );
@@ -1560,6 +1382,7 @@ describe( 'Selecting links', () => {
 		] )(
 			'should display a current selected link UI when an %s suggestion for the search "%s" is selected using the keyboard',
 			async ( type, searchTerm, selectedLink ) => {
+				const user = userEvent.setup();
 				const LinkControlConsumer = () => {
 					const [ link, setLink ] = useState();
 
@@ -1571,37 +1394,27 @@ describe( 'Selecting links', () => {
 					);
 				};
 
-				act( () => {
-					render( <LinkControlConsumer />, container );
-				} );
+				const { container } = render( <LinkControlConsumer /> );
 
 				// Search Input UI.
 				const searchInput = getURLInput();
-				searchInput.focus();
 
 				// Simulate searching for a term.
-				act( () => {
-					Simulate.change( searchInput, {
-						target: { value: searchTerm },
-					} );
-				} );
+				searchInput.focus();
+				await user.keyboard( searchTerm );
 
 				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 				await eventLoopTick();
 
 				// Step down into the search results, highlighting the first result item.
-				act( () => {
-					Simulate.keyDown( searchInput, { keyCode: DOWN } );
-				} );
+				triggerArrowDown( searchInput );
 
-				const searchResultElements = getSearchResults();
+				const searchResultElements = getSearchResults( container );
 
 				const firstSearchSuggestion = searchResultElements[ 0 ];
 				const secondSearchSuggestion = searchResultElements[ 1 ];
 
-				let selectedSearchResultElement = container.querySelector(
-					'[role="option"][aria-selected="true"]'
-				);
+				let selectedSearchResultElement = getSelectedResultElement();
 
 				// We should have highlighted the first item using the keyboard.
 				expect( selectedSearchResultElement ).toEqual(
@@ -1611,13 +1424,9 @@ describe( 'Selecting links', () => {
 				// Only entity searches contain more than 1 suggestion.
 				if ( type === 'entity' ) {
 					// Check we can go down again using the down arrow.
-					act( () => {
-						Simulate.keyDown( searchInput, { keyCode: DOWN } );
-					} );
+					triggerArrowDown( searchInput );
 
-					selectedSearchResultElement = container.querySelector(
-						'[role="option"][aria-selected="true"]'
-					);
+					selectedSearchResultElement = getSelectedResultElement();
 
 					// We should have highlighted the first item using the keyboard
 					// eslint-disable-next-line jest/no-conditional-expect
@@ -1626,13 +1435,9 @@ describe( 'Selecting links', () => {
 					);
 
 					// Check we can go back up via up arrow.
-					act( () => {
-						Simulate.keyDown( searchInput, { keyCode: UP } );
-					} );
+					triggerArrowUp( searchInput );
 
-					selectedSearchResultElement = container.querySelector(
-						'[role="option"][aria-selected="true"]'
-					);
+					selectedSearchResultElement = getSelectedResultElement();
 
 					// We should be back to highlighting the first search result again
 					// eslint-disable-next-line jest/no-conditional-expect
@@ -1642,70 +1447,52 @@ describe( 'Selecting links', () => {
 				}
 
 				// Submit the selected item as the current link.
-				act( () => {
-					Simulate.keyDown( searchInput, { keyCode: ENTER } );
-				} );
+				triggerEnter( searchInput );
 
 				// Check that the suggestion selected via is now shown as selected.
-				const currentLink = container.querySelector(
-					'.block-editor-link-control__search-item.is-current'
-				);
-				const currentLinkHTML = currentLink.innerHTML;
+				const currentLink = getCurrentLink();
 				const currentLinkAnchor = currentLink.querySelector(
 					`[href="${ selectedLink.url }"]`
 				);
 
 				// Make sure focus is retained after submission.
-				expect( container.contains( document.activeElement ) ).toBe(
-					true
-				);
+				expect( container ).toContainElement( document.activeElement );
 
-				expect( currentLinkHTML ).toEqual(
-					expect.stringContaining( selectedLink.title )
-				);
-				expect( currentLinkHTML ).toEqual(
-					expect.stringContaining( 'Edit' )
-				);
-				expect( currentLinkAnchor ).not.toBeNull();
+				expect( currentLink ).toHaveTextContent( selectedLink.title );
+				expect(
+					screen.getByRole( 'button', { name: 'Edit' } )
+				).toBeVisible();
+				expect( currentLinkAnchor ).toBeVisible();
 			}
 		);
 
 		it( 'should allow selection of initial search results via the keyboard', async () => {
-			act( () => {
-				render( <LinkControl showInitialSuggestions />, container );
-			} );
+			const { container } = render(
+				<LinkControl showInitialSuggestions />
+			);
 
 			await eventLoopTick();
 
-			const searchResultsWrapper =
-				container.querySelector( '[role="listbox"]' );
-
-			const searchResultsLabel = container.querySelector(
-				`#${ searchResultsWrapper.getAttribute( 'aria-labelledby' ) }`
-			);
-
-			expect( searchResultsLabel.innerHTML ).toEqual(
-				'Recently updated'
-			);
+			expect(
+				screen.queryByRole( 'listbox', {
+					name: 'Recently updated',
+				} )
+			).toBeVisible();
 
 			// Search Input UI.
 			const searchInput = getURLInput();
 
 			// Step down into the search results, highlighting the first result item.
-			act( () => {
-				Simulate.keyDown( searchInput, { keyCode: DOWN } );
-			} );
+			triggerArrowDown( searchInput );
 
 			await eventLoopTick();
 
-			const searchResultElements = getSearchResults();
+			const searchResultElements = getSearchResults( container );
 
 			const firstSearchSuggestion = searchResultElements[ 0 ];
 			const secondSearchSuggestion = searchResultElements[ 1 ];
 
-			let selectedSearchResultElement = container.querySelector(
-				'[role="option"][aria-selected="true"]'
-			);
+			let selectedSearchResultElement = getSelectedResultElement();
 
 			// We should have highlighted the first item using the keyboard.
 			expect( selectedSearchResultElement ).toEqual(
@@ -1713,13 +1500,9 @@ describe( 'Selecting links', () => {
 			);
 
 			// Check we can go down again using the down arrow.
-			act( () => {
-				Simulate.keyDown( searchInput, { keyCode: DOWN } );
-			} );
+			triggerArrowDown( searchInput );
 
-			selectedSearchResultElement = container.querySelector(
-				'[role="option"][aria-selected="true"]'
-			);
+			selectedSearchResultElement = getSelectedResultElement();
 
 			// We should have highlighted the first item using the keyboard.
 			expect( selectedSearchResultElement ).toEqual(
@@ -1727,13 +1510,9 @@ describe( 'Selecting links', () => {
 			);
 
 			// Check we can go back up via up arrow.
-			act( () => {
-				Simulate.keyDown( searchInput, { keyCode: UP } );
-			} );
+			triggerArrowUp( searchInput );
 
-			selectedSearchResultElement = container.querySelector(
-				'[role="option"][aria-selected="true"]'
-			);
+			selectedSearchResultElement = getSelectedResultElement();
 
 			// We should be back to highlighting the first search result again.
 			expect( selectedSearchResultElement ).toEqual(
@@ -1756,27 +1535,18 @@ describe( 'Addition Settings UI', () => {
 			return <LinkControl value={ link } />;
 		};
 
-		act( () => {
-			render( <LinkControlConsumer />, container );
-		} );
-
-		const newTabSettingLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find(
-			( label ) =>
-				label.innerHTML &&
-				label.innerHTML.includes( expectedSettingText )
-		);
+		const { container } = render( <LinkControlConsumer /> );
 
-		expect( newTabSettingLabel ).not.toBeUndefined(); // find() returns "undefined" if not found.
+		const newTabSettingLabel = screen.getByText( expectedSettingText );
+		expect( newTabSettingLabel ).toBeVisible();
 
 		const newTabSettingLabelForAttr =
 			newTabSettingLabel.getAttribute( 'for' );
 		const newTabSettingInput = container.querySelector(
 			`#${ newTabSettingLabelForAttr }`
 		);
-		expect( newTabSettingInput ).not.toBeNull();
-		expect( newTabSettingInput.checked ).toBe( false );
+		expect( newTabSettingInput ).toBeVisible();
+		expect( newTabSettingInput ).not.toBeChecked();
 	} );
 
 	it( 'should display a setting control with correct default state for each of the custom settings provided', async () => {
@@ -1793,10 +1563,6 @@ describe( 'Addition Settings UI', () => {
 			},
 		];
 
-		const customSettingsLabelsText = customSettings.map(
-			( setting ) => setting.title
-		);
-
 		const LinkControlConsumer = () => {
 			const [ link ] = useState( selectedLink );
 
@@ -1808,108 +1574,78 @@ describe( 'Addition Settings UI', () => {
 			);
 		};
 
-		act( () => {
-			render( <LinkControlConsumer />, container );
-		} );
-
-		// Grab the elements using user perceivable DOM queries.
-		const settingsLegend = Array.from(
-			container.querySelectorAll( 'legend' )
-		).find(
-			( legend ) =>
-				legend.innerHTML &&
-				legend.innerHTML.includes( 'Currently selected link settings' )
-		);
-		const settingsFieldset = settingsLegend.closest( 'fieldset' );
-		const settingControlsLabels = Array.from(
-			settingsFieldset.querySelectorAll( 'label' )
-		);
-		const settingControlsInputs = settingControlsLabels.map( ( label ) => {
-			return settingsFieldset.querySelector(
-				`#${ label.getAttribute( 'for' ) }`
-			);
-		} );
-
-		const settingControlLabelsText = Array.from(
-			settingControlsLabels
-		).map( ( label ) => label.innerHTML );
+		render( <LinkControlConsumer /> );
 
-		// Check we have the correct number of controls.
-		expect( settingControlsLabels ).toHaveLength( 2 );
+		expect( screen.queryAllByRole( 'checkbox' ) ).toHaveLength( 2 );
 
-		// Check the labels match.
-		expect( settingControlLabelsText ).toEqual(
-			expect.arrayContaining( customSettingsLabelsText )
-		);
-
-		// Assert the default "checked" states match the expected.
-		expect( settingControlsInputs[ 0 ].checked ).toEqual( false );
-		expect( settingControlsInputs[ 1 ].checked ).toEqual( true );
+		expect(
+			screen.getByRole( 'checkbox', {
+				name: customSettings[ 0 ].title,
+			} )
+		).not.toBeChecked();
+		expect(
+			screen.getByRole( 'checkbox', {
+				name: customSettings[ 1 ].title,
+			} )
+		).toBeChecked();
 	} );
 } );
 
 describe( 'Post types', () => {
 	it( 'should display post type in search results of link', async () => {
+		const user = userEvent.setup();
 		const searchTerm = 'Hello world';
 
-		act( () => {
-			render( <LinkControl />, container );
-		} );
+		const { container } = render( <LinkControl /> );
 
 		// Search Input UI.
 		const searchInput = getURLInput();
 
 		// Simulate searching for a term.
-		act( () => {
-			Simulate.change( searchInput, { target: { value: searchTerm } } );
-		} );
+		searchInput.focus();
+		await user.keyboard( searchTerm );
 
 		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 		await eventLoopTick();
 
-		const searchResultElements = getSearchResults();
+		const searchResultElements = getSearchResults( container );
 
 		searchResultElements.forEach( ( resultItem, index ) => {
-			expect(
-				queryByText( resultItem, fauxEntitySuggestions[ index ].type )
-			).toBeTruthy();
+			expect( resultItem ).toHaveTextContent(
+				fauxEntitySuggestions[ index ].type
+			);
 		} );
 	} );
 
 	it.each( [ 'page', 'post', 'tag', 'post_tag', 'category' ] )(
 		'should NOT display post type in search results of %s',
 		async ( postType ) => {
+			const user = userEvent.setup();
 			const searchTerm = 'Hello world';
 
-			act( () => {
-				render(
-					<LinkControl suggestionsQuery={ { type: postType } } />,
-					container
-				);
-			} );
+			const { container } = render(
+				<LinkControl suggestionsQuery={ { type: postType } } />
+			);
 
 			// Search Input UI.
 			const searchInput = getURLInput();
 
 			// Simulate searching for a term.
-			act( () => {
-				Simulate.change( searchInput, {
-					target: { value: searchTerm },
-				} );
-			} );
+			searchInput.focus();
+			await user.keyboard( searchTerm );
 
 			// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
 			await eventLoopTick();
 
-			const searchResultElements = getSearchResults();
+			const searchResultElements = getSearchResults( container );
 
 			searchResultElements.forEach( ( resultItem, index ) => {
 				expect(
-					queryByText(
+					screen.queryByText(
 						resultItem,
 						fauxEntitySuggestions[ index ].type
 					)
-				).toBeFalsy();
+				).not.toBeInTheDocument();
 			} );
 		}
 	);
@@ -1944,18 +1680,14 @@ describe( 'Rich link previews', () => {
 			} )
 		);
 
-		act( () => {
-			render( <LinkControl value={ selectedLink } />, container );
-		} );
+		render( <LinkControl value={ selectedLink } /> );
 
 		// mockFetchRichUrlData resolves on next "tick" of event loop.
 		await act( async () => {
 			await eventLoopTick();
 		} );
 
-		const linkPreview = container.querySelector(
-			"[aria-label='Currently selected']"
-		);
+		const linkPreview = getCurrentLink();
 
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
 
@@ -1974,21 +1706,14 @@ describe( 'Rich link previews', () => {
 			} )
 		);
 
-		act( () => {
-			render(
-				<LinkControl value={ selectedLink } hasRichPreviews />,
-				container
-			);
-		} );
+		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
 		// mockFetchRichUrlData resolves on next "tick" of event loop.
 		await act( async () => {
 			await eventLoopTick();
 		} );
 
-		const linkPreview = container.querySelector(
-			"[aria-label='Currently selected']"
-		);
+		const linkPreview = getCurrentLink();
 
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
 
@@ -2005,21 +1730,14 @@ describe( 'Rich link previews', () => {
 			} )
 		);
 
-		act( () => {
-			render(
-				<LinkControl value={ selectedLink } hasRichPreviews />,
-				container
-			);
-		} );
+		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
 		// mockFetchRichUrlData resolves on next "tick" of event loop.
 		await act( async () => {
 			await eventLoopTick();
 		} );
 
-		const linkPreview = container.querySelector(
-			"[aria-label='Currently selected']"
-		);
+		const linkPreview = getCurrentLink();
 
 		// Todo: refactor to use user-facing queries.
 		const hasRichImagePreview = linkPreview.querySelector(
@@ -2031,8 +1749,8 @@ describe( 'Rich link previews', () => {
 			'.block-editor-link-control__search-item-description'
 		);
 
-		expect( hasRichImagePreview ).toBeFalsy();
-		expect( hasRichDescriptionPreview ).toBeFalsy();
+		expect( hasRichImagePreview ).not.toBeInTheDocument();
+		expect( hasRichDescriptionPreview ).not.toBeInTheDocument();
 	} );
 
 	it( 'should display a fallback when title is missing from rich data', async () => {
@@ -2045,21 +1763,14 @@ describe( 'Rich link previews', () => {
 			} )
 		);
 
-		act( () => {
-			render(
-				<LinkControl value={ selectedLink } hasRichPreviews />,
-				container
-			);
-		} );
+		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
 		// mockFetchRichUrlData resolves on next "tick" of event loop.
 		await act( async () => {
 			await eventLoopTick();
 		} );
 
-		const linkPreview = container.querySelector(
-			"[aria-label='Currently selected']"
-		);
+		const linkPreview = getCurrentLink();
 
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
 		expect( isRichLinkPreview ).toBe( true );
@@ -2068,9 +1779,7 @@ describe( 'Rich link previews', () => {
 			'.block-editor-link-control__search-item-title'
 		);
 
-		expect( titlePreview.textContent ).toEqual(
-			expect.stringContaining( selectedLink.title )
-		);
+		expect( titlePreview ).toHaveTextContent( selectedLink.title );
 	} );
 
 	it( 'should display a fallback when icon is missing from rich data', async () => {
@@ -2083,21 +1792,14 @@ describe( 'Rich link previews', () => {
 			} )
 		);
 
-		act( () => {
-			render(
-				<LinkControl value={ selectedLink } hasRichPreviews />,
-				container
-			);
-		} );
+		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
 		// mockFetchRichUrlData resolves on next "tick" of event loop.
 		await act( async () => {
 			await eventLoopTick();
 		} );
 
-		const linkPreview = container.querySelector(
-			"[aria-label='Currently selected']"
-		);
+		const linkPreview = getCurrentLink();
 
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
 		expect( isRichLinkPreview ).toBe( true );
@@ -2109,8 +1811,8 @@ describe( 'Rich link previews', () => {
 		const fallBackIcon = iconPreview.querySelector( 'svg' );
 		const richIcon = iconPreview.querySelector( 'img' );
 
-		expect( fallBackIcon ).toBeTruthy();
-		expect( richIcon ).toBeFalsy();
+		expect( fallBackIcon ).toBeVisible();
+		expect( richIcon ).not.toBeInTheDocument();
 	} );
 
 	it.each( [ 'image', 'description' ] )(
@@ -2128,21 +1830,14 @@ describe( 'Rich link previews', () => {
 				return Promise.resolve( data );
 			} );
 
-			act( () => {
-				render(
-					<LinkControl value={ selectedLink } hasRichPreviews />,
-					container
-				);
-			} );
+			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
 			// mockFetchRichUrlData resolves on next "tick" of event loop.
 			await act( async () => {
 				await eventLoopTick();
 			} );
 
-			const linkPreview = container.querySelector(
-				"[aria-label='Currently selected']"
-			);
+			const linkPreview = getCurrentLink();
 
 			const isRichLinkPreview =
 				linkPreview.classList.contains( 'is-rich' );
@@ -2152,7 +1847,7 @@ describe( 'Rich link previews', () => {
 				`.block-editor-link-control__search-item-${ dataItem }`
 			);
 
-			expect( missingDataItem ).toBeFalsy();
+			expect( missingDataItem ).not.toBeInTheDocument();
 		}
 	);
 
@@ -2166,21 +1861,14 @@ describe( 'Rich link previews', () => {
 				Promise.resolve( data )
 			);
 
-			act( () => {
-				render(
-					<LinkControl value={ selectedLink } hasRichPreviews />,
-					container
-				);
-			} );
+			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
 			// mockFetchRichUrlData resolves on next "tick" of event loop.
 			await act( async () => {
 				await eventLoopTick();
 			} );
 
-			const linkPreview = container.querySelector(
-				"[aria-label='Currently selected']"
-			);
+			const linkPreview = getCurrentLink();
 
 			const isRichLinkPreview =
 				linkPreview.classList.contains( 'is-rich' );
@@ -2194,21 +1882,14 @@ describe( 'Rich link previews', () => {
 
 		mockFetchRichUrlData.mockImplementation( nonResolvingPromise );
 
-		act( () => {
-			render(
-				<LinkControl value={ selectedLink } hasRichPreviews />,
-				container
-			);
-		} );
+		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
 		// mockFetchRichUrlData resolves on next "tick" of event loop.
 		await act( async () => {
 			await eventLoopTick();
 		} );
 
-		const linkPreview = container.querySelector(
-			"[aria-label='Currently selected']"
-		);
+		const linkPreview = getCurrentLink();
 
 		const isFetchingRichPreview =
 			linkPreview.classList.contains( 'is-fetching' );
@@ -2223,21 +1904,14 @@ describe( 'Rich link previews', () => {
 
 		mockFetchRichUrlData.mockImplementation( simulateFailedFetch );
 
-		act( () => {
-			render(
-				<LinkControl value={ selectedLink } hasRichPreviews />,
-				container
-			);
-		} );
+		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
 		// mockFetchRichUrlData resolves on next "tick" of event loop.
 		await act( async () => {
 			await eventLoopTick();
 		} );
 
-		const linkPreview = container.querySelector(
-			"[aria-label='Currently selected']"
-		);
+		const linkPreview = getCurrentLink();
 
 		const isFetchingRichPreview =
 			linkPreview.classList.contains( 'is-fetching' );
@@ -2258,16 +1932,11 @@ describe( 'Controlling link title text', () => {
 	const selectedLink = fauxEntitySuggestions[ 0 ];
 
 	it( 'should not show a means to alter the link title text by default', async () => {
-		act( () => {
-			render(
-				<LinkControl value={ selectedLink } forceIsEditingLink />,
-				container
-			);
-		} );
+		render( <LinkControl value={ selectedLink } forceIsEditingLink /> );
 
 		expect(
-			queryByRole( container, 'textbox', { name: 'Text' } )
-		).toBeFalsy();
+			screen.queryByRole( 'textbox', { name: 'Text' } )
+		).not.toBeInTheDocument();
 	} );
 
 	it.each( [ null, undefined, '   ' ] )(
@@ -2278,38 +1947,32 @@ describe( 'Controlling link title text', () => {
 				url: urlValue,
 			};
 
-			act( () => {
-				render(
-					<LinkControl
-						value={ selectedLinkWithoutURL }
-						forceIsEditingLink
-						hasTextControl
-					/>,
-					container
-				);
-			} );
+			render(
+				<LinkControl
+					value={ selectedLinkWithoutURL }
+					forceIsEditingLink
+					hasTextControl
+				/>
+			);
 
 			expect(
-				queryByRole( container, 'textbox', { name: 'Text' } )
-			).toBeFalsy();
+				screen.queryByRole( 'textbox', { name: 'Text' } )
+			).not.toBeInTheDocument();
 		}
 	);
 
 	it( 'should show a text input to alter the link title text when hasTextControl prop is truthy', async () => {
-		act( () => {
-			render(
-				<LinkControl
-					value={ selectedLink }
-					forceIsEditingLink
-					hasTextControl
-				/>,
-				container
-			);
-		} );
+		render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+			/>
+		);
 
 		expect(
-			queryByRole( container, 'textbox', { name: 'Text' } )
-		).toBeTruthy();
+			screen.queryByRole( 'textbox', { name: 'Text' } )
+		).toBeVisible();
 	} );
 
 	it.each( [
@@ -2325,60 +1988,49 @@ describe( 'Controlling link title text', () => {
 		"should ensure text input reflects the current link value's `title` property %s",
 		async ( _unused, titleValue ) => {
 			const linkWithTitle = { ...selectedLink, title: titleValue };
-			act( () => {
-				render(
-					<LinkControl
-						value={ linkWithTitle }
-						forceIsEditingLink
-						hasTextControl
-					/>,
-					container
-				);
-			} );
+			render(
+				<LinkControl
+					value={ linkWithTitle }
+					forceIsEditingLink
+					hasTextControl
+				/>
+			);
 
-			const textInput = queryByRole( container, 'textbox', {
+			const textInput = screen.queryByRole( 'textbox', {
 				name: 'Text',
 			} );
 
-			expect( textInput.value ).toEqual( titleValue );
+			expect( textInput ).toHaveValue( titleValue );
 		}
 	);
 
 	it( "should ensure title value matching the text input's current value is included in onChange handler value on submit", async () => {
+		const user = userEvent.setup();
 		const mockOnChange = jest.fn();
 		const textValue = 'My new text value';
 
-		act( () => {
-			render(
-				<LinkControl
-					value={ selectedLink }
-					forceIsEditingLink
-					hasTextControl
-					onChange={ mockOnChange }
-				/>,
-				container
-			);
-		} );
-
-		let textInput = queryByRole( container, 'textbox', { name: 'Text' } );
+		render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
 
-		act( () => {
-			Simulate.change( textInput, {
-				target: { value: textValue },
-			} );
-		} );
+		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
-		textInput = queryByRole( container, 'textbox', { name: 'Text' } );
+		textInput.focus();
+		await userEvent.clear( textInput );
+		await user.keyboard( textValue );
 
-		expect( textInput.value ).toEqual( textValue );
+		expect( textInput ).toHaveValue( textValue );
 
-		const submitButton = queryByRole( container, 'button', {
+		const submitButton = screen.queryByRole( 'button', {
 			name: 'Submit',
 		} );
 
-		act( () => {
-			Simulate.click( submitButton );
-		} );
+		await user.click( submitButton );
 
 		expect( mockOnChange ).toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -2388,34 +2040,29 @@ describe( 'Controlling link title text', () => {
 	} );
 
 	it( 'should allow `ENTER` keypress within the text field to trigger submission of value', async () => {
+		const user = userEvent.setup();
 		const textValue = 'My new text value';
 		const mockOnChange = jest.fn();
-		act( () => {
-			render(
-				<LinkControl
-					value={ selectedLink }
-					forceIsEditingLink
-					hasTextControl
-					onChange={ mockOnChange }
-				/>,
-				container
-			);
-		} );
 
-		const textInput = queryByRole( container, 'textbox', { name: 'Text' } );
+		render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
 
-		expect( textInput ).toBeTruthy();
+		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
-		act( () => {
-			Simulate.change( textInput, {
-				target: { value: textValue },
-			} );
-		} );
+		expect( textInput ).toBeVisible();
+
+		textInput.focus();
+		await userEvent.clear( textInput );
+		await user.keyboard( textValue );
 
 		// Attempt to submit the empty search value in the input.
-		act( () => {
-			Simulate.keyDown( textInput, { keyCode: ENTER } );
-		} );
+		triggerEnter( textInput );
 
 		expect( mockOnChange ).toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -2426,7 +2073,7 @@ describe( 'Controlling link title text', () => {
 
 		// The text input should not be showing as the form is submitted.
 		expect(
-			queryByRole( container, 'textbox', { name: 'Text' } )
-		).toBeFalsy();
+			screen.queryByRole( 'textbox', { name: 'Text' } )
+		).not.toBeInTheDocument();
 	} );
 } );