@wordpress/components 21.2.0 → 22.0.0

package/src/tree-grid/test/roving-tab-index-item.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -21,23 +21,23 @@ const TestButton = forwardRef( ( { ...props }, ref ) => (
 describe( 'RovingTabIndexItem', () => {
 	it( 'requires RovingTabIndex to be declared as a parent component somewhere in the component hierarchy', () => {
 		expect( () =>
-			TestRenderer.create( <RovingTabIndexItem as={ TestButton } /> )
+			render( <RovingTabIndexItem as={ TestButton } /> )
 		).toThrow();
 		expect( console ).toHaveErrored();
 	} );
 
 	it( 'allows another component to be specified as the rendered component using the `as` prop', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<RovingTabIndex>
 				<RovingTabIndexItem as={ TestButton } />
 			</RovingTabIndex>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'forwards props to the `as` component', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<RovingTabIndex>
 				<RovingTabIndexItem as={ TestButton } className="my-button">
 					Click Me!
@@ -45,11 +45,11 @@ describe( 'RovingTabIndexItem', () => {
 			</RovingTabIndex>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'allows children to be declared using a child render function as an alternative to `as`', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<RovingTabIndex>
 				<RovingTabIndexItem>
 					{ ( props ) => (
@@ -61,6 +61,6 @@ describe( 'RovingTabIndexItem', () => {
 			</RovingTabIndex>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/tree-grid/test/roving-tab-index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,12 +10,12 @@ import RovingTabIndex from '../roving-tab-index';
 
 describe( 'RovingTabIndex', () => {
 	it( 'does not render any elements other than its children', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<RovingTabIndex>
 				<div>child element</div>
 			</RovingTabIndex>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/tree-grid/test/row.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,31 +10,35 @@ import TreeGridRow from '../row';
 
 describe( 'TreeGridRow', () => {
 	it( 'renders a tr with support for level, positionInSet and setSize props', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<table>
-				<TreeGridRow level="1" positionInSet="1" setSize="1">
-					<td>Test</td>
-				</TreeGridRow>
+				<tbody>
+					<TreeGridRow level="1" positionInSet="1" setSize="1">
+						<td>Test</td>
+					</TreeGridRow>
+				</tbody>
 			</table>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'forwards other props to the rendered tr element', () => {
-		const renderer = TestRenderer.create(
+		const { container } = render(
 			<table>
-				<TreeGridRow
-					className="my-row"
-					level="1"
-					positionInSet="1"
-					setSize="1"
-				>
-					<td>Test</td>
-				</TreeGridRow>
+				<tbody>
+					<TreeGridRow
+						className="my-row"
+						level="1"
+						positionInSet="1"
+						setSize="1"
+					>
+						<td>Test</td>
+					</TreeGridRow>
+				</tbody>
 			</table>
 		);
 
-		expect( renderer.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/truncate/test/index.tsx

@@ -11,7 +11,7 @@ import { Truncate } from '..';
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render( <Truncate>Lorem ipsum.</Truncate> );
-		expect( container.firstChild?.textContent ).toEqual( 'Lorem ipsum.' );
+		expect( container.firstChild ).toHaveTextContent( 'Lorem ipsum.' );
 	} );
 
 	test( 'should render limit', () => {
@@ -20,7 +20,7 @@ describe( 'props', () => {
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild?.textContent ).toEqual( 'L…' );
+		expect( container.firstChild ).toHaveTextContent( 'L…' );
 	} );
 
 	test( 'should render custom ellipsis', () => {
@@ -29,7 +29,7 @@ describe( 'props', () => {
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild?.textContent ).toEqual( 'Lorem!!!' );
+		expect( container.firstChild ).toHaveTextContent( 'Lorem!!!' );
 	} );
 
 	test( 'should render custom ellipsizeMode', () => {
@@ -38,6 +38,6 @@ describe( 'props', () => {
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild?.textContent ).toEqual( 'Lo!!!m.' );
+		expect( container.firstChild ).toHaveTextContent( 'Lo!!!m.' );
 	} );
 } );

package/src/ui/context/context-system-provider.js

@@ -10,34 +10,21 @@ import {
 	createContext,
 	useContext,
 	useRef,
-	useEffect,
 	useMemo,
 	memo,
 } from '@wordpress/element';
 import warn from '@wordpress/warning';
 
+/**
+ * Internal dependencies
+ */
+import { useUpdateEffect } from '../../utils';
+
 export const ComponentsContext = createContext(
 	/** @type {Record<string, any>} */ ( {} )
 );
 export const useComponentsContext = () => useContext( ComponentsContext );
 
-/**
- * Runs an effect only on update (i.e., ignores the first render)
- *
- * @param {import('react').EffectCallback} effect
- * @param {import('react').DependencyList} deps
- */
-function useUpdateEffect( effect, deps ) {
-	const mounted = useRef( false );
-	useEffect( () => {
-		if ( mounted.current ) {
-			return effect();
-		}
-		mounted.current = true;
-		return undefined;
-	}, deps );
-}
-
 /**
  * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
  *

package/src/ui/context/test/__snapshots__/context-system-provider.js.snap

@@ -1,29 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render _override props 1`] = `
-<div
-  class="components-component test-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
->
-  Code is Poetry
+<div>
+  <div
+    class="components-component test-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  >
+    Code is Poetry
+  </div>
 </div>
 `;
 
 exports[`props should render context props 1`] = `
-<div
-  class="components-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
->
-  Code is Poetry
+<div>
+  <div
+    class="components-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  >
+    Code is Poetry
+  </div>
 </div>
 `;
 
 exports[`props should render correctly 1`] = `
-<div
-  class="components-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
-/>
+<div>
+  <div
+    class="components-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  />
+</div>
 `;

package/src/ui/context/test/context-system-provider.js

@@ -30,7 +30,7 @@ describe( 'props', () => {
 			</ContextSystemProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render context props', () => {
@@ -60,7 +60,7 @@ describe( 'props', () => {
 			</ContextSystemProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 		expect( container.firstChild.innerHTML ).toContain( 'Code is Poetry' );
 	} );
 
@@ -98,7 +98,7 @@ describe( 'props', () => {
 			</>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 
 		const el = container.querySelector( '.test-component' );
 

package/src/ui/control-group/test/__snapshots__/index.js.snap

@@ -28,22 +28,24 @@ exports[`props should render correctly 1`] = `
   z-index: 1;
 }
 
-<div
-  class="components-flex components-control-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlGroup"
->
-  <button
-    class="components-button"
-    type="button"
+<div>
+  <div
+    class="components-flex components-control-group emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlGroup"
   >
-    Code is Poetry
-  </button>
-  <button
-    class="components-button"
-    type="button"
-  >
-    WordPress.org
-  </button>
+    <button
+      class="components-button"
+      type="button"
+    >
+      Code is Poetry
+    </button>
+    <button
+      class="components-button"
+      type="button"
+    >
+      WordPress.org
+    </button>
+  </div>
 </div>
 `;

package/src/ui/control-group/test/index.js

@@ -17,6 +17,6 @@ describe( 'props', () => {
 				<Button>WordPress.org</Button>
 			</ControlGroup>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/ui/control-label/test/__snapshots__/index.js.snap

@@ -37,13 +37,15 @@ exports[`props should render correctly 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;
 
 exports[`props should render no truncate 1`] = `
@@ -79,13 +81,15 @@ exports[`props should render no truncate 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;
 
 exports[`props should render size 1`] = `
@@ -125,11 +129,13 @@ exports[`props should render size 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;

package/src/ui/control-label/test/index.js

@@ -12,7 +12,7 @@ describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render( <ControlLabel>Label</ControlLabel> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render htmlFor', () => {
@@ -28,7 +28,7 @@ describe( 'props', () => {
 			<ControlLabel size="small">Label</ControlLabel>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render no truncate', () => {
@@ -36,6 +36,6 @@ describe( 'props', () => {
 			<ControlLabel truncate={ false }>Label</ControlLabel>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/ui/form-group/test/__snapshots__/index.js.snap

@@ -38,23 +38,25 @@ exports[`props should render alignLabel 1`] = `
   }
 }
 
-<div
-  class="components-form-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="FormGroup"
->
-  <label
-    class="components-truncate components-text components-control-label emotion-2 emotion-1"
+<div>
+  <div
+    class="components-form-group emotion-0 emotion-1"
     data-wp-c16t="true"
-    data-wp-component="ControlLabel"
-    for="fname"
+    data-wp-component="FormGroup"
   >
-    First name
-  </label>
-  <input
-    id="fname"
-    type="text"
-  />
+    <label
+      class="components-truncate components-text components-control-label emotion-2 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ControlLabel"
+      for="fname"
+    >
+      First name
+    </label>
+    <input
+      id="fname"
+      type="text"
+    />
+  </div>
 </div>
 `;
 
@@ -96,22 +98,24 @@ exports[`props should render vertically 1`] = `
   }
 }
 
-<div
-  class="components-form-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="FormGroup"
->
-  <label
-    class="components-truncate components-text components-control-label emotion-2 emotion-1"
+<div>
+  <div
+    class="components-form-group emotion-0 emotion-1"
     data-wp-c16t="true"
-    data-wp-component="ControlLabel"
-    for="fname"
+    data-wp-component="FormGroup"
   >
-    First name
-  </label>
-  <input
-    id="fname"
-    type="text"
-  />
+    <label
+      class="components-truncate components-text components-control-label emotion-2 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ControlLabel"
+      for="fname"
+    >
+      First name
+    </label>
+    <input
+      id="fname"
+      type="text"
+    />
+  </div>
 </div>
 `;

package/src/ui/form-group/test/index.js

@@ -67,7 +67,7 @@ describe( 'props', () => {
 			</FormGroup>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render vertically', () => {
@@ -77,7 +77,7 @@ describe( 'props', () => {
 			</FormGroup>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
 /* eslint-enable no-restricted-syntax */

package/src/ui/shortcut/test/__snapshots__/index.js.snap

@@ -10,4 +10,4 @@ exports[`Shortcut should render a span with the shortcut text 1`] = `
 </span>
 `;
 
-exports[`Shortcut should render null when no shortcut is provided 1`] = `null`;
+exports[`Shortcut should render null when no shortcut is provided 1`] = `<div />`;

package/src/ui/shortcut/test/index.js

@@ -11,7 +11,7 @@ import { Shortcut } from '..';
 describe( 'Shortcut', () => {
 	it( 'should render null when no shortcut is provided', () => {
 		const { container } = render( <Shortcut /> );
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render a span with the shortcut text', () => {
@@ -28,7 +28,8 @@ describe( 'Shortcut', () => {
 		};
 		render( <Shortcut shortcut={ shortcutObject } /> );
 		const shortcut = screen.getByText( shortcutObject.display );
-		expect( shortcut.getAttribute( 'aria-label' ) ).toBe(
+		expect( shortcut ).toHaveAttribute(
+			'aria-label',
 			shortcutObject.ariaLabel
 		);
 	} );