[EuiButtonIcon] Convert Enzyme tests to RTL

Author: cee-chen

src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap

@@ -49,7 +49,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
 exports[`EuiButtonIcon props color ghost is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark-colorClassName"
   type="button"
 >
   <span
@@ -257,7 +257,7 @@ exports[`EuiButtonIcon props isLoading is rendered 1`] = `
     aria-label="Loading"
     class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
     role="progressbar"
-    style="border-color:#07C currentcolor currentcolor currentcolor"
+    style="border-color: #07c currentcolor currentcolor currentcolor;"
   />
 </button>
 `;

src/components/button/button_icon/button_icon.test.tsx

@@ -7,46 +7,47 @@
  */
 
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { fireEvent } from '@testing-library/dom';
+import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiButtonIcon, DISPLAYS, SIZES } from './button_icon';
 import { BUTTON_COLORS } from '../../../themes/amsterdam/global_styling/mixins';
 
 describe('EuiButtonIcon', () => {
+  shouldRenderCustomStyles(
+    <EuiButtonIcon iconType="user" {...requiredProps} />
+  );
+
   test('is rendered', () => {
-    const component = render(
+    const { container } = render(
       <EuiButtonIcon iconType="user" {...requiredProps} />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  shouldRenderCustomStyles(
-    <EuiButtonIcon iconType="user" {...requiredProps} />
-  );
-
   describe('props', () => {
     describe('isDisabled', () => {
       it('is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon iconType="user" aria-label="button" isDisabled />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
 
       it('or disabled is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon iconType="user" aria-label="button" disabled />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
 
       it('renders a button even when href is defined', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon
             iconType="user"
             aria-label="button"
@@ -55,93 +56,93 @@ describe('EuiButtonIcon', () => {
           />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('iconType', () => {
       it('is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon aria-label="button" iconType="user" />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('color', () => {
       BUTTON_COLORS.forEach((color) => {
         test(`${color} is rendered`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonIcon iconType="user" aria-label="button" color={color} />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
 
       test('ghost is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon iconType="user" aria-label="button" color={'ghost'} />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('display', () => {
       DISPLAYS.forEach((display) => {
         test(`${display} is rendered`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonIcon
               iconType="user"
               aria-label="button"
               display={display}
             />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
     });
 
     describe('size', () => {
       SIZES.forEach((size) => {
         test(`${size} is rendered`, () => {
-          const component = render(
+          const { container } = render(
             <EuiButtonIcon iconType="user" aria-label="button" size={size} />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
     });
 
     describe('isSelected', () => {
       it('is rendered as true', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon iconType="user" aria-label="button" isSelected />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
 
       it('is rendered as false', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon
             iconType="user"
             aria-label="button"
             isSelected={false}
           />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('href', () => {
       it('secures the rel attribute when the target is _blank', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon
             iconType="user"
             aria-label="button"
@@ -150,42 +151,42 @@ describe('EuiButtonIcon', () => {
           />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
 
     describe('onClick', () => {
       it('supports onClick and href', () => {
-        const handler = jest.fn();
-        const component = mount(
+        const onClick = jest.fn();
+        const { container } = render(
           <EuiButtonIcon
             iconType="user"
             aria-label="hoi"
             href="#"
-            onClick={handler}
+            onClick={onClick}
           />
         );
-        component.find('a').simulate('click');
-        expect(handler.mock.calls.length).toEqual(1);
+        fireEvent.click(container.querySelector('a')!);
+        expect(onClick).toHaveBeenCalledTimes(1);
       });
 
       it('supports onClick as a button', () => {
-        const handler = jest.fn();
-        const component = mount(
-          <EuiButtonIcon iconType="user" aria-label="hoi" onClick={handler} />
+        const onClick = jest.fn();
+        const { container } = render(
+          <EuiButtonIcon iconType="user" aria-label="hoi" onClick={onClick} />
         );
-        component.find('button').simulate('click');
-        expect(handler.mock.calls.length).toEqual(1);
+        fireEvent.click(container.querySelector('button')!);
+        expect(onClick).toHaveBeenCalledTimes(1);
       });
     });
 
     describe('isLoading', () => {
       it('is rendered', () => {
-        const component = render(
+        const { container } = render(
           <EuiButtonIcon aria-label="button" iconType="user" isLoading />
         );
 
-        expect(component).toMatchSnapshot();
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
   });