Components: consistently use render from @ariakit/test

.eslintrc.js

@@ -459,13 +459,27 @@ module.exports = {
 					// the `@wordpress/components` package, hence why importing those
 					// dependencies should be allowed in the components package.
 					{
-						paths: restrictedImports.filter(
-							( { name } ) =>
-								! [
-									'@ariakit/react',
-									'framer-motion',
-								].includes( name )
-						),
+						paths: [
+							...restrictedImports.filter(
+								( { name } ) =>
+									! [
+										'@ariakit/react',
+										'framer-motion',
+									].includes( name )
+							),
+							// TODO: enable this rule in the future.
+							// {
+							// 	name: '@testing-library/user-event',
+							// 	message:
+							// 		'Please use event triggers (`click`, `press`, etc) from `@ariakit/test` instead.',
+							// },
+							{
+								name: '@testing-library/react',
+								importNames: [ 'render' ],
+								message:
+									'Please use `render` from `@ariakit/test` instead.',
+							},
+						],
 					},
 				],
 			},

migration/migrate.sh

@@ -0,0 +1,16 @@
+# HOW TO RUN THIS SCRIPT
+#
+# 1. Install grit (https://docs.grit.io/cli/quickstart#installation):
+#    $ npm install --location=global @getgrit/cli
+#
+# 2. Run this script from the root of the project (<- IMPORTANT):
+#    $ ./migration/migrate.sh
+
+function apply() {
+	grit apply --force --output none "migration/patterns/$1.grit" packages/components
+}
+
+apply await_render_calls
+apply replace_ariakit_test_import
+git checkout '*.native.*'
+npm run lint:js:fix -- packages/components

migration/patterns/await_render_calls.grit

@@ -0,0 +1,21 @@
+engine marzano(0.1)
+language js
+
+pattern await_render_calls() {
+    `it($description, $test_fn)` where {
+        $test_fn <: contains bubble `$render_method($render_args)` where {
+            !$render_method <: within `await $_`,
+            $render_method <: or {
+            `render` => `await render`,
+            `rerender` => `await rerender`
+            },
+        },
+        $test_fn <: maybe $test_fn where {
+            !$test_fn <: arrow_function(async = "async"),
+            !$test_fn <: function(async = "async"),
+            $test_fn => `async $test_fn`
+        }
+    }
+}
+
+await_render_calls()

migration/patterns/replace_ariakit_test_import.grit

@@ -0,0 +1,14 @@
+engine marzano(0.1)
+language js
+
+pattern replace_ariakit_test_import() {
+    `import { $imports } from '@testing-library/react'` as $import where {
+        $imports <: contains `render` as $render,
+        $render => .,
+        $import =>
+`$import;
+import {render} from "@ariakit/test/react";`
+    }
+}
+
+replace_ariakit_test_import()

