Block Directory: Modernize DownloadableBlockListItem tests (#43026)

packages/block-directory/src/components/downloadable-block-list-item/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -27,11 +28,11 @@ describe( 'DownloadableBlockListItem', () => {
 			isInstallable: true,
 		} ) );
 
-		const { queryByText } = render(
+		render(
 			<DownloadableBlockListItem onClick={ jest.fn() } item={ plugin } />
 		);
-		const author = queryByText( `by ${ plugin.author }` );
-		const description = queryByText( plugin.description );
+		const author = screen.queryByText( `by ${ plugin.author }` );
+		const description = screen.queryByText( plugin.description );
 		expect( author ).not.toBeNull();
 		expect( description ).not.toBeNull();
 	} );
@@ -42,10 +43,10 @@ describe( 'DownloadableBlockListItem', () => {
 			isInstallable: true,
 		} ) );
 
-		const { queryByText } = render(
+		render(
 			<DownloadableBlockListItem onClick={ jest.fn() } item={ plugin } />
 		);
-		const statusLabel = queryByText( 'Installing…' );
+		const statusLabel = screen.queryByText( 'Installing…' );
 		expect( statusLabel ).not.toBeNull();
 	} );
 
@@ -55,27 +56,30 @@ describe( 'DownloadableBlockListItem', () => {
 			isInstallable: false,
 		} ) );
 
-		const { getByRole } = render(
+		render(
 			<DownloadableBlockListItem onClick={ jest.fn() } item={ plugin } />
 		);
-		const button = getByRole( 'option' );
+		const button = screen.getByRole( 'option' );
 		// Keeping it false to avoid focus loss and disable it using aria-disabled.
 		expect( button.disabled ).toBe( false );
 		expect( button.getAttribute( 'aria-disabled' ) ).toBe( 'true' );
 	} );
 
-	it( 'should try to install the block plugin', () => {
+	it( 'should try to install the block plugin', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		useSelect.mockImplementation( () => ( {
 			isInstalling: false,
 			isInstallable: true,
 		} ) );
 		const onClick = jest.fn();
-		const { getByRole } = render(
+		render(
 			<DownloadableBlockListItem onClick={ onClick } item={ plugin } />
 		);
 
-		const button = getByRole( 'option' );
-		fireEvent.click( button );
+		await user.click( screen.getByRole( 'option' ) );
 
 		expect( onClick ).toHaveBeenCalledTimes( 1 );
 	} );