diff --git a/packages/components/src/composite/legacy/test/index.tsx b/packages/components/src/composite/legacy/test/index.tsx
index c034d31442ca8..a118dbcfbadbb 100644
--- a/packages/components/src/composite/legacy/test/index.tsx
+++ b/packages/components/src/composite/legacy/test/index.tsx
@@ -232,7 +232,7 @@ describe.each( [
>
);
- renderAndValidate( );
+ await renderAndValidate( );
await press.Tab();
expect( screen.getByText( 'Before' ) ).toHaveFocus();
@@ -260,7 +260,7 @@ describe.each( [
);
};
- renderAndValidate( );
+ await renderAndValidate( );
const { item1, item2, item3 } = getOneDimensionalItems();
@@ -289,7 +289,7 @@ describe.each( [
);
};
- renderAndValidate( );
+ await renderAndValidate( );
const { item1, item2, item3 } = getOneDimensionalItems();
expect( item2 ).toBeEnabled();
@@ -310,7 +310,7 @@ describe.each( [
} ) }
/>
);
- renderAndValidate( );
+ await renderAndValidate( );
const { item1, item2, item3 } = getOneDimensionalItems();
expect( item1.id ).toMatch( 'test-id-1' );
@@ -327,7 +327,7 @@ describe.each( [
} ) }
/>
);
- renderAndValidate( );
+ await renderAndValidate( );
const { item2 } = getOneDimensionalItems();
await press.Tab();
@@ -341,37 +341,37 @@ describe.each( [
] )( '%s', ( _when, rtl ) => {
const { previous, next, first, last } = getKeys( rtl );
- function useOneDimensionalTest( initialState?: InitialState ) {
+ async function useOneDimensionalTest( initialState?: InitialState ) {
const Test = () => (
);
- renderAndValidate( );
+ await renderAndValidate( );
return getOneDimensionalItems();
}
- function useTwoDimensionalTest( initialState?: InitialState ) {
+ async function useTwoDimensionalTest( initialState?: InitialState ) {
const Test = () => (
);
- renderAndValidate( );
+ await renderAndValidate( );
return getTwoDimensionalItems();
}
- function useShiftTest( shift: boolean ) {
+ async function useShiftTest( shift: boolean ) {
const Test = () => (
);
- renderAndValidate( );
+ await renderAndValidate( );
return getShiftTestItems();
}
describe( 'In one dimension', () => {
test( 'All directions work with no orientation', async () => {
- const { item1, item2, item3 } = useOneDimensionalTest();
+ const { item1, item2, item3 } = await useOneDimensionalTest();
await press.Tab();
expect( item1 ).toHaveFocus();
@@ -406,7 +406,7 @@ describe.each( [
} );
test( 'Only left/right work with horizontal orientation', async () => {
- const { item1, item2, item3 } = useOneDimensionalTest( {
+ const { item1, item2, item3 } = await useOneDimensionalTest( {
orientation: 'horizontal',
} );
@@ -435,7 +435,7 @@ describe.each( [
} );
test( 'Only up/down work with vertical orientation', async () => {
- const { item1, item2, item3 } = useOneDimensionalTest( {
+ const { item1, item2, item3 } = await useOneDimensionalTest( {
orientation: 'vertical',
} );
@@ -464,7 +464,7 @@ describe.each( [
} );
test( 'Focus wraps with loop enabled', async () => {
- const { item1, item2, item3 } = useOneDimensionalTest( {
+ const { item1, item2, item3 } = await useOneDimensionalTest( {
loop: true,
} );
@@ -488,7 +488,7 @@ describe.each( [
describe( 'In two dimensions', () => {
test( 'All directions work as standard', async () => {
const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
- useTwoDimensionalTest();
+ await useTwoDimensionalTest();
await press.Tab();
expect( itemA1 ).toHaveFocus();
@@ -524,7 +524,7 @@ describe.each( [
test( 'Focus wraps around rows/columns with loop enabled', async () => {
const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
- useTwoDimensionalTest( { loop: true } );
+ await useTwoDimensionalTest( { loop: true } );
await press.Tab();
expect( itemA1 ).toHaveFocus();
@@ -548,7 +548,7 @@ describe.each( [
test( 'Focus moves between rows/columns with wrap enabled', async () => {
const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
- useTwoDimensionalTest( { wrap: true } );
+ await useTwoDimensionalTest( { wrap: true } );
await press.Tab();
expect( itemA1 ).toHaveFocus();
@@ -577,7 +577,7 @@ describe.each( [
} );
test( 'Focus wraps around start/end with loop and wrap enabled', async () => {
- const { itemA1, itemC3 } = useTwoDimensionalTest( {
+ const { itemA1, itemC3 } = await useTwoDimensionalTest( {
loop: true,
wrap: true,
} );
@@ -595,7 +595,8 @@ describe.each( [
} );
test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
- const { itemA1, itemB1, itemB2, itemC1 } = useShiftTest( true );
+ const { itemA1, itemB1, itemB2, itemC1 } =
+ await useShiftTest( true );
await press.Tab();
expect( itemA1 ).toHaveFocus();
@@ -616,7 +617,7 @@ describe.each( [
} );
test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
- const { itemA1, itemB1, itemB2 } = useShiftTest( false );
+ const { itemA1, itemB1, itemB2 } = await useShiftTest( false );
await press.Tab();
expect( itemA1 ).toHaveFocus();