diff --git a/packages/block-editor/src/components/line-height-control/test/index.js b/packages/block-editor/src/components/line-height-control/test/index.js
index 606ee5627fb3bd..7a101219f2f827 100644
--- a/packages/block-editor/src/components/line-height-control/test/index.js
+++ b/packages/block-editor/src/components/line-height-control/test/index.js
@@ -1,13 +1,13 @@
/**
* External dependencies
*/
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
-import { UP, DOWN } from '@wordpress/keycodes';
/**
* Internal dependencies
@@ -29,35 +29,37 @@ const ControlledLineHeightControl = () => {
};
describe( 'LineHeightControl', () => {
- it( 'should immediately step up from the default value if up-arrowed from an unset state', () => {
+ it( 'should immediately step up from the default value if up-arrowed from an unset state', async () => {
+ const user = userEvent.setup();
render( );
const input = screen.getByRole( 'spinbutton' );
- act( () => input.focus() );
- fireEvent.keyDown( input, { keyCode: UP } );
+ await user.click( input );
+ await user.keyboard( '{ArrowUp}' );
expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
} );
- it( 'should immediately step down from the default value if down-arrowed from an unset state', () => {
+ it( 'should immediately step down from the default value if down-arrowed from an unset state', async () => {
+ const user = userEvent.setup();
render( );
const input = screen.getByRole( 'spinbutton' );
- act( () => input.focus() );
- fireEvent.keyDown( input, { keyCode: DOWN } );
+ await user.click( input );
+ await user.keyboard( '{ArrowDown}' );
expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
} );
- it( 'should immediately step up from the default value if spin button up was clicked from an unset state', () => {
+ it( 'should immediately step up from the default value if spin button up was clicked from an unset state', async () => {
+ const user = userEvent.setup();
render( );
const input = screen.getByRole( 'spinbutton' );
- act( () => input.focus() );
- fireEvent.change( input, { target: { value: 0.1 } } ); // simulates click on spin button up
+ await user.click( screen.getByRole( 'button', { name: 'Increment' } ) );
expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
} );
- it( 'should immediately step down from the default value if spin button down was clicked from an unset state', () => {
+ it( 'should immediately step down from the default value if spin button down was clicked from an unset state', async () => {
+ const user = userEvent.setup();
render( );
const input = screen.getByRole( 'spinbutton' );
- act( () => input.focus() );
- fireEvent.change( input, { target: { value: 0 } } ); // simulates click on spin button down
+ await user.click( screen.getByRole( 'button', { name: 'Decrement' } ) );
expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
} );
} );