Fix tests failing because of userEvent

assets/admin/exit-survey/form.test.js

@@ -18,50 +18,52 @@ describe( '<ExitSurveyForm />', () => {
 		skip: () => screen.getByRole( 'button', { name: 'Skip Feedback' } ),
 	};
 
-	it( 'Submit is disabled until an item is selected and details filled out (if provided)', () => {
+	it( 'Submit is disabled until an item is selected and details filled out (if provided)', async () => {
 		const { getByLabelText, getByPlaceholderText } = render(
 			<ExitSurveyForm />
 		);
 
 		expect( buttons.submit() ).toBeDisabled();
 
 		// This reason does not require details.
-		userEvent.click( getByLabelText( 'I no longer need the plugin' ) );
+		await userEvent.click(
+			getByLabelText( 'I no longer need the plugin' )
+		);
 		expect( buttons.submit() ).not.toBeDisabled();
 
 		// This reason does expect details.
-		userEvent.click( getByLabelText( 'I found a better plugin' ) );
+		await userEvent.click( getByLabelText( 'I found a better plugin' ) );
 		expect( buttons.submit() ).toBeDisabled();
-		userEvent.type(
+		await userEvent.type(
 			getByPlaceholderText( "What's the name of the plugin?" ),
 			'Test detail'
 		);
 
 		expect( buttons.submit() ).not.toBeDisabled();
 	} );
 
-	it( 'Skip button skips submission', () => {
+	it( 'Skip button skips submission', async () => {
 		const skip = jest.fn();
 		const submit = jest.fn();
 		render( <ExitSurveyForm submit={ submit } skip={ skip } /> );
-		userEvent.click( buttons.skip() );
+		await userEvent.click( buttons.skip() );
 
 		expect( skip ).toHaveBeenCalled();
 		expect( submit ).not.toHaveBeenCalled();
 	} );
 
-	it( 'Submits selected reason and details', () => {
+	it( 'Submits selected reason and details', async () => {
 		const submit = jest.fn();
 		const { getByLabelText, getByPlaceholderText } = render(
 			<ExitSurveyForm submit={ submit } />
 		);
 
-		userEvent.click( getByLabelText( 'I found a better plugin' ) );
-		userEvent.type(
+		await userEvent.click( getByLabelText( 'I found a better plugin' ) );
+		await userEvent.type(
 			getByPlaceholderText( "What's the name of the plugin?" ),
 			'Test detail'
 		);
-		userEvent.click( buttons.submit() );
+		await userEvent.click( buttons.submit() );
 
 		expect( submit ).toHaveBeenCalledWith( {
 			reason: 'found-better-plugin',

assets/blocks/course-outline/outline-block/outline-placeholder.test.js

@@ -36,17 +36,19 @@ describe( '<OutlinePlaceholder />', () => {
 		expect( getByText( 'Generate with AI' ) ).toBeVisible();
 	} );
 
-	it( 'Should create empty lessons', () => {
+	it( 'Should create empty lessons', async () => {
 		const { getByRole } = render(
 			<OutlinePlaceholder addBlocks={ addBlocksMock } />
 		);
 
-		userEvent.click( getByRole( 'button', { name: 'Start with blank' } ) );
+		await userEvent.click(
+			getByRole( 'button', { name: 'Start with blank' } )
+		);
 
 		expect( addBlocksMock ).toHaveBeenCalled();
 	} );
 
-	it( 'Should open the tailored modal', () => {
+	it( 'Should open the tailored modal', async () => {
 		const openTailoredModalMock = jest.fn();
 
 		const { getByRole } = render(
@@ -56,7 +58,7 @@ describe( '<OutlinePlaceholder />', () => {
 			/>
 		);
 
-		userEvent.click(
+		await userEvent.click(
 			getByRole( 'button', { name: 'Generate with AI Pro' } )
 		);
 

assets/blocks/course-outline/status-preview/status-control/index.test.js

@@ -63,10 +63,10 @@ describe( '<StatusControl />', () => {
 				setStatus={ setStatusMock }
 			/>
 		);
-		userEvent.click( getByLabelText( 'Completed' ) );
+		await userEvent.click( getByLabelText( 'Completed' ) );
 		expect( setStatusMock ).toBeCalledWith( Status.COMPLETED );
 
-		userEvent.click( getByLabelText( 'In Progress' ) );
+		await userEvent.click( getByLabelText( 'In Progress' ) );
 		expect( setStatusMock ).toBeCalledWith( Status.IN_PROGRESS );
 	} );
 } );

assets/blocks/editor-components/limited-text-control/index.test.js

@@ -55,7 +55,7 @@ describe( '<LimitedTextControl />', () => {
 		expect( queryByText( 'Characters: 10/20' ) ).toBeTruthy();
 	} );
 
-	it( 'Should not call the `onChange` method when already at maxLength capacity', () => {
+	it( 'Should not call the `onChange` method when already at maxLength capacity', async () => {
 		const onChangeMock = jest.fn();
 		const { queryByRole } = render(
 			<LimitedTextControl
@@ -65,12 +65,12 @@ describe( '<LimitedTextControl />', () => {
 			/>
 		);
 
-		userEvent.type( queryByRole( 'textbox' ), 'DEF' );
+		await userEvent.type( queryByRole( 'textbox' ), 'DEF' );
 
 		expect( onChangeMock ).toHaveBeenCalledTimes( 0 );
 	} );
 
-	it( 'Should ignore new lines', () => {
+	it( 'Should ignore new lines', async () => {
 		const onChangeMock = jest.fn();
 		const { queryByRole } = render(
 			<LimitedTextControl
@@ -82,7 +82,7 @@ describe( '<LimitedTextControl />', () => {
 
 		const element = queryByRole( 'textbox' );
 
-		userEvent.type( element, '{enter}' );
+		await userEvent.type( element, '{enter}' );
 
 		expect( onChangeMock ).toHaveBeenCalledTimes( 0 );
 	} );
@@ -144,7 +144,7 @@ describe( '<LimitedTextControl multiline={ true }/>', () => {
 		expect( queryByText( 'Characters: 10/20' ) ).toBeTruthy();
 	} );
 
-	it( 'Should not call the `onChange` method when already at maxLength capacity', () => {
+	it( 'Should not call the `onChange` method when already at maxLength capacity', async () => {
 		const onChangeMock = jest.fn();
 		const { queryByRole } = render(
 			<LimitedTextControl
@@ -155,12 +155,12 @@ describe( '<LimitedTextControl multiline={ true }/>', () => {
 			/>
 		);
 
-		userEvent.type( queryByRole( 'textbox' ), 'DEF' );
+		await userEvent.type( queryByRole( 'textbox' ), 'DEF' );
 
 		expect( onChangeMock ).toHaveBeenCalledTimes( 0 );
 	} );
 
-	it( 'Should accept new lines', () => {
+	it( 'Should accept new lines', async () => {
 		const onChangeMock = jest.fn();
 		const { queryByRole } = render(
 			<LimitedTextControl
@@ -173,7 +173,7 @@ describe( '<LimitedTextControl multiline={ true }/>', () => {
 
 		const element = queryByRole( 'textbox' );
 
-		userEvent.type( element, '{enter}' );
+		await userEvent.type( element, '{enter}' );
 
 		expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
 	} );

assets/shared/blocks/block-metadata.test.js

@@ -93,7 +93,7 @@ describe( 'Block metadata', () => {
 			expect( getByText( 'Block metadata' ) ).toBeTruthy();
 		} );
 
-		it( 'Provides metadata setter to block', () => {
+		it( 'Provides metadata setter to block', async () => {
 			const Block = withBlockMeta( ( { setMeta } ) => (
 				<button
 					onClick={ () => setMeta( { secondTestMeta: 'clicked' } ) }
@@ -102,7 +102,7 @@ describe( 'Block metadata', () => {
 				</button>
 			) );
 			const { getByText } = render( <Block clientId="test-block-4" /> );
-			userEvent.click( getByText( 'Update' ) );
+			await userEvent.click( getByText( 'Update' ) );
 
 			const meta = select( STORE ).getBlockMeta(
 				'test-block-4',

assets/shared/blocks/single-line-input/single-line-input.test.js

@@ -38,18 +38,18 @@ describe( '<SingleLineInput />', () => {
 		expect( onChangeMock ).toBeCalledWith( 'changed' );
 	} );
 
-	it( 'Should not allow line breaks', () => {
+	it( 'Should not allow line breaks', async () => {
 		const onChangeMock = jest.fn();
 		const { getByRole } = render(
 			<SingleLineInput onChange={ onChangeMock } />
 		);
 
-		userEvent.type( getByRole( 'textbox' ), 'input {enter}line' );
+		await userEvent.type( getByRole( 'textbox' ), 'input {enter}line' );
 
 		expect( onChangeMock ).toHaveBeenLastCalledWith( 'input line' );
 	} );
 
-	it( 'Calls onRemove on backspace with an empty title', () => {
+	it( 'Calls onRemove on backspace with an empty title', async () => {
 		const onRemoveMock = jest.fn();
 		const { getByRole } = render(
 			<SingleLineInput
@@ -59,18 +59,18 @@ describe( '<SingleLineInput />', () => {
 			/>
 		);
 
-		userEvent.type( getByRole( 'textbox' ), '{backspace}' );
+		await userEvent.type( getByRole( 'textbox' ), '{backspace}' );
 
 		expect( onRemoveMock ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'Calls onEnter on enter', () => {
+	it( 'Calls onEnter on enter', async () => {
 		const onEnterMock = jest.fn();
 		const { getByRole } = render(
 			<SingleLineInput onEnter={ onEnterMock } onChange={ jest.fn() } />
 		);
 
-		userEvent.type( getByRole( 'textbox' ), 'Title{enter}' );
+		await userEvent.type( getByRole( 'textbox' ), 'Title{enter}' );
 
 		expect( onEnterMock ).toHaveBeenCalledTimes( 1 );
 	} );