diff --git a/packages/components/src/navigation/test/index.tsx b/packages/components/src/navigation/test/index.tsx
index 20646a6c809bf..a23b0faffce2b 100644
--- a/packages/components/src/navigation/test/index.tsx
+++ b/packages/components/src/navigation/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';
/**
@@ -172,7 +173,7 @@ const TestNavigationControlled = () => {
describe( 'Navigation', () => {
it( 'should render the panes and active item', async () => {
- render(
);
+ await render(
);
const menuItems = screen.getAllByRole( 'listitem' );
@@ -187,8 +188,8 @@ describe( 'Navigation', () => {
).toHaveTextContent( 'Item 2' );
} );
- it( 'should render anchor links when menu item supplies an href', () => {
- render(
);
+ it( 'should render anchor links when menu item supplies an href', async () => {
+ await render(
);
const linkItem = screen.getByRole( 'link', { name: 'Item 2' } );
@@ -196,8 +197,8 @@ describe( 'Navigation', () => {
expect( linkItem ).toHaveAttribute( 'target', '_blank' );
} );
- it( 'should render a custom component when menu item supplies one', () => {
- render(
);
+ it( 'should render a custom component when menu item supplies one', async () => {
+ await render(
);
expect( screen.getByText( 'customize me' ) ).toBeInTheDocument();
} );
@@ -205,7 +206,7 @@ describe( 'Navigation', () => {
it( 'should set an active category on click', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
await user.click( screen.getByRole( 'button', { name: 'Category' } ) );
@@ -216,30 +217,30 @@ describe( 'Navigation', () => {
expect( menuItems[ 1 ] ).toHaveTextContent( 'Child 2' );
} );
- it( 'should render the root title', () => {
- const { rerender } = render(
);
+ it( 'should render the root title', async () => {
+ const { rerender } = await render(
);
expect( screen.queryByRole( 'heading' ) ).not.toBeInTheDocument();
- rerender(
);
+ await rerender(
);
expect( screen.getByRole( 'heading' ) ).toBeInTheDocument();
expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Home' );
} );
- it( 'should render badges', () => {
- render(
);
+ it( 'should render badges', async () => {
+ await render(
);
const menuItem = screen.getAllByRole( 'listitem' );
expect( menuItem[ 0 ] ).toHaveTextContent( 'Item 1' + '21' );
} );
- it( 'should render menu titles when items exist', () => {
- const { rerender } = render(
);
+ it( 'should render menu titles when items exist', async () => {
+ const { rerender } = await render(
);
expect( screen.queryByText( 'Menu title' ) ).not.toBeInTheDocument();
- rerender(
);
+ await rerender(
);
expect( screen.getByText( 'Menu title' ) ).toBeInTheDocument();
} );
@@ -247,7 +248,7 @@ describe( 'Navigation', () => {
it( 'should navigate up a level when clicking the back button', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
await user.click( screen.getByRole( 'button', { name: 'Category' } ) );
@@ -261,7 +262,7 @@ describe( 'Navigation', () => {
it( 'should navigate correctly when controlled', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
// check root menu is shown and item 1 is selected
expect(
diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index b83bd70d9d744..083c4aa446b14 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -2,7 +2,8 @@
* External dependencies
*/
import type { ComponentPropsWithoutRef } from 'react';
-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';
/**
@@ -408,38 +409,38 @@ describe( 'Navigator', () => {
window.Element.prototype.getClientRects = originalGetClientRects;
} );
- it( 'should render', () => {
- render(
);
+ it( 'should render', async () => {
+ await render(
);
expect( getScreen( 'home' ) ).toBeInTheDocument();
expect( queryScreen( 'child' ) ).not.toBeInTheDocument();
expect( queryScreen( 'nested' ) ).not.toBeInTheDocument();
} );
- it( 'should show a different screen on the first render depending on the value of `initialPath`', () => {
- render(
);
+ it( 'should show a different screen on the first render depending on the value of `initialPath`', async () => {
+ await render(
);
expect( queryScreen( 'home' ) ).not.toBeInTheDocument();
expect( getScreen( 'child' ) ).toBeInTheDocument();
expect( queryScreen( 'nested' ) ).not.toBeInTheDocument();
} );
- it( 'should ignore changes to `initialPath` after the first render', () => {
- const { rerender } = render(
);
+ it( 'should ignore changes to `initialPath` after the first render', async () => {
+ const { rerender } = await render(
);
expect( getScreen( 'home' ) ).toBeInTheDocument();
expect( queryScreen( 'child' ) ).not.toBeInTheDocument();
expect( queryScreen( 'nested' ) ).not.toBeInTheDocument();
- rerender(
);
+ await rerender(
);
expect( getScreen( 'home' ) ).toBeInTheDocument();
expect( queryScreen( 'child' ) ).not.toBeInTheDocument();
expect( queryScreen( 'nested' ) ).not.toBeInTheDocument();
} );
- it( 'should not rended anything if the `initialPath` does not match any available screen', () => {
- render(
);
+ it( 'should not rended anything if the `initialPath` does not match any available screen', async () => {
+ await render(
);
expect( queryScreen( 'home' ) ).not.toBeInTheDocument();
expect( queryScreen( 'child' ) ).not.toBeInTheDocument();
@@ -451,7 +452,7 @@ describe( 'Navigator', () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
expect( getScreen( 'home' ) ).toBeInTheDocument();
expect( getNavigationButton( 'toChildScreen' ) ).toBeInTheDocument();
@@ -521,7 +522,7 @@ describe( 'Navigator', () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
expect(
getNavigationButton( 'toNonExistingScreen' )
@@ -543,7 +544,7 @@ describe( 'Navigator', () => {
} );
it( 'should escape the value of the `path` prop', async () => {
- render(
);
+ await render(
);
expect( getScreen( 'home' ) ).toBeInTheDocument();
expect(
@@ -564,7 +565,7 @@ describe( 'Navigator', () => {
it( 'should match correctly paths with named arguments', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
expect( getScreen( 'home' ) ).toBeInTheDocument();
@@ -594,7 +595,7 @@ describe( 'Navigator', () => {
it( 'should restore focus correctly', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
// Navigate to child screen.
await user.click( getNavigationButton( 'toChildScreen' ) );
@@ -643,7 +644,7 @@ describe( 'Navigator', () => {
it( 'should keep focus on an active element inside navigator, while re-rendering', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
// Navigate to child screen.
await user.click( getNavigationButton( 'toChildScreen' ) );
@@ -665,7 +666,7 @@ describe( 'Navigator', () => {
it( 'should keep focus on an active element outside navigator, while re-rendering', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
// Navigate to child screen.
await user.click( getNavigationButton( 'toChildScreen' ) );
@@ -687,7 +688,7 @@ describe( 'Navigator', () => {
it( 'should restore focus correctly even when the `path` needs to be escaped', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
expect( getScreen( 'home' ) ).toBeInTheDocument();
@@ -711,7 +712,7 @@ describe( 'Navigator', () => {
it( 'should restore focus while using goTo and goToParent', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
expect( getScreen( 'home' ) ).toBeInTheDocument();
@@ -748,7 +749,7 @@ describe( 'Navigator', () => {
it( 'should skip focus based on location `skipFocus` option', async () => {
const user = userEvent.setup();
- render(
);
+ await render(
);
// Navigate to child screen with skipFocus.
await user.click( getNavigationButton( 'goToWithSkipFocus' ) );
diff --git a/packages/components/src/notice/test/index.tsx b/packages/components/src/notice/test/index.tsx
index b601e8717a1d3..7ad5b5811fe15 100644
--- a/packages/components/src/notice/test/index.tsx
+++ b/packages/components/src/notice/test/index.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { render } from '@testing-library/react';
+
+import { render } from '@ariakit/test/react';
/**
* WordPress dependencies
@@ -13,6 +14,12 @@ import { speak } from '@wordpress/a11y';
*/
import Notice from '../index';
+function createContainer() {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ return container;
+}
+
jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
const mockedSpeak = jest.mocked( speak );
@@ -25,8 +32,9 @@ describe( 'Notice', () => {
mockedSpeak.mockReset();
} );
- it( 'should match snapshot', () => {
- const { container } = render(
+ it( 'should match snapshot', async () => {
+ const container = createContainer();
+ await render(
{
] }
>
Example
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
} );
- it( 'should not have is-dismissible class when isDismissible prop is false', () => {
- const { container } = render(
-
I cannot be dismissed!
+ it( 'should not have is-dismissible class when isDismissible prop is false', async () => {
+ const container = createContainer();
+ await render(
+
I cannot be dismissed!,
+ { container }
);
const wrapper = getNoticeWrapper( container );
@@ -52,33 +63,34 @@ describe( 'Notice', () => {
expect( wrapper ).not.toHaveClass( 'is-dismissible' );
} );
- it( 'should default to info status', () => {
- const { container } = render(
FYI );
+ it( 'should default to info status', async () => {
+ const container = createContainer();
+ await render(
FYI, { container } );
expect( getNoticeWrapper( container ) ).toHaveClass( 'is-info' );
} );
describe( 'useSpokenMessage', () => {
- it( 'should speak the given message', () => {
- render(
FYI );
+ it( 'should speak the given message', async () => {
+ await render(
FYI );
expect( speak ).toHaveBeenCalledWith( 'FYI', 'polite' );
} );
- it( 'should speak the given message by explicit politeness', () => {
- render(
Uh oh! );
+ it( 'should speak the given message by explicit politeness', async () => {
+ await render(
Uh oh! );
expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
} );
- it( 'should speak the given message by implicit politeness by status', () => {
- render(
Uh oh! );
+ it( 'should speak the given message by implicit politeness by status', async () => {
+ await render(
Uh oh! );
expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
} );
- it( 'should speak the given message, preferring explicit to implicit politeness', () => {
- render(
+ it( 'should speak the given message, preferring explicit to implicit politeness', async () => {
+ await render(
No need to panic
@@ -90,10 +102,10 @@ describe( 'Notice', () => {
);
} );
- it( 'should coerce a message to a string', () => {
+ it( 'should coerce a message to a string', async () => {
// This test assumes that `@wordpress/a11y` is capable of handling
// markup strings appropriately.
- render(
+ await render(
With emphasis this time.
@@ -105,13 +117,13 @@ describe( 'Notice', () => {
);
} );
- it( 'should not re-speak an effectively equivalent element message', () => {
- const { rerender } = render(
+ it( 'should not re-speak an effectively equivalent element message', async () => {
+ const { rerender } = await render(
With emphasis this time.
);
- rerender(
+ await rerender(
With emphasis this time.
diff --git a/packages/components/src/notice/test/list.tsx b/packages/components/src/notice/test/list.tsx
index 65d896e1eb492..3e81ccca26fc4 100644
--- a/packages/components/src/notice/test/list.tsx
+++ b/packages/components/src/notice/test/list.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
@@ -9,8 +10,8 @@ import { render, screen } from '@testing-library/react';
import NoticeList from '../list';
describe( 'NoticeList', () => {
- it( 'should merge className', () => {
- render(
+ it( 'should merge className', async () => {
+ await render(
List of notices
diff --git a/packages/components/src/number-control/test/index.tsx b/packages/components/src/number-control/test/index.tsx
index 3cf3368f1636b..025308b35bf20 100644
--- a/packages/components/src/number-control/test/index.tsx
+++ b/packages/components/src/number-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';
import userEvent from '@testing-library/user-event';
/**
@@ -30,13 +31,13 @@ function StatefulNumberControl( props: NumberControlProps ) {
describe( 'NumberControl', () => {
describe( 'Basic rendering', () => {
- it( 'should render', () => {
- render(
);
+ it( 'should render', async () => {
+ await render(
);
expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
} );
- it( 'should render custom className', () => {
- render(
);
+ it( 'should render custom className', async () => {
+ await render(
);
expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
} );
} );
@@ -46,7 +47,7 @@ describe( 'NumberControl', () => {
const user = userEvent.setup();
const spy = jest.fn();
- render(
+ await render(
spy( v ) } />
);
@@ -61,7 +62,7 @@ describe( 'NumberControl', () => {
const user = userEvent.setup();
const onChangeSpy = jest.fn();
- render(
+ await render(
{
const user = userEvent.setup();
const onChangeSpy = jest.fn();
- render(
+ await render(
{
it( 'should clamp value within range on ENTER keypress', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
@@ -165,7 +166,7 @@ describe( 'NumberControl', () => {
it( 'should clamp value within range on blur', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.clear( input );
@@ -184,7 +185,7 @@ describe( 'NumberControl', () => {
it( 'should parse non-numeric values to a number on ENTER keypress when required', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.clear( input );
@@ -197,7 +198,7 @@ describe( 'NumberControl', () => {
it( 'should parse non-numeric values to empty string on ENTER keypress when not required', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.clear( input );
@@ -216,7 +217,7 @@ describe( 'NumberControl', () => {
it( 'should not enforce numerical value for empty string when required is omitted', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.clear( input );
@@ -231,7 +232,7 @@ describe( 'NumberControl', () => {
it( 'should enforce numerical value for empty string when required', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.clear( input );
@@ -247,7 +248,9 @@ describe( 'NumberControl', () => {
const spy = jest.fn();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -259,7 +262,7 @@ describe( 'NumberControl', () => {
it( 'should increment by step on key UP press', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -271,7 +274,7 @@ describe( 'NumberControl', () => {
it( 'should increment from a negative value', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -283,7 +286,9 @@ describe( 'NumberControl', () => {
it( 'should increment while preserving the decimal value when `step` is “any”', async () => {
const user = userEvent.setup();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -295,7 +300,7 @@ describe( 'NumberControl', () => {
it( 'should increment by step multiplied by spinFactor when spinFactor is provided', async () => {
const user = userEvent.setup();
- render(
+ await render(
{
it( 'should increment by shiftStep on key UP + shift press', async () => {
const user = userEvent.setup();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -325,7 +332,9 @@ describe( 'NumberControl', () => {
it( 'should increment by shiftStep multiplied by spinFactor on key UP + shift press', async () => {
const user = userEvent.setup();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -337,7 +346,9 @@ describe( 'NumberControl', () => {
it( 'should increment by shiftStep while preserving the decimal value when `step` is “any”', async () => {
const user = userEvent.setup();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -349,7 +360,9 @@ describe( 'NumberControl', () => {
it( 'should increment by custom shiftStep on key UP + shift press', async () => {
const user = userEvent.setup();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -361,7 +374,7 @@ describe( 'NumberControl', () => {
it( 'should increment but be limited by max on shiftStep', async () => {
const user = userEvent.setup();
- render(
+ await render(
{
it( 'should not increment by shiftStep if disabled', async () => {
const user = userEvent.setup();
- render(
+ await render(
{
const user = userEvent.setup();
const spy = jest.fn();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -412,7 +427,7 @@ describe( 'NumberControl', () => {
it( 'should decrement by step on key DOWN press', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -424,7 +439,7 @@ describe( 'NumberControl', () => {
it( 'should decrement from a negative value', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -436,7 +451,9 @@ describe( 'NumberControl', () => {
it( 'should decrement while preserving the decimal value when `step` is “any”', async () => {
const user = userEvent.setup();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -448,7 +465,7 @@ describe( 'NumberControl', () => {
it( 'should decrement by step multiplied by spinFactor when spinFactor is provided', async () => {
const user = userEvent.setup();
- render(
+ await render(
{
it( 'should decrement by shiftStep on key DOWN + shift press', async () => {
const user = userEvent.setup();
- render( );
+ await render( );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -478,7 +495,9 @@ describe( 'NumberControl', () => {
it( 'should decrement by shiftStep multiplied by spinFactor on key DOWN + shift press', async () => {
const user = userEvent.setup();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -490,7 +509,9 @@ describe( 'NumberControl', () => {
it( 'should decrement by shiftStep while preserving the decimal value when `step` is “any”', async () => {
const user = userEvent.setup();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -502,7 +523,9 @@ describe( 'NumberControl', () => {
it( 'should decrement by custom shiftStep on key DOWN + shift press', async () => {
const user = userEvent.setup();
- render( );
+ await render(
+
+ );
const input = screen.getByRole( 'spinbutton' );
await user.click( input );
@@ -514,7 +537,7 @@ describe( 'NumberControl', () => {
it( 'should decrement but be limited by min on shiftStep', async () => {
const user = userEvent.setup();
- render(
+ await render(
{
it( 'should not decrement by shiftStep if disabled', async () => {
const user = userEvent.setup();
- render(
+ await render(
{
},
];
- it( 'shows heading label', () => {
- render( );
+ it( 'shows heading label', async () => {
+ await render( );
const paletteLabel = screen.getByRole( 'heading', {
level: 2,
@@ -134,8 +135,8 @@ describe( 'PaletteEdit', () => {
expect( paletteLabel ).toBeVisible();
} );
- it( 'shows heading label with custom heading level', () => {
- render(
+ it( 'shows heading label with custom heading level', async () => {
+ await render(
{
).toBeVisible();
} );
- it( 'shows empty message', () => {
- render(
+ it( 'shows empty message', async () => {
+ await render(
{
} );
it( 'shows an option to remove all colors', async () => {
- render( );
+ await render( );
await click(
screen.getByRole( 'button', {
@@ -181,7 +182,7 @@ describe( 'PaletteEdit', () => {
} );
it( 'shows a reset option when the `canReset` prop is enabled', async () => {
- render(
+ await render(
);
@@ -200,7 +201,7 @@ describe( 'PaletteEdit', () => {
} );
it( 'does not show a reset colors option when `canReset` is disabled', async () => {
- render( );
+ await render( );
await click(
screen.getByRole( 'button', {
@@ -217,7 +218,7 @@ describe( 'PaletteEdit', () => {
it( 'calls the `onChange` with the new color appended', async () => {
const onChange = jest.fn();
- render(
+ await render(
{
it( 'calls the `onChange` with the new gradient appended', async () => {
const onChange = jest.fn();
- render(
+ await render(
{
} );
} );
- it( 'can not add new colors when `canOnlyChangeValues` is enabled', () => {
- render( );
+ it( 'can not add new colors when `canOnlyChangeValues` is enabled', async () => {
+ await render( );
expect(
screen.queryByRole( 'button', {
@@ -286,7 +287,7 @@ describe( 'PaletteEdit', () => {
it( 'can remove a color', async () => {
const onChange = jest.fn();
- render(
+ await render(
{
it( 'can update palette name', async () => {
const onChange = jest.fn();
- render(
+ await render(
{
it( 'can update color palette value', async () => {
const onChange = jest.fn();
- render(
+ await render(
{
it( 'can update gradient palette value', async () => {
const onChange = jest.fn();
- render(
+ await render(
{
describe( 'basic rendering', () => {
- it( 'should render an empty div with the matching className', () => {
- const { container } = render( );
+ it( 'should render an empty div with the matching className', async () => {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ await render( , { container } );
expect( container ).toMatchSnapshot();
} );
- it( 'should render inner content, if opened', () => {
- render(
+ it( 'should render inner content, if opened', async () => {
+ await render(
Content
@@ -27,8 +30,8 @@ describe( 'PanelBody', () => {
expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
} );
- it( 'should be opened by default', () => {
- render(
+ it( 'should be opened by default', async () => {
+ await render(
Content
@@ -37,8 +40,8 @@ describe( 'PanelBody', () => {
expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
} );
- it( 'should render as initially opened, if specified', () => {
- render(
+ it( 'should render as initially opened, if specified', async () => {
+ await render(
Content
@@ -47,8 +50,8 @@ describe( 'PanelBody', () => {
expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
} );
- it( 'should call the children function, if specified', () => {
- const { rerender } = render(
+ it( 'should call the children function, if specified', async () => {
+ const { rerender } = await render(
{ ( { opened } ) => (
@@ -64,7 +67,7 @@ describe( 'PanelBody', () => {
expect( panelContent ).not.toBeVisible();
expect( panelContent ).toHaveAttribute( 'hidden', '' );
- rerender(
+ await rerender(
{ ( { opened } ) => (
@@ -82,8 +85,8 @@ describe( 'PanelBody', () => {
} );
describe( 'toggling', () => {
- it( 'should toggle collapse with opened prop', () => {
- const { rerender } = render(
+ it( 'should toggle collapse with opened prop', async () => {
+ const { rerender } = await render(
Content
@@ -91,7 +94,7 @@ describe( 'PanelBody', () => {
expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
- rerender(
+ await rerender(
Content
@@ -101,7 +104,7 @@ describe( 'PanelBody', () => {
screen.queryByTestId( 'inner-content' )
).not.toBeInTheDocument();
- rerender(
+ await rerender(
Content
@@ -113,7 +116,7 @@ describe( 'PanelBody', () => {
it( 'should toggle when clicking header', async () => {
const user = userEvent.setup();
- render(
+ await render(
Content
@@ -140,7 +143,7 @@ describe( 'PanelBody', () => {
const user = userEvent.setup();
const mock = jest.fn();
- render(
+ await render(
Content
diff --git a/packages/components/src/panel/test/header.tsx b/packages/components/src/panel/test/header.tsx
index 8f93eb44b074c..672d53ecc2b04 100644
--- a/packages/components/src/panel/test/header.tsx
+++ b/packages/components/src/panel/test/header.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
@@ -10,22 +11,24 @@ import PanelHeader from '../header';
describe( 'PanelHeader', () => {
describe( 'basic rendering', () => {
- it( 'should render PanelHeader with empty div inside', () => {
- const { container } = render(
);
+ it( 'should render PanelHeader with empty div inside', async () => {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ await render(
, { container } );
expect( container ).toMatchSnapshot();
} );
- it( 'should render a label matching the text provided in the prop', () => {
- render(
);
+ it( 'should render a label matching the text provided in the prop', async () => {
+ await render(
);
const heading = screen.getByRole( 'heading' );
expect( heading ).toBeVisible();
expect( heading ).toHaveTextContent( 'Some Label' );
} );
- it( 'should render child elements in the panel header body when provided', () => {
- render(
+ it( 'should render child elements in the panel header body when provided', async () => {
+ await render(
Some text
@@ -36,8 +39,8 @@ describe( 'PanelHeader', () => {
expect( term ).toHaveTextContent( 'Some text' );
} );
- it( 'should render both child elements and label when passed in', () => {
- render(
+ it( 'should render both child elements and label when passed in', async () => {
+ await render(
Some text
diff --git a/packages/components/src/panel/test/index.tsx b/packages/components/src/panel/test/index.tsx
index a48c88c36cb50..5ee7be7e7defd 100644
--- a/packages/components/src/panel/test/index.tsx
+++ b/packages/components/src/panel/test/index.tsx
@@ -1,39 +1,48 @@
/**
* External dependencies
*/
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
/**
* Internal dependencies
*/
import Panel from '..';
+function createContainer() {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ return container;
+}
+
describe( 'Panel', () => {
describe( 'basic rendering', () => {
- it( 'should render an empty div without any provided props', () => {
- const { container } = render(
);
+ it( 'should render an empty div without any provided props', async () => {
+ const container = createContainer();
+ await render(
, { container } );
expect( container ).toMatchSnapshot();
} );
- it( 'should render a heading when provided text in the header prop', () => {
- render(
);
+ it( 'should render a heading when provided text in the header prop', async () => {
+ await render(
);
const heading = screen.getByRole( 'heading' );
expect( heading ).toBeVisible();
expect( heading ).toHaveTextContent( 'Header Label' );
} );
- it( 'should render an additional className', () => {
- const { container } = render(
-
- );
+ it( 'should render an additional className', async () => {
+ const container = createContainer();
+ await render(
, {
+ container,
+ } );
expect( container ).toMatchSnapshot();
} );
- it( 'should add additional child elements to be rendered in the panel', () => {
- render(
+ it( 'should add additional child elements to be rendered in the panel', async () => {
+ await render(
The Panel
@@ -44,8 +53,8 @@ describe( 'Panel', () => {
expect( term ).toHaveTextContent( 'The Panel' );
} );
- it( 'should render both children and header when provided as props', () => {
- render(
+ it( 'should render both children and header when provided as props', async () => {
+ await render(
The Panel
diff --git a/packages/components/src/panel/test/row.tsx b/packages/components/src/panel/test/row.tsx
index ee052e78dfd51..fa340c7571527 100644
--- a/packages/components/src/panel/test/row.tsx
+++ b/packages/components/src/panel/test/row.tsx
@@ -1,30 +1,39 @@
/**
* External dependencies
*/
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
/**
* Internal dependencies
*/
import PanelRow from '../row';
+function createContainer() {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ return container;
+}
+
describe( 'PanelRow', () => {
- it( 'should render with the default class name', () => {
- const { container } = render(
);
+ it( 'should render with the default class name', async () => {
+ const container = createContainer();
+ await render(
, { container } );
expect( container ).toMatchSnapshot();
} );
- it( 'should render with the custom class name', () => {
- const { container } = render(
-
- );
+ it( 'should render with the custom class name', async () => {
+ const container = createContainer();
+ await render(
, {
+ container,
+ } );
expect( container ).toMatchSnapshot();
} );
- it( 'should render child components', () => {
- render(
+ it( 'should render child components', async () => {
+ await render(
Some text
diff --git a/packages/components/src/placeholder/test/index.tsx b/packages/components/src/placeholder/test/index.tsx
index 6d9427af00b4c..b946e6e8f38ed 100644
--- a/packages/components/src/placeholder/test/index.tsx
+++ b/packages/components/src/placeholder/test/index.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { render, screen, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
/**
* WordPress dependencies
@@ -56,8 +57,8 @@ describe( 'Placeholder', () => {
} );
describe( 'basic rendering', () => {
- it( 'should by default render label section and content section.', () => {
- render(
);
+ it( 'should by default render label section and content section.', async () => {
+ await render(
);
const placeholder = getPlaceholder();
expect( placeholder ).toHaveClass( 'components-placeholder' );
@@ -89,8 +90,8 @@ describe( 'Placeholder', () => {
expect( placeholderFieldset ).toBeEmptyDOMElement();
} );
- it( 'should render an Icon in the label section', () => {
- render(
);
+ it( 'should render an Icon in the label section', async () => {
+ await render(
);
const placeholder = getPlaceholder();
const icon = within( placeholder ).getByTestId( 'icon' );
@@ -101,9 +102,9 @@ describe( 'Placeholder', () => {
expect( icon ).toBeInTheDocument();
} );
- it( 'should render a label section', () => {
+ it( 'should render a label section', async () => {
const label = 'WordPress';
- render(
);
+ await render(
);
const placeholderLabel = screen.getByText( label );
expect( placeholderLabel ).toHaveClass(
@@ -112,18 +113,18 @@ describe( 'Placeholder', () => {
expect( placeholderLabel ).toBeInTheDocument();
} );
- it( 'should display content from the children property', () => {
+ it( 'should display content from the children property', async () => {
const content = 'Placeholder content';
- render(
{ content } );
+ await render(
{ content } );
const placeholder = screen.getByText( content );
expect( placeholder ).toBeInTheDocument();
expect( placeholder ).toHaveTextContent( content );
} );
- it( 'should display instructions when provided', () => {
+ it( 'should display instructions when provided', async () => {
const instructions = 'Choose an option.';
- render(
+ await render(
Placeholder content
@@ -135,9 +136,9 @@ describe( 'Placeholder', () => {
expect( instructionsContainer ).toBeInTheDocument();
} );
- it( 'should announce instructions to screen readers', () => {
+ it( 'should announce instructions to screen readers', async () => {
const instructions = 'Awesome block placeholder instructions.';
- render(
+ await render(
Placeholder content
@@ -146,16 +147,16 @@ describe( 'Placeholder', () => {
expect( speak ).toHaveBeenCalledWith( instructions );
} );
- it( 'should add an additional className to the top container', () => {
- render(
);
+ it( 'should add an additional className to the top container', async () => {
+ await render(
);
const placeholder = getPlaceholder();
expect( placeholder ).toHaveClass( 'components-placeholder' );
expect( placeholder ).toHaveClass( 'wp-placeholder' );
} );
- it( 'should add additional props to the top level container', () => {
- render(
);
+ it( 'should add additional props to the top level container', async () => {
+ await render(
);
const placeholder = getPlaceholder();
expect( placeholder ).toHaveAttribute( 'data-test', 'test' );
@@ -163,14 +164,14 @@ describe( 'Placeholder', () => {
} );
describe( 'resize aware', () => {
- it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
+ it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', async () => {
// @ts-ignore
useResizeObserver.mockReturnValue( [
,
{ width: 480 },
] );
- render(
);
+ await render(
);
const placeholder = getPlaceholder();
expect( placeholder ).toHaveClass( 'is-large' );
@@ -178,14 +179,14 @@ describe( 'Placeholder', () => {
expect( placeholder ).not.toHaveClass( 'is-small' );
} );
- it( 'should assign modifier class', () => {
+ it( 'should assign modifier class', async () => {
// @ts-ignore
useResizeObserver.mockReturnValue( [
,
{ width: null },
] );
- render(
);
+ await render(
);
const placeholder = getPlaceholder();
expect( placeholder ).not.toHaveClass( 'is-large' );
diff --git a/packages/components/src/popover/test/index.tsx b/packages/components/src/popover/test/index.tsx
index f5ee7e96e4c54..118cf8cb9c36a 100644
--- a/packages/components/src/popover/test/index.tsx
+++ b/packages/components/src/popover/test/index.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { render, screen, waitFor, getByText } from '@testing-library/react';
+import { screen, waitFor, getByText } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
import userEvent from '@testing-library/user-event';
import type { CSSProperties } from 'react';
@@ -22,6 +23,12 @@ import Popover from '..';
import type { PopoverProps } from '../types';
import { PopoverInsideIframeRenderedInExternalSlot } from './utils';
+function createContainer() {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ return container;
+}
+
type PositionToPlacementTuple = [
NonNullable< PopoverProps[ 'position' ] >,
NonNullable< PopoverProps[ 'placement' ] >,
@@ -121,7 +128,7 @@ describe( 'Popover', () => {
describe( 'Component', () => {
describe( 'basic behavior', () => {
it( 'should render content', async () => {
- render(
Hello );
+ await render(
Hello );
await waitFor( () =>
expect( screen.getByText( 'Hello' ) ).toBeVisible()
@@ -129,7 +136,7 @@ describe( 'Popover', () => {
} );
it( 'should forward additional props to portaled element', async () => {
- render(
Hello );
+ await render(
Hello );
await waitFor( () =>
expect( screen.getByRole( 'tooltip' ) ).toBeVisible()
@@ -137,10 +144,12 @@ describe( 'Popover', () => {
} );
it( 'should render inline regardless of slot name', async () => {
- const { container } = render(
+ const container = createContainer();
+ await render(
Hello
-
+ ,
+ { container }
);
await waitFor( () =>
@@ -167,7 +176,7 @@ describe( 'Popover', () => {
);
};
- render(
+ await render(
Popover content
);
@@ -181,7 +190,7 @@ describe( 'Popover', () => {
describe( 'focus behavior', () => {
it( 'should focus the popover container when opened', async () => {
- render(
+ await render(
Popover content
@@ -195,7 +204,7 @@ describe( 'Popover', () => {
} );
it( 'should allow focus-on-open behavior to be disabled', async () => {
- render(
+ await render(
Popover content
);
@@ -218,7 +227,7 @@ describe( 'Popover', () => {
props?: Partial< React.ComponentProps< typeof Popover > >
) => {
const user = await userEvent.setup();
- const view = render(
+ await render(
@@ -233,7 +242,6 @@ describe( 'Popover', () => {
screen.getAllByRole( 'button' );
return {
- ...view,
popover,
firstButton,
secondButton,
@@ -305,18 +313,13 @@ describe( 'Popover', () => {
} );
test( 'when `focusOnMount` is false if `constrainTabbing` is true', async () => {
- const {
- user,
- baseElement,
- firstButton,
- secondButton,
- thirdButton,
- } = await setup( {
- focusOnMount: false,
- constrainTabbing: true,
- } );
+ const { user, firstButton, secondButton, thirdButton } =
+ await setup( {
+ focusOnMount: false,
+ constrainTabbing: true,
+ } );
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
await user.tab();
expect( firstButton ).toHaveFocus();
await user.tab();
@@ -336,13 +339,8 @@ describe( 'Popover', () => {
// which means the default value for `constrainTabbing` is
// 'true', but the provided value should override this.
- const {
- user,
- baseElement,
- firstButton,
- secondButton,
- thirdButton,
- } = await setup( { constrainTabbing: false } );
+ const { user, firstButton, secondButton, thirdButton } =
+ await setup( { constrainTabbing: false } );
await waitFor( () => expect( firstButton ).toHaveFocus() );
await user.tab();
@@ -350,23 +348,18 @@ describe( 'Popover', () => {
await user.tab();
expect( thirdButton ).toHaveFocus();
await user.tab();
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
await user.tab();
expect( firstButton ).toHaveFocus();
await user.tab( { shift: true } );
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
} );
test( 'when `focusOnMount` is false', async () => {
- const {
- user,
- baseElement,
- firstButton,
- secondButton,
- thirdButton,
- } = await setup( { focusOnMount: false } );
+ const { user, firstButton, secondButton, thirdButton } =
+ await setup( { focusOnMount: false } );
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
await user.tab();
expect( firstButton ).toHaveFocus();
await user.tab();
@@ -374,17 +367,16 @@ describe( 'Popover', () => {
await user.tab();
expect( thirdButton ).toHaveFocus();
await user.tab();
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
await user.tab();
expect( firstButton ).toHaveFocus();
await user.tab( { shift: true } );
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
} );
test( 'when `focusOnMount` is true if `constrainTabbing` is false', async () => {
const {
user,
- baseElement,
popover,
firstButton,
secondButton,
@@ -402,24 +394,19 @@ describe( 'Popover', () => {
await user.tab();
expect( thirdButton ).toHaveFocus();
await user.tab();
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
await user.tab();
expect( firstButton ).toHaveFocus();
await user.tab( { shift: true } );
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
} );
test( 'when `focusOnMount` is "firstElement" if `constrainTabbing` is false', async () => {
- const {
- user,
- baseElement,
- firstButton,
- secondButton,
- thirdButton,
- } = await setup( {
- focusOnMount: 'firstElement',
- constrainTabbing: false,
- } );
+ const { user, firstButton, secondButton, thirdButton } =
+ await setup( {
+ focusOnMount: 'firstElement',
+ constrainTabbing: false,
+ } );
await waitFor( () => expect( firstButton ).toHaveFocus() );
await user.tab();
@@ -427,11 +414,11 @@ describe( 'Popover', () => {
await user.tab();
expect( thirdButton ).toHaveFocus();
await user.tab();
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
await user.tab();
expect( firstButton ).toHaveFocus();
await user.tab( { shift: true } );
- expect( baseElement ).toHaveFocus();
+ expect( document.body ).toHaveFocus();
} );
} );
} );
@@ -439,7 +426,7 @@ describe( 'Popover', () => {
describe( 'Slot outside iframe', () => {
it( 'should support cross-document rendering', async () => {
- render(
+ await render(
content
diff --git a/packages/components/src/progress-bar/test/index.tsx b/packages/components/src/progress-bar/test/index.tsx
index c3984318cc618..a28e847f90188 100644
--- a/packages/components/src/progress-bar/test/index.tsx
+++ b/packages/components/src/progress-bar/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
@@ -9,9 +10,15 @@ import { render, screen } from '@testing-library/react';
import { ProgressBar } from '..';
import { INDETERMINATE_TRACK_WIDTH } from '../styles';
+function createContainer() {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ return container;
+}
+
describe( 'ProgressBar', () => {
- it( 'should render an indeterminate semantic progress bar element', () => {
- render( );
+ it( 'should render an indeterminate semantic progress bar element', async () => {
+ await render( );
const progressBar = screen.getByRole( 'progressbar' );
@@ -20,8 +27,8 @@ describe( 'ProgressBar', () => {
expect( progressBar ).not.toHaveValue();
} );
- it( 'should render a determinate semantic progress bar element', () => {
- render( );
+ it( 'should render a determinate semantic progress bar element', async () => {
+ await render( );
const progressBar = screen.getByRole( 'progressbar' );
@@ -30,8 +37,9 @@ describe( 'ProgressBar', () => {
expect( progressBar ).toHaveValue( 55 );
} );
- it( 'should use `INDETERMINATE_TRACK_WIDTH`% as track width for indeterminate progress bar', () => {
- const { container } = render( );
+ it( 'should use `INDETERMINATE_TRACK_WIDTH`% as track width for indeterminate progress bar', async () => {
+ const container = createContainer();
+ await render( , { container } );
/**
* We're intentionally not using an accessible selector, because
@@ -48,8 +56,9 @@ describe( 'ProgressBar', () => {
} );
} );
- it( 'should use `value`% as width for determinate progress bar', () => {
- const { container } = render( );
+ it( 'should use `value`% as width for determinate progress bar', async () => {
+ const container = createContainer();
+ await render( , { container } );
/**
* We're intentionally not using an accessible selector, because
@@ -63,12 +72,12 @@ describe( 'ProgressBar', () => {
} );
} );
- it( 'should pass any additional props down to the underlying `progress` element', () => {
+ it( 'should pass any additional props down to the underlying `progress` element', async () => {
const id = 'foo-bar-123';
const ariaLabel = 'in progress...';
const style = { opacity: 1 };
- render(
+ await render(
);
diff --git a/packages/components/src/radio-control/test/index.tsx b/packages/components/src/radio-control/test/index.tsx
index 0be166513a9a4..f9d9fe2770983 100644
--- a/packages/components/src/radio-control/test/index.tsx
+++ b/packages/components/src/radio-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';
import userEvent from '@testing-library/user-event';
/**
@@ -56,9 +57,9 @@ describe.each( [
const [ , Component ] = modeAndComponent;
describe( 'semantics and labelling', () => {
- it( 'should render radio inputs with accessible labels', () => {
+ it( 'should render radio inputs with accessible labels', async () => {
const onChangeSpy = jest.fn();
- render(
+ await render(
);
@@ -71,9 +72,9 @@ describe.each( [
}
} );
- it( 'should not select have a selected value when the `selected` prop does not match any available options', () => {
+ it( 'should not select have a selected value when the `selected` prop does not match any available options', async () => {
const onChangeSpy = jest.fn();
- render(
+ await render(
);
@@ -84,9 +85,9 @@ describe.each( [
).not.toBeInTheDocument();
} );
- it( 'should render mutually exclusive radio inputs', () => {
+ it( 'should render mutually exclusive radio inputs', async () => {
const onChangeSpy = jest.fn();
- render(
+ await render(
{
+ it( 'should use the group help text to describe individual options', async () => {
const onChangeSpy = jest.fn();
- render(
+ await render(
{
+ it( 'should use the option description text to describe individual options', async () => {
const onChangeSpy = jest.fn();
- render(
+ await render(
{
+ it( 'should use both the option description text and the group help text to describe individual options', async () => {
const onChangeSpy = jest.fn();
- render(
+ await render(
{
const user = userEvent.setup();
const onChangeSpy = jest.fn();
- render(
+ await render(
);
@@ -192,7 +193,7 @@ describe.each( [
it( 'should select a new value when clicking on the radio label', async () => {
const user = userEvent.setup();
const onChangeSpy = jest.fn();
- render(
+ await render(
);
@@ -215,7 +216,7 @@ describe.each( [
it( 'should select a new value when using the arrow keys', async () => {
const user = userEvent.setup();
const onChangeSpy = jest.fn();
- render(
+ await render(
);
diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx
index d843b615ed007..21bf7f1ae3c6f 100644
--- a/packages/components/src/range-control/test/index.tsx
+++ b/packages/components/src/range-control/test/index.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
/**
* Internal dependencies
@@ -17,10 +18,10 @@ const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
describe( 'RangeControl', () => {
describe( '#render()', () => {
- it( 'should trigger change callback with numeric value', () => {
+ it( 'should trigger change callback with numeric value', async () => {
const onChange = jest.fn();
- render( );
+ await render( );
const rangeInput = getRangeInput();
const numberInput = getNumberInput();
@@ -35,12 +36,15 @@ describe( 'RangeControl', () => {
expect( onChange ).toHaveBeenCalledWith( 10 );
} );
- it( 'should render with icons', () => {
- const { container } = render(
+ it( 'should render with icons', async () => {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ await render(
+ />,
+ { container }
);
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -58,8 +62,8 @@ describe( 'RangeControl', () => {
} );
describe( 'validation', () => {
- it( 'should not apply if new value is lower than minimum', () => {
- render( );
+ it( 'should not apply if new value is lower than minimum', async () => {
+ await render( );
const rangeInput = getRangeInput();
const numberInput = getNumberInput();
@@ -70,8 +74,8 @@ describe( 'RangeControl', () => {
expect( rangeInput.value ).not.toBe( '10' );
} );
- it( 'should not apply if new value is greater than maximum', () => {
- render( );
+ it( 'should not apply if new value is greater than maximum', async () => {
+ await render( );
const rangeInput = getRangeInput();
const numberInput = getNumberInput();
@@ -82,9 +86,9 @@ describe( 'RangeControl', () => {
expect( rangeInput.value ).not.toBe( '21' );
} );
- it( 'should not call onChange if new value is invalid', () => {
+ it( 'should not call onChange if new value is invalid', async () => {
const onChange = jest.fn();
- render(
+ await render(
);
@@ -96,9 +100,9 @@ describe( 'RangeControl', () => {
expect( onChange ).not.toHaveBeenCalled();
} );
- it( 'should keep invalid values in number input until loss of focus', () => {
+ it( 'should keep invalid values in number input until loss of focus', async () => {
const onChange = jest.fn();
- render(
+ await render(
);
@@ -116,8 +120,8 @@ describe( 'RangeControl', () => {
expect( numberInput.value ).toBe( '-1' );
} );
- it( 'should validate when provided a max or min of zero', () => {
- render( );
+ it( 'should validate when provided a max or min of zero', async () => {
+ await render( );
const rangeInput = getRangeInput();
const numberInput = getNumberInput();
@@ -129,8 +133,8 @@ describe( 'RangeControl', () => {
expect( rangeInput.value ).toBe( '0' );
} );
- it( 'should validate when min and max are negative', () => {
- render( );
+ it( 'should validate when min and max are negative', async () => {
+ await render( );
const rangeInput = getRangeInput();
const numberInput = getNumberInput();
@@ -147,9 +151,9 @@ describe( 'RangeControl', () => {
expect( rangeInput.value ).toBe( '-50' );
} );
- it( 'should take into account the step starting from min', () => {
+ it( 'should take into account the step starting from min', async () => {
const onChange = jest.fn();
- render(
+ await render(
{
} );
describe( 'initialPosition / value', () => {
- it( 'should render initial rendered value of 50% of min/max, if no initialPosition or value is defined', () => {
- render( );
+ it( 'should render initial rendered value of 50% of min/max, if no initialPosition or value is defined', async () => {
+ await render( );
const rangeInput = getRangeInput();
expect( rangeInput.value ).toBe( '5' );
} );
- it( 'should render initialPosition if no value is provided', () => {
- render( );
+ it( 'should render initialPosition if no value is provided', async () => {
+ await render( );
const rangeInput = getRangeInput();
expect( rangeInput.value ).toBe( '50' );
} );
- it( 'should render value instead of initialPosition is provided', () => {
- render( );
+ it( 'should render value instead of initialPosition is provided', async () => {
+ await render(
+
+ );
const rangeInput = getRangeInput();
expect( rangeInput.value ).toBe( '10' );
} );
- it( 'should clamp initialPosition between min and max on first render, and on reset', () => {
- render(
+ it( 'should clamp initialPosition between min and max on first render, and on reset', async () => {
+ await render(
{
} );
describe( 'input field', () => {
- it( 'should render an input field by default', () => {
- render( );
+ it( 'should render an input field by default', async () => {
+ await render( );
const numberInput = getNumberInput();
expect( numberInput ).toBeInTheDocument();
} );
- it( 'should not render an input field, if disabled', () => {
- render( );
+ it( 'should not render an input field, if disabled', async () => {
+ await render( );
const numberInput = screen.queryByRole( 'spinbutton' );
expect( numberInput ).not.toBeInTheDocument();
} );
- it( 'should render a zero value into input range and field', () => {
- render( );
+ it( 'should render a zero value into input range and field', async () => {
+ await render( );
const rangeInput = getRangeInput();
const numberInput = getNumberInput();
@@ -256,8 +262,8 @@ describe( 'RangeControl', () => {
expect( numberInput.value ).toBe( '0' );
} );
- it( 'should update both field and range on change', () => {
- render( );
+ it( 'should update both field and range on change', async () => {
+ await render( );
const rangeInput = getRangeInput();
const numberInput = getNumberInput();
@@ -275,8 +281,8 @@ describe( 'RangeControl', () => {
expect( numberInput.value ).toBe( '7' );
} );
- it( 'should reset input values if next value is removed', () => {
- render( );
+ it( 'should reset input values if next value is removed', async () => {
+ await render( );
const rangeInput = getRangeInput();
const numberInput = getNumberInput();
@@ -292,9 +298,9 @@ describe( 'RangeControl', () => {
} );
describe( 'reset', () => {
- it( 'should reset to a custom fallback value, defined by a parent component', () => {
+ it( 'should reset to a custom fallback value, defined by a parent component', async () => {
const spy = jest.fn();
- render(
+ await render(
{
expect( spy ).toHaveBeenCalledWith( 33 );
} );
- it( 'should reset to a 50% of min/max value, of no initialPosition or value is defined', () => {
- render(
+ it( 'should reset to a 50% of min/max value, of no initialPosition or value is defined', async () => {
+ await render(
{
);
};
- it( 'should rerender with new emdeded content if html prop changes', () => {
- render( );
+ it( 'should rerender with new emdeded content if html prop changes', async () => {
+ await render( );
const iframe =
screen.getByTitle< HTMLIFrameElement >( 'SandBox Title' );
diff --git a/packages/components/src/scroll-lock/test/index.tsx b/packages/components/src/scroll-lock/test/index.tsx
index 012251d5f3296..eb7bd3af0bbf5 100644
--- a/packages/components/src/scroll-lock/test/index.tsx
+++ b/packages/components/src/scroll-lock/test/index.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { render } from '@testing-library/react';
+
+import { render } from '@ariakit/test/react';
/**
* Internal dependencies
@@ -11,14 +12,14 @@ import ScrollLock from '..';
describe( 'scroll-lock', () => {
const lockingClassName = 'lockscroll';
- it( 'locks when mounted', () => {
+ it( 'locks when mounted', async () => {
expect( document.documentElement ).not.toHaveClass( lockingClassName );
- render( );
+ await render( );
expect( document.documentElement ).toHaveClass( lockingClassName );
} );
- it( 'unlocks when unmounted', () => {
- const { unmount } = render( );
+ it( 'unlocks when unmounted', async () => {
+ const { unmount } = await render( );
expect( document.documentElement ).toHaveClass( lockingClassName );
unmount();
expect( document.documentElement ).not.toHaveClass( lockingClassName );
diff --git a/packages/components/src/scrollable/test/index.tsx b/packages/components/src/scrollable/test/index.tsx
index c35c22982de50..020bec39d81be 100644
--- a/packages/components/src/scrollable/test/index.tsx
+++ b/packages/components/src/scrollable/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
diff --git a/packages/components/src/search-control/test/index.tsx b/packages/components/src/search-control/test/index.tsx
index f130cab1b2a7c..145800dbb1b0f 100644
--- a/packages/components/src/search-control/test/index.tsx
+++ b/packages/components/src/search-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';
import { click, type } from '@ariakit/test';
/**
@@ -42,7 +43,7 @@ describe( 'SearchControl', () => {
it( 'should call onChange with input value when value is changed', async () => {
const onChangeSpy = jest.fn();
- render( );
+ await render( );
const searchInput = screen.getByRole( 'searchbox' );
await type( 'test', searchInput );
@@ -52,7 +53,7 @@ describe( 'SearchControl', () => {
it( 'should render a Reset search button if no onClose function is provided', async () => {
const onChangeSpy = jest.fn();
- render( );
+ await render( );
const searchInput = screen.getByRole( 'searchbox' );
@@ -74,7 +75,7 @@ describe( 'SearchControl', () => {
it( 'should should render a Close button (instead of Reset) when onClose function is provided', async () => {
const onChangeSpy = jest.fn();
const onCloseSpy = jest.fn();
- render(
+ await render(
);
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index 03e3acbf1f732..903ba2f1302df 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.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';
/**
@@ -10,8 +11,8 @@ import userEvent from '@testing-library/user-event';
import SelectControl from '..';
describe( 'SelectControl', () => {
- it( 'should not render when no options or children are provided', () => {
- render( );
+ it( 'should not render when no options or children are provided', async () => {
+ await render( );
// use `queryByRole` to avoid throwing an error with `getByRole`
expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
@@ -21,7 +22,7 @@ describe( 'SelectControl', () => {
const user = await userEvent.setup();
const handleChangeMock = jest.fn();
- render(
+ await render(
@@ -50,7 +51,7 @@ describe( 'SelectControl', () => {
const user = await userEvent.setup();
const handleChangeMock = jest.fn();
- render(
+ await render(
{
- it( 'does not render anything if no shortcut prop is provided', () => {
- const { container } = render( );
+ it( 'does not render anything if no shortcut prop is provided', async () => {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ await render( , { container } );
expect( container ).toBeEmptyDOMElement();
} );
- it( 'renders the shortcut display text when a string is passed as the shortcut', () => {
- render( );
+ it( 'renders the shortcut display text when a string is passed as the shortcut', async () => {
+ await render( );
expect( screen.getByText( 'shortcut text' ) ).toMatchSnapshot();
} );
- it( 'renders the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', () => {
- render(
+ it( 'renders the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', async () => {
+ await render(
{
);
} );
- it( 'renders passed className', () => {
- render( );
+ it( 'renders passed className', async () => {
+ await render(
+
+ );
expect( screen.getByText( 'shortcut text' ) ).toMatchSnapshot();
} );
} );
diff --git a/packages/components/src/slot-fill/test/index.js b/packages/components/src/slot-fill/test/index.js
index d269cb4e03641..dfe7f4228093b 100644
--- a/packages/components/src/slot-fill/test/index.js
+++ b/packages/components/src/slot-fill/test/index.js
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { render, screen, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
/**
* Internal dependencies
diff --git a/packages/components/src/slot-fill/test/slot.js b/packages/components/src/slot-fill/test/slot.js
index 99836a9446352..5dac492a0704b 100644
--- a/packages/components/src/slot-fill/test/slot.js
+++ b/packages/components/src/slot-fill/test/slot.js
@@ -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';
/**
@@ -14,6 +15,11 @@ import { Slot, Fill, Provider } from '../';
*/
import { Component } from '@wordpress/element';
+function createContainer() {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ return container;
+}
class Filler extends Component {
constructor() {
super( ...arguments );
@@ -37,34 +43,39 @@ class Filler extends Component {
}
describe( 'Slot', () => {
- it( 'should render empty Fills', () => {
- const { container } = render(
+ it( 'should render empty Fills', async () => {
+ const container = createContainer();
+ await render(
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
} );
- it( 'should render a string Fill', () => {
- const { container } = render(
+ it( 'should render a string Fill', async () => {
+ const container = createContainer();
+ await render(
content
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
} );
- it( 'should render a Fill containing an element', () => {
- const { container } = render(
+ it( 'should render a Fill containing an element', async () => {
+ const container = createContainer();
+ await render(
@@ -72,14 +83,16 @@ describe( 'Slot', () => {
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
} );
- it( 'should render a Fill containing an array', () => {
- const { container } = render(
+ it( 'should render a Fill containing an array', async () => {
+ const container = createContainer();
+ await render(
@@ -87,7 +100,8 @@ describe( 'Slot', () => {
{ [ , , 'text' ] }
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
@@ -96,7 +110,7 @@ describe( 'Slot', () => {
it( 'calls the functions passed as the Slot’s fillProps in the Fill', async () => {
const onClose = jest.fn();
const user = userEvent.setup();
- render(
+ await render(
@@ -114,8 +128,9 @@ describe( 'Slot', () => {
expect( onClose ).toHaveBeenCalledTimes( 1 );
} );
- it( 'should render empty Fills without HTML wrapper when render props used', () => {
- const { container } = render(
+ it( 'should render empty Fills without HTML wrapper when render props used', async () => {
+ const container = createContainer();
+ await render(
@@ -127,14 +142,16 @@ describe( 'Slot', () => {
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
} );
- it( 'should render a string Fill with HTML wrapper when render props used', () => {
- const { container } = render(
+ it( 'should render a string Fill with HTML wrapper when render props used', async () => {
+ const container = createContainer();
+ await render(
@@ -144,7 +161,8 @@ describe( 'Slot', () => {
content
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
@@ -152,13 +170,15 @@ describe( 'Slot', () => {
it( 'should re-render Slot when not bubbling virtually', async () => {
const user = userEvent.setup();
- const { container } = render(
+ const container = createContainer();
+ await render(
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
@@ -168,16 +188,18 @@ describe( 'Slot', () => {
expect( container ).toMatchSnapshot();
} );
- it( 'should render in expected order when fills always mounted', () => {
- const { container, rerender } = render(
+ it( 'should render in expected order when fills always mounted', async () => {
+ const container = createContainer();
+ const { rerender } = await render(
-
+ ,
+ { container }
);
- rerender(
+ await rerender(
@@ -191,7 +213,7 @@ describe( 'Slot', () => {
);
- rerender(
+ await rerender(
@@ -206,7 +228,7 @@ describe( 'Slot', () => {
);
- rerender(
+ await rerender(
@@ -229,16 +251,18 @@ describe( 'Slot', () => {
expect( container ).toMatchSnapshot();
} );
- it( 'should render in expected order when fills unmounted', () => {
- const { container, rerender } = render(
+ it( 'should render in expected order when fills unmounted', async () => {
+ const container = createContainer();
+ const { rerender } = await render(
-
+ ,
+ { container }
);
- rerender(
+ await rerender(
@@ -248,7 +272,7 @@ describe( 'Slot', () => {
);
- rerender(
+ await rerender(
@@ -258,7 +282,7 @@ describe( 'Slot', () => {
);
- rerender(
+ await rerender(
@@ -273,14 +297,16 @@ describe( 'Slot', () => {
expect( container ).toMatchSnapshot();
} );
- it( 'should warn without a Provider', () => {
- const { container } = render(
+ it( 'should warn without a Provider', async () => {
+ const container = createContainer();
+ await render(
<>
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
@@ -290,8 +316,9 @@ describe( 'Slot', () => {
describe.each( [ false, true ] )(
'bubblesVirtually %p',
( bubblesVirtually ) => {
- it( 'should subsume another slot by the same name', () => {
- const { container, rerender } = render(
+ it( 'should subsume another slot by the same name', async () => {
+ const container = createContainer();
+ const { rerender } = await render(
{
Content
-
+ ,
+ { container }
);
- rerender(
+ await rerender(
{
expect( container ).toMatchSnapshot();
- rerender(
+ await rerender(
@@ -340,8 +368,9 @@ describe( 'Slot', () => {
expect( container ).toMatchSnapshot();
} );
- it( 'should unmount two slots with the same name', () => {
- const { rerender, container } = render(
+ it( 'should unmount two slots with the same name', async () => {
+ const container = createContainer();
+ const { rerender } = await render(
{
/>
Content
-
+ ,
+ { container }
);
- rerender(
+ await rerender(
{
Content
);
- rerender(
+ await rerender(
diff --git a/packages/components/src/snackbar/test/index.tsx b/packages/components/src/snackbar/test/index.tsx
index 6be4e58c92812..9f30d6cb48a34 100644
--- a/packages/components/src/snackbar/test/index.tsx
+++ b/packages/components/src/snackbar/test/index.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { render, screen, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
import { click } from '@ariakit/test';
/**
@@ -25,8 +26,8 @@ describe( 'Snackbar', () => {
mockedSpeak.mockReset();
} );
- it( 'should render correctly', () => {
- render( Message );
+ it( 'should render correctly', async () => {
+ await render( Message );
const snackbar = screen.getByTestId( testId );
@@ -34,20 +35,20 @@ describe( 'Snackbar', () => {
expect( snackbar ).toHaveTextContent( 'Message' );
} );
- it( 'should render with an additional className', () => {
- render( Message );
+ it( 'should render with an additional className', async () => {
+ await render( Message );
expect( screen.getByTestId( testId ) ).toHaveClass( 'gutenberg' );
} );
- it( 'should render with an icon', () => {
+ it( 'should render with an icon', async () => {
const testIcon = (
);
- render( Message );
+ await render( Message );
const snackbar = screen.getByTestId( testId );
const icon = within( snackbar ).getByTestId( 'icon' );
@@ -59,7 +60,7 @@ describe( 'Snackbar', () => {
const onRemove = jest.fn();
const onDismiss = jest.fn();
- render(
+ await render(
Message
@@ -83,7 +84,7 @@ describe( 'Snackbar', () => {
const onRemove = jest.fn();
const onDismiss = jest.fn();
- render(
+ await render(
{
const onRemove = jest.fn();
const onDismiss = jest.fn();
- render(
+ await render(
{
} );
describe( 'actions', () => {
- it( 'should render only the first action with a warning when multiple actions are passed', () => {
- render(
+ it( 'should render only the first action with a warning when multiple actions are passed', async () => {
+ await render(
{
expect( action ).toHaveTextContent( 'One' );
} );
- it( 'should be rendered as a link when the `url` prop is set', () => {
- render(
+ it( 'should be rendered as a link when the `url` prop is set', async () => {
+ await render(
{
it( 'should be rendered as a button and call `onClick` when the `onClick` prop is set', async () => {
const onClick = jest.fn();
- render(
+ await render(
Post updated.
@@ -198,8 +199,8 @@ describe( 'Snackbar', () => {
expect( onClick ).toHaveBeenCalledTimes( 1 );
} );
- it( 'should be rendered as a link when the `url` prop and the `onClick` are set', () => {
- render(
+ it( 'should be rendered as a link when the `url` prop and the `onClick` are set', async () => {
+ await render(
{
} );
describe( 'useSpokenMessage', () => {
- it( 'should speak the given message', () => {
- render( FYI );
+ it( 'should speak the given message', async () => {
+ await render( FYI );
expect( speak ).toHaveBeenCalledWith( 'FYI', 'polite' );
} );
- it( 'should speak the given message by explicit politeness', () => {
- render( Uh oh! );
+ it( 'should speak the given message by explicit politeness', async () => {
+ await render( Uh oh! );
expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
} );
- it( 'should coerce a message to a string', () => {
+ it( 'should coerce a message to a string', async () => {
// This test assumes that `@wordpress/a11y` is capable of handling
// markup strings appropriately.
- render(
+ await render(
With emphasis this time.
@@ -249,13 +250,13 @@ describe( 'Snackbar', () => {
);
} );
- it( 'should not re-speak an effectively equivalent element message', () => {
- const { rerender } = render(
+ it( 'should not re-speak an effectively equivalent element message', async () => {
+ const { rerender } = await render(
With emphasis this time.
);
- rerender(
+ await rerender(
With emphasis this time.
diff --git a/packages/components/src/snackbar/test/list.tsx b/packages/components/src/snackbar/test/list.tsx
index 1b3749d42c61e..c32e4bf47080a 100644
--- a/packages/components/src/snackbar/test/list.tsx
+++ b/packages/components/src/snackbar/test/list.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 { click } from '@ariakit/test';
/**
@@ -17,7 +18,7 @@ describe( 'SnackbarList', () => {
} );
it( 'should get focus after a snackbar is dismissed', async () => {
- render(
+ await render(
{
- test( 'should render correctly', () => {
- const { container } = render( Surface );
+ test( 'should render correctly', async () => {
+ const container = createContainer();
+ await render( Surface, { container } );
expect( container ).toMatchSnapshot();
} );
- test( 'should render variants', () => {
- const view = render( Surface );
- const { container } = render(
- Surface
- );
- expect( container ).toMatchDiffSnapshot( view.container );
+ test( 'should render variants', async () => {
+ const container = createContainer();
+ await render( Surface, { container } );
+ const container2 = createContainer();
+ render( Surface, {
+ container: container2,
+ } );
+ expect( container2 ).toMatchDiffSnapshot( container );
} );
- test( 'should render borderLeft', () => {
- const view = render( Surface );
- const { container } = render( Surface );
- expect( container ).toMatchDiffSnapshot( view.container );
+ test( 'should render borderLeft', async () => {
+ const container = createContainer();
+ await render( Surface, { container } );
+ const container2 = createContainer();
+ render( Surface, {
+ container: container2,
+ } );
+ expect( container2 ).toMatchDiffSnapshot( container );
} );
- test( 'should render borderRight', () => {
- const view = render( Surface );
- const { container } = render( Surface );
- expect( container ).toMatchDiffSnapshot( view.container );
+ test( 'should render borderRight', async () => {
+ const container = createContainer();
+ await render( Surface, { container } );
+ const container2 = createContainer();
+ render( Surface, {
+ container: container2,
+ } );
+ expect( container2 ).toMatchDiffSnapshot( container );
} );
- test( 'should render borderTop', () => {
- const view = render( Surface );
- const { container } = render( Surface );
- expect( container ).toMatchDiffSnapshot( view.container );
+ test( 'should render borderTop', async () => {
+ const container = createContainer();
+ await render( Surface, { container } );
+ const container2 = createContainer();
+ render( Surface, {
+ container: container2,
+ } );
+ expect( container2 ).toMatchDiffSnapshot( container );
} );
- test( 'should render borderBottom', () => {
- const view = render( Surface );
- const { container } = render( Surface );
- expect( container ).toMatchDiffSnapshot( view.container );
+ test( 'should render borderBottom', async () => {
+ const container = createContainer();
+ await render( Surface, { container } );
+ const container2 = createContainer();
+ render( Surface, {
+ container: container2,
+ } );
+ expect( container2 ).toMatchDiffSnapshot( container );
} );
} );
diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index 28dd1a81e9e84..f40a28ea86cd0 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/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 { press, hover, click } from '@ariakit/test';
/**
@@ -64,7 +65,7 @@ describe.each( [
it( 'should use the correct aria attributes', async () => {
const panelRenderFunction = jest.fn();
- render(
+ await render(
);
@@ -102,7 +103,7 @@ describe.each( [
{ ...TABS[ 2 ], icon: media },
];
- render(
+ await render(
{
const panelRenderFunction = jest.fn();
- render(
+ await render(
);
@@ -205,7 +206,7 @@ describe.each( [
it( 'should fall back to first enabled tab if the active tab is removed', async () => {
const mockOnSelect = jest.fn();
- const { rerender } = render(
+ const { rerender } = await render(
undefined }
@@ -213,7 +214,7 @@ describe.each( [
/>
);
- rerender(
+ await rerender(
undefined }
@@ -226,7 +227,7 @@ describe.each( [
describe( 'With `initialTabName`', () => {
it( 'should render the tab set by initialTabName prop', async () => {
- render(
+ await render(
{
- render(
+ it( 'should not select a tab when `initialTabName` does not match any known tab', async () => {
+ await render(
{
- const { rerender } = render(
+ const { rerender } = await render(
);
- rerender(
+ await rerender(
{
const mockOnSelect = jest.fn();
- const { rerender } = render(
+ const { rerender } = await render(
{
const mockOnSelect = jest.fn();
- const { rerender } = render(
+ const { rerender } = await render(
{
const mockOnSelect = jest.fn();
- const { rerender } = render(
+ const { rerender } = await render(
{
const mockOnSelect = jest.fn();
- render(
+ await render(
{
const mockOnSelect = jest.fn();
- const { rerender } = render(
+ const { rerender } = await render(
{
@@ -430,7 +431,7 @@ describe.each( [
expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
// Re-enable all tabs
- rerender(
+ await rerender(
undefined }
@@ -446,7 +447,7 @@ describe.each( [
it( 'should select first enabled tab when the tab associated to `initialTabName` is disabled', async () => {
const mockOnSelect = jest.fn();
- const { rerender } = render(
+ const { rerender } = await render(
{
if ( tab.name === 'gamma' ) {
@@ -465,7 +466,7 @@ describe.each( [
expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
// Re-enable all tabs
- rerender(
+ await rerender(
{
const mockOnSelect = jest.fn();
- const { rerender } = render(
+ const { rerender } = await render(
undefined }
@@ -493,7 +494,7 @@ describe.each( [
expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
- rerender(
+ await rerender(
{
if ( tab.name === 'alpha' ) {
@@ -510,7 +511,7 @@ describe.each( [
expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
- rerender(
+ await rerender(
undefined }
@@ -526,7 +527,7 @@ describe.each( [
it( 'should select the first enabled tab when the tab associated to `initialTabName` becomes disabled while being the active tab', async () => {
const mockOnSelect = jest.fn();
- const { rerender } = render(
+ const { rerender } = await render(
{
const mockOnSelect = jest.fn();
- render(
+ await render(
undefined }
@@ -649,7 +650,7 @@ describe.each( [
it( 'wraps around the last/first tab when using arrow keys', async () => {
const mockOnSelect = jest.fn();
- render(
+ await render(
undefined }
@@ -686,7 +687,7 @@ describe.each( [
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(
undefined }
@@ -719,7 +720,7 @@ describe.each( [
// Change orientation to `vertical`. When the orientation is vertical,
// left/right arrow keys are replaced by up/down arrow keys.
- rerender(
+ await rerender(
undefined }
@@ -773,7 +774,7 @@ describe.each( [
it( 'should move focus on a tab even if disabled with arrow key, but not with pointer clicks', async () => {
const mockOnSelect = jest.fn();
- render(
+ await render(
{
- render( undefined } /> );
+ await render(
+ undefined } />
+ );
// Tab should initially focus the first tab in the tablist, which
// is Alpha.
@@ -852,7 +855,7 @@ describe.each( [
it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
const mockOnSelect = jest.fn();
- render(
+ await render(
undefined }
@@ -901,7 +904,9 @@ describe.each( [
describe( 'Tab Attributes', () => {
it( "should apply the tab's `className` to the tab button", async () => {
- render( undefined } /> );
+ await render(
+ undefined } />
+ );
expect(
await screen.findByRole( 'tab', { name: 'Alpha' } )
@@ -917,7 +922,7 @@ describe.each( [
it( 'should apply the `activeClass` to the selected tab', async () => {
const activeClass = 'my-active-tab';
- render(
+ await render(
{};
describe( 'TextControl', () => {
describe( 'When no ID prop is provided', () => {
- it( 'should generate an ID', () => {
- render( );
+ it( 'should generate an ID', async () => {
+ await render( );
expect( screen.getByRole( 'textbox' ) ).toHaveAttribute(
'id',
@@ -21,9 +22,9 @@ describe( 'TextControl', () => {
);
} );
- it( 'should be labelled correctly', () => {
+ it( 'should be labelled correctly', async () => {
const labelValue = 'Test Label';
- render(
+ await render(
);
@@ -36,15 +37,17 @@ describe( 'TextControl', () => {
describe( 'When an ID prop is provided', () => {
const id = 'test-id';
- it( 'should use the passed ID prop if provided', () => {
- render( );
+ it( 'should use the passed ID prop if provided', async () => {
+ await render(
+
+ );
expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'id', id );
} );
- it( 'should be labelled correctly', () => {
+ it( 'should be labelled correctly', async () => {
const labelValue = 'Test Label';
- render(
+ await render(
// Use querySelectorAll because the `mark` role is not officially supported
// yet. This should be changed to `getByRole` when it is.
@@ -22,11 +29,13 @@ describe( 'TextHighlight', () => {
it.each( [ [ 'Gutenberg' ], [ 'media' ] ] )(
'should highlight the singular occurance of the text "%s" in the text if it exists',
( highlight ) => {
- const { container } = render(
+ const container = createContainer();
+ render(
+ />,
+ { container }
);
const highlightedEls = getMarks( container );
@@ -39,11 +48,13 @@ describe( 'TextHighlight', () => {
}
);
- it( 'should highlight multiple occurances of the string every time it exists in the text', () => {
+ it( 'should highlight multiple occurances of the string every time it exists in the text', async () => {
const highlight = 'edit';
- const { container } = render(
-
+ const container = createContainer();
+ await render(
+ ,
+ { container }
);
const highlightedEls = getMarks( container );
@@ -55,13 +66,15 @@ describe( 'TextHighlight', () => {
} );
} );
- it( 'should highlight occurances of a string regardless of capitalisation', () => {
+ it( 'should highlight occurances of a string regardless of capitalisation', async () => {
// Note that `The` occurs twice in the default text, once in
// lowercase and once capitalized.
const highlight = 'The';
- const { container } = render(
-
+ const container = createContainer();
+ await render(
+ ,
+ { container }
);
const highlightedEls = getMarks( container );
@@ -77,11 +90,13 @@ describe( 'TextHighlight', () => {
} );
} );
- it( 'should not highlight a string that is not in the text', () => {
+ it( 'should not highlight a string that is not in the text', async () => {
const highlight = 'Antidisestablishmentarianism';
- const { container } = render(
-
+ const container = createContainer();
+ await render(
+ ,
+ { container }
);
const highlightedEls = getMarks( container );
diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx
index 5fad5582f4d46..4264a27cf02c4 100644
--- a/packages/components/src/text/test/index.tsx
+++ b/packages/components/src/text/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
@@ -10,10 +11,17 @@ import { getFontSize } from '../../utils/font-size';
import { COLORS } from '../../utils';
import { Text } from '../';
+function createContainer() {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ return container;
+}
+
describe( 'Text', () => {
describe( 'snapshot tests', () => {
test( 'should render correctly', () => {
- const { container } = render( Lorem ipsum. );
+ const container = createContainer();
+ render( Lorem ipsum., { container } );
expect( container ).toMatchSnapshot();
} );
} );
@@ -142,14 +150,16 @@ describe( 'Text', () => {
} );
test( 'should render highlighted words with highlightCaseSensitive', () => {
- const { container } = render(
+ const container = createContainer();
+ render(
Lorem ipsum.
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
diff --git a/packages/components/src/theme/test/index.tsx b/packages/components/src/theme/test/index.tsx
index 1b32fa1dfa2d6..e8fa527f7d7fb 100644
--- a/packages/components/src/theme/test/index.tsx
+++ b/packages/components/src/theme/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 type { ReactNode } from 'react';
/**
@@ -26,8 +27,8 @@ const MyThemableComponent = ( props: MyThemableComponentProps ) => {
describe( 'Theme', () => {
describe( 'accent color', () => {
- it( 'does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
- render(
+ it( 'does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', async () => {
+ await render(
Inner
@@ -49,8 +50,8 @@ describe( 'Theme', () => {
} );
} );
- it( 'defines the accent color (and its variations) as a CSS variable', () => {
- render(
+ it( 'defines the accent color (and its variations) as a CSS variable', async () => {
+ await render(
Inner
@@ -66,8 +67,8 @@ describe( 'Theme', () => {
} );
describe( 'background color', () => {
- it( 'does not define the background color (and its dependent colors) as a CSS variable when the `background` prop is undefined', () => {
- render(
+ it( 'does not define the background color (and its dependent colors) as a CSS variable when the `background` prop is undefined', async () => {
+ await render(
Inner
@@ -91,8 +92,8 @@ describe( 'Theme', () => {
} );
} );
- it( 'defines the background color (and its dependent colors) as a CSS variable', () => {
- render(
+ it( 'defines the background color (and its dependent colors) as a CSS variable', async () => {
+ await render(
Inner
diff --git a/packages/components/src/toggle-control/test/index.tsx b/packages/components/src/toggle-control/test/index.tsx
index cc89031d9affa..cefd06283d8f0 100644
--- a/packages/components/src/toggle-control/test/index.tsx
+++ b/packages/components/src/toggle-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
@@ -9,18 +10,22 @@ import { render, screen } from '@testing-library/react';
import ToggleControl from '..';
describe( 'ToggleControl', () => {
- it( 'should label the toggle', () => {
- render( {} } /> );
+ it( 'should label the toggle', async () => {
+ await render(
+ {} } />
+ );
expect(
screen.getByRole( 'checkbox', { name: 'My toggle' } )
).toBeInTheDocument();
} );
- it( 'triggers change callback with boolean', () => {
+ it( 'triggers change callback with boolean', async () => {
const onChange = jest.fn();
- render( );
+ await render(
+
+ );
screen.getByRole( 'checkbox' ).click();
expect( onChange ).toHaveBeenLastCalledWith( true );
@@ -30,15 +35,17 @@ describe( 'ToggleControl', () => {
} );
describe( 'help', () => {
- it( 'should not give the input a description if no `help` prop', () => {
- render( {} } /> );
+ it( 'should not give the input a description if no `help` prop', async () => {
+ await render(
+ {} } />
+ );
expect(
screen.getByRole( 'checkbox' )
).not.toHaveAccessibleDescription();
} );
- it( "should associate `help` as the input's description", () => {
- render(
+ it( "should associate `help` as the input's description", async () => {
+ await render(
{
await hover( document.body );
await hover( document.body, { clientX: 10, clientY: 10 } );
@@ -95,18 +103,25 @@ describe.each( [
const [ mode, Component ] = modeAndComponent;
describe( 'should render correctly', () => {
- it( 'with text options', () => {
- const { container } = render(
+ it( 'with text options', async () => {
+ const container = createContainer();
+ // TODO: temporarily using the sync version of render until we figure what to do with these snapshots
+ // see: https://github.com/WordPress/gutenberg/pull/64180
+ renderSync(
{ options }
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
} );
- it( 'with icons', () => {
- const { container } = render(
+ it( 'with icons', async () => {
+ const container = createContainer();
+ // TODO: temporarily using the sync version of render until we figure what to do with these snapshots
+ // see: https://github.com/WordPress/gutenberg/pull/64180
+ renderSync(
-
+ ,
+ { container }
);
expect( container ).toMatchSnapshot();
} );
} );
- it( 'should render with the correct option initially selected when `value` is defined', () => {
- render(
+ it( 'should render with the correct option initially selected when `value` is defined', async () => {
+ await render(
{ options }
@@ -133,8 +149,8 @@ describe.each( [
expect( screen.getByRole( 'radio', { name: 'R' } ) ).not.toBeChecked();
expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
} );
- it( 'should render without a selected option when `value` is `undefined`', () => {
- render(
+ it( 'should render without a selected option when `value` is `undefined`', async () => {
+ await render(
{ options }
);
expect( screen.getByRole( 'radio', { name: 'R' } ) ).not.toBeChecked();
@@ -143,7 +159,7 @@ describe.each( [
it( 'should call onChange with proper value', async () => {
const mockOnChange = jest.fn();
- render(
+ await render(
{
- render(
+ await render(
{ optionsWithTooltip }
@@ -189,7 +205,7 @@ describe.each( [
} );
it( 'should not render tooltip', async () => {
- render(
+ await render(
{ optionsWithTooltip }
@@ -217,7 +233,7 @@ describe.each( [
if ( mode === 'controlled' ) {
it( 'should reset values correctly when default value is undefined', async () => {
- render(
+ await render(
{ options }
@@ -238,7 +254,7 @@ describe.each( [
} );
it( 'should reset values correctly when default value is defined', async () => {
- render(
+ await render(
{ options }
@@ -267,7 +283,7 @@ describe.each( [
'should update correctly when triggered by external updates',
( defaultValueType, defaultValue ) => {
it( `when default value is ${ defaultValueType }`, async () => {
- render(
+ await render(
{
const mockOnChange = jest.fn();
- render(
+ await render(
{
- render(
+ await render(
<>
{ options }
@@ -360,7 +376,7 @@ describe.each( [
it( 'should ignore disabled radio options', async () => {
const mockOnChange = jest.fn();
- render(
+ await render(
{
const mockOnChange = jest.fn();
- render(
+ await render(
{
- render(
+ await render(
{ options }
@@ -474,7 +490,7 @@ describe.each( [
it( 'should ignore disabled options', async () => {
const mockOnChange = jest.fn();
- render(
+ await render(
{
describe( 'basic rendering', () => {
- it( 'should render a toolbar with toolbar buttons', () => {
- render(
+ it( 'should render a toolbar with toolbar buttons', async () => {
+ await render(
@@ -26,8 +27,8 @@ describe( 'Toolbar', () => {
).toBeInTheDocument();
} );
- it( 'should apply the unstyled variant correctly via the `variant` prop', () => {
- render( );
+ it( 'should apply the unstyled variant correctly via the `variant` prop', async () => {
+ await render( );
expect( screen.getByRole( 'toolbar' ) ).toHaveClass(
'is-unstyled'
diff --git a/packages/components/src/toolbar/test/toolbar-group.tsx b/packages/components/src/toolbar/test/toolbar-group.tsx
index 50aa1399c50a6..ba6aa70365182 100644
--- a/packages/components/src/toolbar/test/toolbar-group.tsx
+++ b/packages/components/src/toolbar/test/toolbar-group.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
/**
* Internal dependencies
@@ -13,21 +14,29 @@ import { ToolbarGroup } from '..';
*/
import { wordpress } from '@wordpress/icons';
+function createContainer() {
+ const container = document.createElement( 'div' );
+ document.body.appendChild( container );
+ return container;
+}
+
describe( 'ToolbarGroup', () => {
describe( 'basic rendering', () => {
- it( 'should render an empty node, when controls are not passed', () => {
- const { container } = render( );
+ it( 'should render an empty node, when controls are not passed', async () => {
+ const container = createContainer();
+ await render( , { container } );
expect( container ).toBeEmptyDOMElement();
} );
- it( 'should render an empty node, when controls are empty', () => {
- const { container } = render( );
+ it( 'should render an empty node, when controls are empty', async () => {
+ const container = createContainer();
+ await render( , { container } );
expect( container ).toBeEmptyDOMElement();
} );
- it( 'should render a list of controls with buttons', () => {
+ it( 'should render a list of controls with buttons', async () => {
const clickHandler = ( event?: React.MouseEvent ) => event;
const controls = [
@@ -39,14 +48,14 @@ describe( 'ToolbarGroup', () => {
},
];
- render( );
+ await render( );
const toolbarButton = screen.getByLabelText( 'WordPress' );
expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'false' );
expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
} );
- it( 'should render a list of controls with buttons and active control', () => {
+ it( 'should render a list of controls with buttons and active control', async () => {
const clickHandler = ( event?: React.MouseEvent ) => event;
const controls = [
{
@@ -57,14 +66,14 @@ describe( 'ToolbarGroup', () => {
},
];
- render( );
+ await render( );
const toolbarButton = screen.getByLabelText( 'WordPress' );
expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'true' );
expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
} );
- it( 'should render a nested list of controls with separator between', () => {
+ it( 'should render a nested list of controls with separator between', async () => {
const controls = [
[
// First set.
@@ -82,7 +91,7 @@ describe( 'ToolbarGroup', () => {
],
];
- render( );
+ await render( );
const buttons = screen.getAllByRole( 'button' );
@@ -97,7 +106,7 @@ describe( 'ToolbarGroup', () => {
);
} );
- it( 'should call the clickHandler on click.', () => {
+ it( 'should call the clickHandler on click.', async () => {
const clickHandler = jest.fn();
const controls = [
{
@@ -107,7 +116,7 @@ describe( 'ToolbarGroup', () => {
isActive: true,
},
];
- render( );
+ await render( );
fireEvent.click( screen.getByLabelText( 'WordPress' ) );
expect( clickHandler ).toHaveBeenCalledTimes( 1 );
diff --git a/packages/components/src/tools-panel/test/index.tsx b/packages/components/src/tools-panel/test/index.tsx
index 8d2c4f17a8b17..ab7a5d9f5f38b 100644
--- a/packages/components/src/tools-panel/test/index.tsx
+++ b/packages/components/src/tools-panel/test/index.tsx
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { render, screen, within } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
import userEvent from '@testing-library/user-event';
/**
@@ -202,8 +203,8 @@ describe( 'ToolsPanel', () => {
} );
describe( 'basic rendering', () => {
- it( 'should render panel', () => {
- renderPanel();
+ it( 'should render panel', async () => {
+ await renderPanel();
const menuButton = getMenuButton();
const label = screen.getByText( defaultProps.label );
@@ -216,8 +217,8 @@ describe( 'ToolsPanel', () => {
expect( nonToolsPanelItem ).toBeInTheDocument();
} );
- it( 'should render panel item flagged as default control even without value', () => {
- render(
+ it( 'should render panel item flagged as default control even without value', async () => {
+ await render(
Example control
@@ -233,8 +234,8 @@ describe( 'ToolsPanel', () => {
expect( altControl ).toBeInTheDocument();
} );
- it( 'should not render panel menu when there are no panel items', () => {
- render(
+ it( 'should not render panel menu when there are no panel items', async () => {
+ await render(
{ false && (
{
} );
it( 'should render panel menu when at least one panel item', async () => {
- renderPanel();
+ await renderPanel();
const menuButton = await openDropdownMenu();
expect( menuButton ).toBeInTheDocument();
} );
it( 'should render reset all item in menu', async () => {
- renderPanel();
+ await renderPanel();
await openDropdownMenu();
const resetAllItem = await screen.findByRole( 'menuitem' );
@@ -277,7 +278,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should render panel menu items correctly', async () => {
- renderPanel();
+ await renderPanel();
await openDropdownMenu();
const menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
@@ -287,8 +288,8 @@ describe( 'ToolsPanel', () => {
expect( menuItems[ 1 ] ).not.toBeChecked();
} );
- it( 'should render panel label as header text', () => {
- renderPanel();
+ it( 'should render panel label as header text', async () => {
+ await renderPanel();
const header = screen.getByText( defaultProps.label );
expect( header ).toBeInTheDocument();
@@ -296,8 +297,8 @@ describe( 'ToolsPanel', () => {
} );
describe( 'conditional rendering of panel items', () => {
- it( 'should render panel item when it has a value', () => {
- renderPanel();
+ it( 'should render panel item when it has a value', async () => {
+ await renderPanel();
const exampleControl = screen.getByText( 'Example control' );
const altControl = screen.queryByText( 'Alt control' );
@@ -307,7 +308,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should render panel item when corresponding menu item is selected', async () => {
- renderPanel();
+ await renderPanel();
await openDropdownMenu();
await selectMenuItem( altControlProps.label );
const control = await screen.findByText( 'Alt control' );
@@ -320,7 +321,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should prevent optional panel item rendering when toggled off via menu item', async () => {
- renderPanel();
+ await renderPanel();
await openDropdownMenu();
await selectMenuItem( controlProps.label );
const control = screen.queryByText( 'Example control' );
@@ -356,13 +357,15 @@ describe( 'ToolsPanel', () => {
);
};
- const { rerender } = render( );
+ const { rerender } = await render( );
const control = screen.queryByText( 'Optional control' );
expect( control ).not.toBeInTheDocument();
- rerender( );
+ await rerender(
+
+ );
const controlRerendered = screen.getByText( 'Optional control' );
@@ -395,12 +398,12 @@ describe( 'ToolsPanel', () => {
);
};
- const { rerender } = render( );
+ const { rerender } = await render( );
const control = screen.queryByText( 'Optional control' );
expect( control ).not.toBeInTheDocument();
- rerender( );
+ await rerender( );
const controlRerendered = screen.getByText( 'Optional control' );
@@ -408,7 +411,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should continue to render shown by default item after it is toggled off via menu item', async () => {
- render(
+ await render(
Default control
@@ -432,7 +435,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should render appropriate menu groups', async () => {
- render(
+ await render(
Default control
@@ -450,8 +453,8 @@ describe( 'ToolsPanel', () => {
expect( menuGroups.length ).toEqual( 2 );
} );
- it( 'should not render contents of items when in placeholder state', () => {
- render(
+ it( 'should not render contents of items when in placeholder state', async () => {
+ await render(
Optional control
@@ -493,7 +496,7 @@ describe( 'ToolsPanel', () => {
);
- const { rerender } = render( );
+ const { rerender } = await render( );
// The linked control should start out as an optional control and is
// not rendered because it does not have a value.
@@ -514,7 +517,7 @@ describe( 'ToolsPanel', () => {
// conditional `isShownByDefault` prop.
altControlValue = true;
- rerender( );
+ await rerender( );
// The linked control should now be a default control and rendered
// despite not having a value.
@@ -567,7 +570,7 @@ describe( 'ToolsPanel', () => {
);
- const { rerender } = render( );
+ const { rerender } = await render( );
// The conditional control should not yet be rendered.
let conditionalItem = screen.queryByText( 'Conditional control' );
@@ -586,7 +589,7 @@ describe( 'ToolsPanel', () => {
// render the new default control into the ToolsPanel.
altControlValue = true;
- rerender( );
+ await rerender( );
// The conditional control should now be rendered and included in
// the panel's menu.
@@ -609,7 +612,7 @@ describe( 'ToolsPanel', () => {
jest.clearAllMocks();
} );
- it( 'should register and deregister items when panelId changes', () => {
+ it( 'should register and deregister items when panelId changes', async () => {
// This test simulates switching block selection, which causes the
// `ToolsPanel` to rerender with a new panelId, necessitating the
// registration and deregistration of appropriate `ToolsPanelItem`
@@ -630,7 +633,7 @@ describe( 'ToolsPanel', () => {
// On the initial render of the panel, the ToolsPanelItem should
// be registered.
- const { rerender } = render( );
+ const { rerender } = await render( );
expect( context.registerPanelItem ).toHaveBeenCalledWith(
expect.objectContaining( {
@@ -647,7 +650,7 @@ describe( 'ToolsPanel', () => {
// Rerender the panel item. Because we have a new panelId, this
// panelItem should NOT be registered, but it SHOULD be
// deregistered.
- rerender( );
+ await rerender( );
// registerPanelItem has still only been called once.
expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
@@ -663,7 +666,7 @@ describe( 'ToolsPanel', () => {
// Rerender the panel and ensure that the panelItem is registered
// again, and it is not de-registered.
- rerender( );
+ await rerender( );
expect( context.registerPanelItem ).toHaveBeenCalledWith(
expect.objectContaining( {
@@ -676,7 +679,7 @@ describe( 'ToolsPanel', () => {
expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
} );
- it( 'should register items when ToolsPanel panelId is null', () => {
+ it( 'should register items when ToolsPanel panelId is null', async () => {
// This test simulates when a panel spans multiple block selections.
// Multi-selection means a panel can't have a single id to match
// against the item's. Instead the panel gets an id of `null` and
@@ -697,7 +700,7 @@ describe( 'ToolsPanel', () => {
// On the initial render of the panel, the ToolsPanelItem should
// be registered.
- const { rerender, unmount } = render( );
+ const { rerender, unmount } = await render( );
expect( context.registerPanelItem ).toHaveBeenCalledWith(
expect.objectContaining( {
@@ -709,14 +712,14 @@ describe( 'ToolsPanel', () => {
// Simulate a further block selection being added to the
// multi-selection. The panelId will remain `null` in this case.
- rerender( );
+ await rerender( );
expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
// Simulate a change in panel back to single block selection for
// which the item matches panelId.
context.panelId = '1234';
- rerender( );
+ await rerender( );
expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
@@ -724,14 +727,14 @@ describe( 'ToolsPanel', () => {
// Item should re-register itself after it deregistered as the
// multi-selection occurred.
context.panelId = null;
- rerender( );
+ await rerender( );
expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
// Simulate a change in panel e.g. back to a single block selection
// Where the item's panelId is not a match.
context.panelId = '4321';
- rerender( );
+ await rerender( );
// As the item no longer matches the panelId it should not have
// registered again but instead deregistered.
@@ -747,7 +750,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should call onDeselect callback when menu item is toggled off', async () => {
- renderPanel();
+ await renderPanel();
await openDropdownMenu();
await selectMenuItem( controlProps.label );
@@ -757,7 +760,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should call onSelect callback when menu item is toggled on', async () => {
- renderPanel();
+ await renderPanel();
await openDropdownMenu();
await selectMenuItem( altControlProps.label );
@@ -767,7 +770,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should call resetAll callback when its menu item is selected', async () => {
- renderPanel();
+ await renderPanel();
await openDropdownMenu();
await selectMenuItem( 'Reset all' );
@@ -783,7 +786,7 @@ describe( 'ToolsPanel', () => {
// controls does not prevent subsequent individual reset requests.
// i.e. onDeselect callbacks are called correctly after a resetAll.
it( 'should call onDeselect after previous reset all', async () => {
- renderPanel();
+ await renderPanel();
await openDropdownMenu();
await selectMenuItem( 'Reset all' ); // Initial control is displayed by default.
@@ -798,8 +801,8 @@ describe( 'ToolsPanel', () => {
} );
describe( 'grouped panel items within custom components', () => {
- it( 'should render grouped items correctly', () => {
- renderGroupedItemsInPanel();
+ it( 'should render grouped items correctly', async () => {
+ await renderGroupedItemsInPanel();
const defaultItem = screen.getByText( 'Grouped control' );
const altItem = screen.queryByText( 'Alt grouped control' );
@@ -809,7 +812,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should render grouped items within the menu', async () => {
- renderGroupedItemsInPanel();
+ await renderGroupedItemsInPanel();
await openDropdownMenu();
const defaultItem = screen.getByText( 'Nested Control 1' );
@@ -832,8 +835,8 @@ describe( 'ToolsPanel', () => {
} );
describe( 'wrapped panel items within custom components', () => {
- it( 'should render wrapped items correctly', () => {
- renderWrappedItemInPanel();
+ it( 'should render wrapped items correctly', async () => {
+ await renderWrappedItemInPanel();
const wrappers = screen.getAllByText( 'Wrapper' );
const defaultItem = screen.getByText( 'Wrapped 1' );
@@ -847,7 +850,7 @@ describe( 'ToolsPanel', () => {
} );
it( 'should render wrapped items within the menu', async () => {
- renderWrappedItemInPanel();
+ await renderWrappedItemInPanel();
await openDropdownMenu();
const defaultItem = screen.getByText( 'Nested Control 1' );
@@ -877,7 +880,7 @@ describe( 'ToolsPanel', () => {
it( 'should maintain visual order of controls when toggled on and off', async () => {
// Multiple fills are added to better simulate panel items being
// injected from different locations.
- render(
+ await render(
@@ -948,7 +951,7 @@ describe( 'ToolsPanel', () => {
);
- const { rerender } = render(
+ const { rerender } = await render(
@@ -983,7 +986,7 @@ describe( 'ToolsPanel', () => {
// Close the dropdown menu.
await user.click( menuButton );
- rerender(
+ await rerender(
@@ -1014,7 +1017,7 @@ describe( 'ToolsPanel', () => {
expect( menuItems[ 2 ] ).toHaveTextContent( 'Item 3' );
} );
- it( 'should not trigger callback when fill has not updated yet when panel has', () => {
+ it( 'should not trigger callback when fill has not updated yet when panel has', async () => {
// Fill provided controls can update independently to the panel.
// A `panelId` prop was added to both panels and items
// so it could prevent erroneous registrations and calls to
@@ -1046,7 +1049,7 @@ describe( 'ToolsPanel', () => {
// set its internal state to reflect it was previously selected.
// This later forms part of the condition used to determine if an
// item is being deselected and thus call the onDeselect callback.
- const { rerender } = render(
+ const { rerender } = await render(
Item
@@ -1061,7 +1064,7 @@ describe( 'ToolsPanel', () => {
// Rerender the panel item and ensure that it skips any check
// for deselection given it still belongs to a different panelId.
- rerender(
+ await rerender(
Item
@@ -1100,7 +1103,9 @@ describe( 'ToolsPanel', () => {
);
- const { rerender } = render( );
+ const { rerender } = await render(
+
+ );
await openDropdownMenu();
// Only the item matching the panelId should have been registered
@@ -1118,7 +1123,7 @@ describe( 'ToolsPanel', () => {
// Re-render the panel with different panelID simulating a block
// selection change.
- rerender( );
+ await rerender( );
expect(
screen.queryByRole( 'menuitemcheckbox', {
name: 'Show Alt',
@@ -1156,7 +1161,7 @@ describe( 'ToolsPanel', () => {
};
it( 'should render appropriate labels and descriptions for the dropdown menu where there are default controls', async () => {
- render(
+ await render(
Default control
@@ -1180,7 +1185,7 @@ describe( 'ToolsPanel', () => {
it( 'should render appropriate labels and descriptions for the dropdown menu where there are no default controls', async () => {
// All options are inactive.
- render(
+ await render(
Optional control
@@ -1241,7 +1246,7 @@ describe( 'ToolsPanel', () => {
filters: ResetAllFilter[] | undefined
) => filters?.forEach( ( f ) => f() );
- const { rerender } = render(
+ const { rerender } = await render(
{
resetItem.mockClear();
- rerender(
+ await rerender(
{
} );
describe( 'first and last panel items', () => {
- it( 'should apply first/last classes to appropriate items', () => {
- render(
+ it( 'should apply first/last classes to appropriate items', async () => {
+ await render(
diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 67922ab1d5ac4..1ca398e34a4f6 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/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 { press, hover, click, sleep } from '@ariakit/test';
/**
@@ -44,7 +45,7 @@ const hoverOutside = async () => {
describe( 'Tooltip', () => {
describe( 'basic behavior', () => {
it( 'should not render the tooltip if multiple children are passed', async () => {
- render(
+ await render(
// @ts-expect-error Tooltip cannot have more than one child element