packages/components/src/alignment-matrix-control/test/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
 import { press, click } from '@ariakit/test';
 
 /**

packages/components/src/autocomplete/test/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -82,7 +83,7 @@ describe( 'AutocompleterUI', () => {
 				);
 			};
 
-			render( <Container /> );
+			await render( <Container /> );
 
 			// Click on autocompleter.
 			await user.click( screen.getByText( 'Apple' ) );

packages/components/src/base-control/test/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
 
 /**
  * Internal dependencies
@@ -21,8 +22,8 @@ const MyBaseControl = ( props: Omit< BaseControlProps, 'children' > ) => {
 };
 
 describe( 'BaseControl', () => {
-	it( 'should render help text as description', () => {
-		render( <MyBaseControl label="Text" help="My help text" /> );
+	it( 'should render help text as description', async () => {
+		await render( <MyBaseControl label="Text" help="My help text" /> );
 
 		expect(
 			screen.getByRole( 'textbox', {
@@ -31,8 +32,8 @@ describe( 'BaseControl', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should still render help as aria-describedby when not plain text', () => {
-		render(
+	it( 'should still render help as aria-describedby when not plain text', async () => {
+		await render(
 			<MyBaseControl
 				label="Text"
 				help={ <a href="/foo">My help text</a> }

packages/components/src/border-box-control/test/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -51,8 +52,8 @@ const colorPickerRegex = /Border color picker/;
 
 describe( 'BorderBoxControl', () => {
 	describe( 'Linked view rendering', () => {
-		it( 'should render correctly when no value provided', () => {
-			render( <BorderBoxControl { ...props } /> );
+		it( 'should render correctly when no value provided', async () => {
+			await render( <BorderBoxControl { ...props } /> );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
@@ -76,8 +77,10 @@ describe( 'BorderBoxControl', () => {
 			expect( linkedButton ).toBeInTheDocument();
 		} );
 
-		it( 'should hide label', () => {
-			render( <BorderBoxControl { ...props } hideLabelFromVision /> );
+		it( 'should hide label', async () => {
+			await render(
+				<BorderBoxControl { ...props } hideLabelFromVision />
+			);
 
 			const label = screen.getByText( props.label );
 
@@ -90,8 +93,10 @@ describe( 'BorderBoxControl', () => {
 			);
 		} );
 
-		it( 'should show correct width value when flat border value provided', () => {
-			render( <BorderBoxControl { ...props } value={ defaultBorder } /> );
+		it( 'should show correct width value when flat border value provided', async () => {
+			await render(
+				<BorderBoxControl { ...props } value={ defaultBorder } />
+			);
 
 			const widthInput = screen.getByRole( 'spinbutton', {
 				name: 'Border width',
@@ -100,8 +105,8 @@ describe( 'BorderBoxControl', () => {
 			expect( widthInput.value ).toBe( '1' );
 		} );
 
-		it( 'should show correct width value when consistent split borders provided', () => {
-			render(
+		it( 'should show correct width value when consistent split borders provided', async () => {
+			await render(
 				<BorderBoxControl { ...props } value={ defaultBorders } />
 			);
 
@@ -115,7 +120,9 @@ describe( 'BorderBoxControl', () => {
 		it( 'should render placeholder and omit unit select when border values are mixed', async () => {
 			const user = userEvent.setup();
 
-			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
+			await render(
+				<BorderBoxControl { ...props } value={ mixedBorders } />
+			);
 
 			// There are 4 inputs when in unlinked mode (top/right/bottom/left)
 			expect(
@@ -153,7 +160,7 @@ describe( 'BorderBoxControl', () => {
 			const user = userEvent.setup();
 
 			// Render control with mixed border values but consistent widths.
-			render(
+			await render(
 				<BorderBoxControl
 					{ ...props }
 					value={ {
@@ -192,7 +199,9 @@ describe( 'BorderBoxControl', () => {
 		it( 'should omit style options when requested', async () => {
 			const user = userEvent.setup();
 
-			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
+			await render(
+				<BorderBoxControl { ...props } enableStyle={ false } />
+			);
 
 			const colorButton = screen.getByLabelText( colorPickerRegex );
 			await user.click( colorButton );
@@ -218,8 +227,10 @@ describe( 'BorderBoxControl', () => {
 	} );
 
 	describe( 'Split view rendering', () => {
-		it( 'should render split view by default when mixed values provided', () => {
-			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
+		it( 'should render split view by default when mixed values provided', async () => {
+			await render(
+				<BorderBoxControl { ...props } value={ mixedBorders } />
+			);
 
 			const colorButtons = screen.getAllByLabelText( toggleLabelRegex );
 			const widthInputs = screen.getAllByRole( 'spinbutton', {
@@ -240,8 +251,10 @@ describe( 'BorderBoxControl', () => {
 			expect( linkedButton ).toBeInTheDocument();
 		} );
 
-		it( 'should render correct width values in appropriate inputs', () => {
-			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
+		it( 'should render correct width values in appropriate inputs', async () => {
+			await render(
+				<BorderBoxControl { ...props } value={ mixedBorders } />
+			);
 
 			const widthInputs = screen.getAllByRole( 'spinbutton', {
 				name: 'Border width',
@@ -256,7 +269,7 @@ describe( 'BorderBoxControl', () => {
 		it( 'should render split view correctly when starting with flat border', async () => {
 			const user = userEvent.setup();
 
-			render(
+			await render(
 				<BorderBoxControl { ...props } value={ defaultBorders } />
 			);
 
@@ -316,7 +329,7 @@ describe( 'BorderBoxControl', () => {
 			it( 'should set undefined when new border is empty', async () => {
 				const user = userEvent.setup();
 
-				render(
+				await render(
 					<BorderBoxControl { ...props } value={ { width: '1px' } } />
 				);
 
@@ -330,7 +343,7 @@ describe( 'BorderBoxControl', () => {
 			it( 'should update with complete flat border', async () => {
 				const user = userEvent.setup();
 
-				render(
+				await render(
 					<BorderBoxControl { ...props } value={ defaultBorder } />
 				);
 
@@ -349,7 +362,7 @@ describe( 'BorderBoxControl', () => {
 			it( 'should maintain mixed values if not explicitly set via linked control', async () => {
 				const user = userEvent.setup();
 
-				render(
+				await render(
 					<BorderBoxControl
 						{ ...props }
 						value={ {
@@ -382,7 +395,7 @@ describe( 'BorderBoxControl', () => {
 			it( 'should update with consistent split borders', async () => {
 				const user = userEvent.setup();
 
-				render(
+				await render(
 					<BorderBoxControl { ...props } value={ defaultBorders } />
 				);
 
@@ -401,7 +414,7 @@ describe( 'BorderBoxControl', () => {
 			it( 'should set undefined borders when change results in empty borders', async () => {
 				const user = userEvent.setup();
 
-				render(
+				await render(
 					<BorderBoxControl
 						{ ...props }
 						value={ {
@@ -423,7 +436,7 @@ describe( 'BorderBoxControl', () => {
 			it( 'should set flat border when change results in consistent split borders', async () => {
 				const user = userEvent.setup();
 
-				render(
+				await render(
 					<BorderBoxControl
 						{ ...props }
 						value={ {
@@ -463,7 +476,9 @@ describe( 'BorderBoxControl', () => {
 					left: { ...defaultBorder, width: '4px' },
 				};
 
-				render( <BorderBoxControl { ...props } value={ borders } /> );
+				await render(
+					<BorderBoxControl { ...props } value={ borders } />
+				);
 
 				const widthInput = screen.getAllByRole( 'spinbutton', {
 					name: 'Border width',
@@ -487,7 +502,9 @@ describe( 'BorderBoxControl', () => {
 					left: { ...defaultBorder, width: '1px' },
 				};
 
-				render( <BorderBoxControl { ...props } value={ borders } /> );
+				await render(
+					<BorderBoxControl { ...props } value={ borders } />
+				);
 
 				const widthInput = screen.getAllByRole( 'spinbutton', {
 					name: 'Border width',