@wordpress/components 28.3.0 → 28.5.0

package/src/tabs/test/index.tsx

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, sleep } from '@ariakit/test';
+import { screen, waitFor } from '@testing-library/react';
+import { press, click } from '@ariakit/test';
+import { render } from '@ariakit/test/react';
 
 /**
  * WordPress dependencies
@@ -159,7 +160,7 @@ describe( 'Tabs', () => {
 
 	describe( 'Accessibility and semantics', () => {
 		it( 'should use the correct aria attributes', async () => {
-			render( <UncontrolledTabs tabs={ TABS } /> );
+			await render( <UncontrolledTabs tabs={ TABS } /> );
 
 			const tabList = screen.getByRole( 'tablist' );
 			const allTabs = screen.getAllByRole( 'tab' );
@@ -188,20 +189,18 @@ describe( 'Tabs', () => {
 	} );
 	describe( 'Focus Behavior', () => {
 		it( 'should focus on the related TabPanel when pressing the Tab key', async () => {
-			render( <UncontrolledTabs tabs={ TABS } /> );
+			await render( <UncontrolledTabs tabs={ TABS } /> );
 
 			const selectedTabPanel = await screen.findByRole( 'tabpanel' );
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
 			).toHaveFocus();
 
 			// By default the tabpanel should receive focus
-			await sleep();
 			await press.Tab();
 			expect( selectedTabPanel ).toHaveFocus();
 		} );
@@ -221,7 +220,7 @@ describe( 'Tabs', () => {
 					: tabObj
 			);
 
-			render(
+			await render(
 				<UncontrolledTabs tabs={ TABS_WITH_ALPHA_FOCUSABLE_FALSE } />
 			);
 
@@ -231,14 +230,12 @@ describe( 'Tabs', () => {
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
 			).toHaveFocus();
 			// Because the alpha tabpanel is set to `focusable: false`, pressing
 			// the Tab key should focus the button, not the tabpanel
-			await sleep();
 			await press.Tab();
 			expect( alphaButton ).toHaveFocus();
 		} );
@@ -256,14 +253,13 @@ describe( 'Tabs', () => {
 					: tabObj
 			);
 
-			render(
+			await render(
 				<ControlledTabs
 					tabs={ TABS_WITH_ALPHA_DISABLED }
 					selectedTabId={ null }
 				/>
 			);
 
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Beta' } )
@@ -284,7 +280,7 @@ describe( 'Tabs', () => {
 
 	describe( 'Tab Attributes', () => {
 		it( "should apply the tab's `className` to the tab button", async () => {
-			render( <UncontrolledTabs tabs={ TABS } /> );
+			await render( <UncontrolledTabs tabs={ TABS } /> );
 
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
@@ -302,7 +298,7 @@ describe( 'Tabs', () => {
 		it( 'defaults to automatic tab activation (pointer clicks)', async () => {
 			const mockOnSelect = jest.fn();
 
-			render(
+			await render(
 				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 			);
 
@@ -335,7 +331,7 @@ describe( 'Tabs', () => {
 		it( 'defaults to automatic tab activation (arrow keys)', async () => {
 			const mockOnSelect = jest.fn();
 
-			render(
+			await render(
 				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 			);
 
@@ -347,7 +343,6 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -371,7 +366,7 @@ describe( 'Tabs', () => {
 		it( 'wraps around the last/first tab when using arrow keys', async () => {
 			const mockOnSelect = jest.fn();
 
-			render(
+			await render(
 				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 			);
 
@@ -381,7 +376,6 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -405,7 +399,7 @@ describe( 'Tabs', () => {
 		it( 'should not move tab selection when pressing the up/down arrow keys, unless the orientation is changed to `vertical`', async () => {
 			const mockOnSelect = jest.fn();
 
-			const { rerender } = render(
+			const { rerender } = await render(
 				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 			);
 
@@ -417,7 +411,6 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 
@@ -437,7 +430,7 @@ describe( 'Tabs', () => {
 
 			// Change orientation to `vertical`. When the orientation is vertical,
 			// left/right arrow keys are replaced by up/down arrow keys.
-			rerender(
+			await rerender(
 				<UncontrolledTabs
 					tabs={ TABS }
 					onSelect={ mockOnSelect }
@@ -502,7 +495,7 @@ describe( 'Tabs', () => {
 					: tabObj
 			);
 
-			render(
+			await render(
 				<UncontrolledTabs
 					tabs={ TABS_WITH_DELTA_DISABLED }
 					onSelect={ mockOnSelect }
@@ -517,7 +510,6 @@ describe( 'Tabs', () => {
 			// Tab to focus the tablist. Make sure Alpha is focused.
 			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 			expect( await getSelectedTab() ).not.toHaveFocus();
-			await sleep();
 			await press.Tab();
 			expect( await getSelectedTab() ).toHaveFocus();
 			// Confirm onSelect has not been re-called
@@ -556,11 +548,10 @@ describe( 'Tabs', () => {
 		} );
 
 		it( 'should not focus the next tab when the Tab key is pressed', async () => {
-			render( <UncontrolledTabs tabs={ TABS } /> );
+			await render( <UncontrolledTabs tabs={ TABS } /> );
 
 			// Tab should initially focus the first tab in the tablist, which
 			// is Alpha.
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tab', { name: 'Alpha' } )
@@ -569,7 +560,6 @@ describe( 'Tabs', () => {
 			// Because all other tabs should have `tabindex=-1`, pressing Tab
 			// should NOT move the focus to the next tab, which is Beta.
 			// Instead, focus should go to the currently selected tabpanel (alpha).
-			await sleep();
 			await press.Tab();
 			expect(
 				await screen.findByRole( 'tabpanel', {
@@ -581,7 +571,7 @@ describe( 'Tabs', () => {
 		it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
 			const mockOnSelect = jest.fn();
 
-			render(
+			await render(
 				<UncontrolledTabs
 					tabs={ TABS }
 					onSelect={ mockOnSelect }
@@ -638,7 +628,7 @@ describe( 'Tabs', () => {
 	describe( 'Uncontrolled mode', () => {
 		describe( 'Without `defaultTabId` prop', () => {
 			it( 'should render first tab', async () => {
-				render( <UncontrolledTabs tabs={ TABS } /> );
+				await render( <UncontrolledTabs tabs={ TABS } /> );
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 				expect(
@@ -646,12 +636,12 @@ describe( 'Tabs', () => {
 				).toBeInTheDocument();
 			} );
 			it( 'should fall back to first enabled tab if the active tab is removed', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } />
 				);
 
 				// Remove first item from `TABS` array
-				rerender( <UncontrolledTabs tabs={ TABS.slice( 1 ) } /> );
+				await rerender( <UncontrolledTabs tabs={ TABS.slice( 1 ) } /> );
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			} );
 			it( 'should not load any tab if the active tab is removed and there are no enabled tabs', async () => {
@@ -667,13 +657,13 @@ describe( 'Tabs', () => {
 						: tabObj
 				);
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS_WITH_BETA_GAMMA_DISABLED } />
 				);
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 
 				// Remove alpha
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_BETA_GAMMA_DISABLED.slice( 1 ) }
 					/>
@@ -695,15 +685,15 @@ describe( 'Tabs', () => {
 
 		describe( 'With `defaultTabId`', () => {
 			it( 'should render the tab set by `defaultTabId` prop', async () => {
-				render(
+				await render(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
 				);
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			} );
 
-			it( 'should not select a tab when `defaultTabId` does not match any known tab', () => {
-				render(
+			it( 'should not select a tab when `defaultTabId` does not match any known tab', async () => {
+				await render(
 					<UncontrolledTabs
 						tabs={ TABS }
 						defaultTabId="does-not-exist"
@@ -721,11 +711,11 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 			} );
 			it( 'should not change tabs when defaultTabId is changed', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
 				);
 
-				rerender(
+				await rerender(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="alpha" />
 				);
 
@@ -735,7 +725,7 @@ describe( 'Tabs', () => {
 			it( 'should fall back to the tab associated to `defaultTabId` if the currently active tab is removed', async () => {
 				const mockOnSelect = jest.fn();
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs
 						tabs={ TABS }
 						defaultTabId="gamma"
@@ -749,7 +739,7 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS.slice( 1 ) }
 						defaultTabId="gamma"
@@ -763,7 +753,7 @@ describe( 'Tabs', () => {
 			it( 'should fall back to the tab associated to `defaultTabId` if the currently active tab becomes disabled', async () => {
 				const mockOnSelect = jest.fn();
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs
 						tabs={ TABS }
 						defaultTabId="gamma"
@@ -789,7 +779,7 @@ describe( 'Tabs', () => {
 						: tabObj
 				);
 
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_ALPHA_DISABLED }
 						defaultTabId="gamma"
@@ -801,14 +791,14 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'should have no active tabs when the tab associated to `defaultTabId` is removed while being the active tab', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="gamma" />
 				);
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 
 				// Remove gamma
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS.slice( 0, 2 ) }
 						defaultTabId="gamma"
@@ -827,7 +817,7 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'waits for the tab with the `defaultTabId` to be present in the `tabs` array before selecting it', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="delta" />
 				);
 
@@ -836,7 +826,7 @@ describe( 'Tabs', () => {
 					screen.queryByRole( 'tab', { selected: true } )
 				).not.toBeInTheDocument();
 
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_DELTA }
 						defaultTabId="delta"
@@ -864,7 +854,7 @@ describe( 'Tabs', () => {
 							: tabObj
 				);
 
-				render(
+				await render(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_DELTA_DISABLED }
 						onSelect={ mockOnSelect }
@@ -880,7 +870,6 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 				// Move focus to the tablist, make sure alpha is focused.
-				await sleep();
 				await press.Tab();
 				expect(
 					screen.getByRole( 'tab', { name: 'Alpha' } )
@@ -913,7 +902,7 @@ describe( 'Tabs', () => {
 						: tabObj
 				);
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS_WITH_ALPHA_DISABLED } />
 				);
 
@@ -922,7 +911,7 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 
 				// Re-enable all tabs
-				rerender( <UncontrolledTabs tabs={ TABS } /> );
+				await rerender( <UncontrolledTabs tabs={ TABS } /> );
 
 				// Even if the initial tab becomes enabled again, the selected
 				// tab doesn't change.
@@ -941,7 +930,7 @@ describe( 'Tabs', () => {
 						  }
 						: tabObj
 				);
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs
 						tabs={ TABS_ONLY_GAMMA_ENABLED }
 						defaultTabId="beta"
@@ -953,7 +942,7 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 
 				// Re-enable all tabs
-				rerender(
+				await rerender(
 					<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
 				);
 
@@ -964,7 +953,7 @@ describe( 'Tabs', () => {
 
 			it( 'should select the first enabled tab when the selected tab becomes disabled', async () => {
 				const mockOnSelect = jest.fn();
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 				);
 
@@ -985,7 +974,7 @@ describe( 'Tabs', () => {
 				);
 
 				// Disable alpha
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_ALPHA_DISABLED }
 						onSelect={ mockOnSelect }
@@ -997,7 +986,7 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 
 				// Re-enable all tabs
-				rerender(
+				await rerender(
 					<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
 				);
 
@@ -1009,7 +998,7 @@ describe( 'Tabs', () => {
 			it( 'should select the first enabled tab when the tab associated to `defaultTabId` becomes disabled while being the active tab', async () => {
 				const mockOnSelect = jest.fn();
 
-				const { rerender } = render(
+				const { rerender } = await render(
 					<UncontrolledTabs
 						tabs={ TABS }
 						onSelect={ mockOnSelect }
@@ -1032,7 +1021,7 @@ describe( 'Tabs', () => {
 				);
 
 				// Disable gamma
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_GAMMA_DISABLED }
 						onSelect={ mockOnSelect }
@@ -1045,7 +1034,7 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 				// Re-enable all tabs
-				rerender(
+				await rerender(
 					<UncontrolledTabs
 						tabs={ TABS }
 						onSelect={ mockOnSelect }
@@ -1063,7 +1052,9 @@ describe( 'Tabs', () => {
 
 	describe( 'Controlled mode', () => {
 		it( 'should render the tab specified by the `selectedTabId` prop', async () => {
-			render( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
+			await render(
+				<ControlledTabs tabs={ TABS } selectedTabId="beta" />
+			);
 
 			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			expect(
@@ -1071,7 +1062,7 @@ describe( 'Tabs', () => {
 			).toBeInTheDocument();
 		} );
 		it( 'should render the specified `selectedTabId`, and ignore the `defaultTabId` prop', async () => {
-			render(
+			await render(
 				<ControlledTabs
 					tabs={ TABS }
 					selectedTabId="gamma"
@@ -1082,7 +1073,7 @@ describe( 'Tabs', () => {
 			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 		} );
 		it( 'should not render any tab if `selectedTabId` does not match any known tab', async () => {
-			render(
+			await render(
 				<ControlledTabs
 					tabs={ TABS_WITH_DELTA }
 					selectedTabId="does-not-exist"
@@ -1097,12 +1088,12 @@ describe( 'Tabs', () => {
 			expect( screen.queryByRole( 'tabpanel' ) ).not.toBeInTheDocument();
 		} );
 		it( 'should not render any tab if the active tab is removed', async () => {
-			const { rerender } = render(
+			const { rerender } = await render(
 				<ControlledTabs tabs={ TABS } selectedTabId="beta" />
 			);
 
 			// Remove beta
-			rerender(
+			await rerender(
 				<ControlledTabs
 					tabs={ TABS.filter( ( tab ) => tab.tabId !== 'beta' ) }
 					selectedTabId="beta"
@@ -1123,7 +1114,9 @@ describe( 'Tabs', () => {
 			expect( screen.queryByRole( 'tabpanel' ) ).not.toBeInTheDocument();
 
 			// Restore beta
-			rerender( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
+			await rerender(
+				<ControlledTabs tabs={ TABS } selectedTabId="beta" />
+			);
 
 			// No tab should be selected i.e. it doesn't reselect the previously
 			// removed tab.
@@ -1149,7 +1142,7 @@ describe( 'Tabs', () => {
 							: tabObj
 				);
 
-				render(
+				await render(
 					<ControlledTabs
 						tabs={ TABS_WITH_DELTA_WITH_BETA_DISABLED }
 						selectedTabId="beta"
@@ -1168,7 +1161,7 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 			} );
 			it( 'should not render any tab when the selected tab becomes disabled', async () => {
-				const { rerender } = render(
+				const { rerender } = await render(
 					<ControlledTabs tabs={ TABS } selectedTabId="beta" />
 				);
 
@@ -1186,7 +1179,7 @@ describe( 'Tabs', () => {
 						: tabObj
 				);
 
-				rerender(
+				await rerender(
 					<ControlledTabs
 						tabs={ TABS_WITH_BETA_DISABLED }
 						selectedTabId="beta"
@@ -1206,7 +1199,7 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 
 				// re-enable all tabs
-				rerender(
+				await rerender(
 					<ControlledTabs tabs={ TABS } selectedTabId="beta" />
 				);
 
@@ -1226,7 +1219,7 @@ describe( 'Tabs', () => {
 				'and `selectOnMove` is %s',
 				( selectOnMove ) => {
 					it( 'should continue to handle arrow key navigation properly', async () => {
-						const { rerender } = render(
+						const { rerender } = await render(
 							<ControlledTabs
 								tabs={ TABS }
 								selectedTabId="beta"
@@ -1234,12 +1227,6 @@ describe( 'Tabs', () => {
 							/>
 						);
 
-						// Due to the timing of the component re-rendering, we
-						// need to force a delay to ensure the test doesn't run
-						// the upcoming assertions too early.
-						// see https://github.com/WordPress/gutenberg/pull/58629#issuecomment-1924875249
-						await sleep();
-
 						// Tab key should focus the currently selected tab, which is Beta.
 						await press.Tab();
 						await waitFor( async () =>
@@ -1249,7 +1236,7 @@ describe( 'Tabs', () => {
 						);
 						expect( await getSelectedTab() ).toHaveFocus();
 
-						rerender(
+						await rerender(
 							<ControlledTabs
 								tabs={ TABS }
 								selectedTabId="gamma"
@@ -1275,7 +1262,7 @@ describe( 'Tabs', () => {
 					} );
 
 					it( 'should focus the correct tab when tabbing out and back into the tablist', async () => {
-						const { rerender } = render(
+						const { rerender } = await render(
 							<>
 								<button>Focus me</button>
 								<ControlledTabs
@@ -1287,16 +1274,14 @@ describe( 'Tabs', () => {
 						);
 
 						// Tab key should focus the currently selected tab, which is Beta.
-						await sleep();
 						await press.Tab();
-						await sleep();
 						await press.Tab();
 						expect( await getSelectedTab() ).toHaveTextContent(
 							'Beta'
 						);
 						expect( await getSelectedTab() ).toHaveFocus();
 
-						rerender(
+						await rerender(
 							<>
 								<button>Focus me</button>
 								<ControlledTabs
@@ -1324,7 +1309,6 @@ describe( 'Tabs', () => {
 						).toHaveFocus();
 
 						// Press tab, move focus back to the tablist
-						await sleep();
 						await press.Tab();
 
 						const betaTab = screen.getByRole( 'tab', {
@@ -1344,9 +1328,10 @@ describe( 'Tabs', () => {
 
 		describe( 'When `selectOnMove` is `true`', () => {
 			it( 'should automatically select a newly focused tab', async () => {
-				render( <ControlledTabs tabs={ TABS } selectedTabId="beta" /> );
+				await render(
+					<ControlledTabs tabs={ TABS } selectedTabId="beta" />
+				);
 
-				await sleep();
 				await press.Tab();
 
 				// Tab key should focus the currently selected tab, which is Beta.
@@ -1361,7 +1346,7 @@ describe( 'Tabs', () => {
 		} );
 		describe( 'When `selectOnMove` is `false`', () => {
 			it( 'should apply focus without automatically changing the selected tab', async () => {
-				render(
+				await render(
 					<ControlledTabs
 						tabs={ TABS }
 						selectedTabId="beta"
@@ -1372,7 +1357,6 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 
 				// Tab key should focus the currently selected tab, which is Beta.
-				await sleep();
 				await press.Tab();
 				await waitFor( async () =>
 					expect(
@@ -1407,7 +1391,7 @@ describe( 'Tabs', () => {
 	it( 'should associate each `Tab` with the correct `TabPanel`, even if they are not rendered in the same order', async () => {
 		const TABS_WITH_DELTA_REVERSED = [ ...TABS_WITH_DELTA ].reverse();
 
-		render(
+		await render(
 			<Tabs>
 				<Tabs.TabList>
 					{ TABS_WITH_DELTA.map( ( tabObj ) => (

package/src/text-control/README.md

@@ -62,6 +62,7 @@ const MyTextControl = () => {
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
 			label="Additional CSS Class"
 			value={ className }
 			onChange={ ( value ) => setClassName( value ) }

package/src/text-control/index.tsx

@@ -75,6 +75,7 @@ function UnforwardedTextControl(
  *
  *   return (
  *     <TextControl
+ *       __nextHasNoMarginBottom
  *       label="Additional CSS Class"
  *       value={ className }
  *       onChange={ ( value ) => setClassName( value ) }

package/src/text-control/style.scss

@@ -20,5 +20,10 @@
 
 	&.is-next-40px-default-size {
 		height: $grid-unit-50;
+
+		// Subtract 1px to account for the border, which isn't included on the element
+		// on newer components like InputControl, SelectControl, etc.
+		padding-left: $grid-unit-20;
+		padding-right: $grid-unit-20;
 	}
 }

package/src/textarea-control/README.md

@@ -79,6 +79,7 @@ const MyTextareaControl = () => {
 
 	return (
 		<TextareaControl
+		  __nextHasNoMarginBottom
 			label="Text"
 			help="Enter some text"
 			value={ text }
@@ -131,6 +132,13 @@ The current value of the textarea.
 
 -   Required: Yes
 
+#### `__nextHasNoMarginBottom`: `Boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   For a field where users only enter one line of text, use the `TextControl` component.

package/src/textarea-control/index.tsx

@@ -69,6 +69,7 @@ function UnforwardedTextareaControl(
  *
  *   return (
  *     <TextareaControl
+ *       __nextHasNoMarginBottom
  *       label="Text"
  *       help="Enter some text"
  *       value={ text }