Updated tests to use react testing library

packages/components/src/dropdown/stories/index.js

@@ -14,7 +14,7 @@ import {
  */
 import Dropdown from '../';
 import Button from '../../button';
-import { MenuGroup } from '../../menu-group';
+import MenuGroup from '../../menu-group';
 import MenuItem from '../../menu-item';
 import DropdownMenu from '../../dropdown-menu';
 

packages/components/src/index.js

@@ -86,7 +86,7 @@ export {
 } from './item-group';
 export { default as __experimentalInputControl } from './input-control';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
-export { MenuGroup } from './menu-group';
+export { default as MenuGroup } from './menu-group';
 export { default as MenuItem } from './menu-item';
 export { default as MenuItemsChoice } from './menu-items-choice';
 export { default as Modal } from './modal';

packages/components/src/menu-group/stories/index.js

@@ -6,7 +6,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { MenuGroup } from '../';
+import MenuGroup from '../';
 
 export default {
 	title: 'Components/MenuGroup',

packages/components/src/menu-group/test/__snapshots__/index.js.snap

@@ -1,18 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MenuGroup should match snapshot 1`] = `
+exports[`MenuGroup should render correctly 1`] = `
+.emotion-0+.components-menu-group {
+  margin-top: calc(4px * 2);
+  padding-top: calc(4px * 2);
+  border-top: 1px solid #1e1e1e;
+}
+
+.emotion-2 {
+  padding: 0 calc(4px * 2);
+  margin-top: calc(4px * 1);
+  margin-bottom: calc(4px * 3);
+  color: #757575;
+  text-transform: uppercase;
+  font-size: calc(0.92 * 13px);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
 <div
-  className="components-menu-group"
+  class="components-menu-group emotion-0 emotion-1"
 >
   <div
     aria-hidden="true"
-    className="components-menu-group__label"
+    class="components-menu-group__label emotion-2 emotion-1"
     id="components-menu-group-label-1"
   >
     My group
   </div>
   <div
     aria-labelledby="components-menu-group-label-1"
+    class="emotion-4 emotion-1"
     role="group"
   >
     <p>

packages/components/src/menu-group/test/index.js

@@ -1,27 +1,26 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
-import { MenuGroup } from '../';
+import MenuGroup from '../';
 
 describe( 'MenuGroup', () => {
 	test( 'should render null when no children provided', () => {
-		const wrapper = shallow( <MenuGroup /> );
+		const wrapper = render( <MenuGroup /> );
 
-		expect( wrapper.html() ).toBe( null );
+		expect( wrapper.container.firstChild ).toBe( null );
 	} );
 
-	test( 'should match snapshot', () => {
-		const wrapper = shallow(
+	test( 'should render correctly', () => {
+		const wrapper = render(
 			<MenuGroup label="My group" instanceId="1">
 				<p>My item</p>
 			</MenuGroup>
 		);
-
-		expect( wrapper ).toMatchSnapshot();
+		expect( wrapper.container.firstChild ).toMatchSnapshot();
 	} );
 } );

packages/components/src/tools-panel/tools-panel-header/component.tsx

@@ -14,7 +14,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import DropdownMenu from '../../dropdown-menu';
-import { MenuGroup } from '../../menu-group';
+import MenuGroup from '../../menu-group';
 import MenuItem from '../../menu-item';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';