chore(shared components): Migrate enzyme to RTL (#26258)

Author: justinpark

superset-frontend/src/components/Button/Button.test.tsx

@@ -16,47 +16,35 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import { isValidElement } from 'react';
-import { ReactWrapper } from 'enzyme';
-import { styledMount as mount } from 'spec/helpers/theming';
+import { fireEvent, render } from 'spec/helpers/testing-library';
 import Button from '.';
 import {
   ButtonGallery,
   SIZES as buttonSizes,
   STYLES as buttonStyles,
 } from './Button.stories';
 
-describe('Button', () => {
-  let wrapper: ReactWrapper;
-
-  // test the basic component
-  it('renders the base component', () => {
-    expect(isValidElement(<Button />)).toBe(true);
-  });
-
-  it('works with an onClick handler', () => {
-    const mockAction = jest.fn();
-    wrapper = mount(<Button onClick={mockAction} />);
-    wrapper.find('Button').first().simulate('click');
-    expect(mockAction).toHaveBeenCalled();
-  });
+test('works with an onClick handler', () => {
+  const mockAction = jest.fn();
+  const { getByRole } = render(<Button onClick={mockAction} />);
+  fireEvent.click(getByRole('button'));
+  expect(mockAction).toHaveBeenCalled();
+});
 
-  it('does not handle onClicks when disabled', () => {
-    const mockAction = jest.fn();
-    wrapper = mount(<Button onClick={mockAction} disabled />);
-    wrapper.find('Button').first().simulate('click');
-    expect(mockAction).toHaveBeenCalledTimes(0);
-  });
+test('does not handle onClicks when disabled', () => {
+  const mockAction = jest.fn();
+  const { getByRole } = render(<Button onClick={mockAction} disabled />);
+  fireEvent.click(getByRole('button'));
+  expect(mockAction).toHaveBeenCalledTimes(0);
+});
 
-  // test stories from the storybook!
-  it('All the sorybook gallery variants mount', () => {
-    wrapper = mount(<ButtonGallery />);
+// test stories from the storybook!
+test('All the sorybook gallery variants mount', () => {
+  const { getAllByRole } = render(<ButtonGallery />);
 
-    const permutationCount =
-      Object.values(buttonStyles.options).filter(o => o).length *
-      Object.values(buttonSizes.options).length;
+  const permutationCount =
+    Object.values(buttonStyles.options).filter(o => o).length *
+    Object.values(buttonSizes.options).length;
 
-    expect(wrapper.find(Button).length).toEqual(permutationCount);
-  });
+  expect(getAllByRole('button')).toHaveLength(permutationCount);
 });

superset-frontend/src/components/Chart/ChartRenderer.test.jsx

@@ -16,11 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { shallow } from 'enzyme';
-import { SuperChart } from '@superset-ui/core';
+import { render } from 'spec/helpers/testing-library';
 
 import ChartRenderer from 'src/components/Chart/ChartRenderer';
 
+jest.mock('@superset-ui/core', () => ({
+  ...jest.requireActual('@superset-ui/core'),
+  SuperChart: ({ formData }) => (
+    <div data-test="mock-super-chart">{JSON.stringify(formData)}</div>
+  ),
+}));
+
+jest.mock(
+  'src/components/Chart/ChartContextMenu/ChartContextMenu',
+  () => () => <div data-test="mock-chart-context-menu" />,
+);
+
 const requiredProps = {
   chartId: 1,
   datasource: {},
@@ -31,18 +42,18 @@ const requiredProps = {
   vizType: 'table',
 };
 
-describe('ChartRenderer', () => {
-  it('should render SuperChart', () => {
-    const wrapper = shallow(
-      <ChartRenderer {...requiredProps} chartIsStale={false} />,
-    );
-    expect(wrapper.find(SuperChart)).toExist();
-  });
+test('should render SuperChart', () => {
+  const { getByTestId } = render(
+    <ChartRenderer {...requiredProps} chartIsStale={false} />,
+  );
+  expect(getByTestId('mock-super-chart')).toBeInTheDocument();
+});
 
-  it('should use latestQueryFormData instead of formData when chartIsStale is true', () => {
-    const wrapper = shallow(<ChartRenderer {...requiredProps} chartIsStale />);
-    expect(wrapper.find(SuperChart).prop('formData')).toEqual({
-      testControl: 'bar',
-    });
-  });
+test('should use latestQueryFormData instead of formData when chartIsStale is true', () => {
+  const { getByTestId } = render(
+    <ChartRenderer {...requiredProps} chartIsStale />,
+  );
+  expect(getByTestId('mock-super-chart')).toHaveTextContent(
+    JSON.stringify({ testControl: 'bar' }),
+  );
 });

superset-frontend/src/components/Checkbox/Checkbox.test.tsx

@@ -16,62 +16,46 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { fireEvent, render } from 'spec/helpers/testing-library';
 
-import { isValidElement } from 'react';
-import { ReactWrapper } from 'enzyme';
-import {
-  styledMount as mount,
-  styledShallow as shallow,
-} from 'spec/helpers/theming';
+import Checkbox from 'src/components/Checkbox';
 
-import Checkbox, {
-  CheckboxChecked,
-  CheckboxUnchecked,
-} from 'src/components/Checkbox';
+jest.mock('src/components/Checkbox/CheckboxIcons', () => ({
+  CheckboxChecked: () => <div data-test="mock-CheckboxChecked" />,
+  CheckboxUnchecked: () => <div data-test="mock-CheckboxUnchecked" />,
+}));
 
-describe('Checkbox', () => {
-  let wrapper: ReactWrapper;
-
-  it('renders the base component', () => {
-    expect(
-      isValidElement(
-        <Checkbox style={{}} checked={false} onChange={() => true} />,
-      ),
-    ).toBe(true);
-  });
-
-  describe('when unchecked', () => {
-    it('renders the unchecked component', () => {
-      const shallowWrapper = shallow(
-        <Checkbox style={{}} checked={false} onChange={() => true} />,
-      );
-      expect(shallowWrapper.dive().find(CheckboxUnchecked)).toExist();
-    });
-  });
-
-  describe('when checked', () => {
-    it('renders the checked component', () => {
-      const shallowWrapper = shallow(
-        <Checkbox style={{}} checked onChange={() => true} />,
-      );
-      expect(shallowWrapper.dive().find(CheckboxChecked)).toExist();
-    });
-  });
-
-  it('works with an onChange handler', () => {
-    const mockAction = jest.fn();
-    wrapper = mount(
-      <Checkbox style={{}} checked={false} onChange={mockAction} />,
+describe('when unchecked', () => {
+  test('renders the unchecked component', () => {
+    const { getByTestId } = render(
+      <Checkbox style={{}} checked={false} onChange={() => true} />,
     );
-    wrapper.find('Checkbox').first().simulate('click');
-    expect(mockAction).toHaveBeenCalled();
+    expect(getByTestId('mock-CheckboxUnchecked')).toBeInTheDocument();
   });
+});
 
-  it('renders custom Checkbox styles without melting', () => {
-    wrapper = mount(
-      <Checkbox onChange={() => true} checked={false} style={{ opacity: 1 }} />,
+describe('when checked', () => {
+  test('renders the checked component', () => {
+    const { getByTestId } = render(
+      <Checkbox style={{}} checked onChange={() => true} />,
     );
-    expect(wrapper.find('Checkbox')).toExist();
-    expect(wrapper.find('Checkbox')).toHaveStyle({ opacity: 1 });
+    expect(getByTestId('mock-CheckboxChecked')).toBeInTheDocument();
   });
 });
+
+test('works with an onChange handler', () => {
+  const mockAction = jest.fn();
+  const { getByRole } = render(
+    <Checkbox style={{}} checked={false} onChange={mockAction} />,
+  );
+  fireEvent.click(getByRole('checkbox'));
+  expect(mockAction).toHaveBeenCalled();
+});
+
+test('renders custom Checkbox styles without melting', () => {
+  const { getByRole } = render(
+    <Checkbox onChange={() => true} checked={false} style={{ opacity: 1 }} />,
+  );
+  expect(getByRole('checkbox')).toBeInTheDocument();
+  expect(getByRole('checkbox')).toHaveStyle({ opacity: 1 });
+});

superset-frontend/src/components/ConfirmStatusChange/ConfirmStatusChange.test.jsx

@@ -16,48 +16,51 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { mount } from 'enzyme';
+import { fireEvent, render, waitFor } from 'spec/helpers/testing-library';
 import Button from 'src/components/Button';
-import { act } from 'react-dom/test-utils';
-import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
-import Modal from 'src/components/Modal';
-
-describe('ConfirmStatusChange', () => {
-  const mockedProps = {
-    title: 'please confirm',
-    description: 'are you sure?',
-    onConfirm: jest.fn(),
-  };
-  const wrapper = mount(
+
+const mockedProps = {
+  title: 'please confirm',
+  description: 'are you sure?',
+  onConfirm: jest.fn(),
+};
+
+test('opens a confirm modal', () => {
+  const { getByTestId } = render(
     <ConfirmStatusChange {...mockedProps}>
       {confirm => (
         <>
-          <Button id="btn1" onClick={confirm} />
+          <Button data-test="btn1" onClick={confirm} />
         </>
       )}
     </ConfirmStatusChange>,
-    {
-      wrappingComponent: ThemeProvider,
-      wrappingComponentProps: { theme: supersetTheme },
-    },
   );
 
-  it('opens a confirm modal', () => {
-    act(() => {
-      wrapper.find('#btn1').first().props().onClick('foo');
-    });
+  fireEvent.click(getByTestId('btn1'));
+
+  expect(getByTestId(`${mockedProps.title}-modal`)).toBeInTheDocument();
+});
+
+test('calls the function on confirm', async () => {
+  const { getByTestId, getByRole } = render(
+    <ConfirmStatusChange {...mockedProps}>
+      {confirm => (
+        <>
+          <Button data-test="btn1" onClick={() => confirm('foo')} />
+        </>
+      )}
+    </ConfirmStatusChange>,
+  );
 
-    wrapper.update();
+  fireEvent.click(getByTestId('btn1'));
 
-    expect(wrapper.find(Modal)).toExist();
-  });
+  const confirmInput = getByTestId('delete-modal-input');
+  fireEvent.change(confirmInput, { target: { value: 'DELETE' } });
 
-  it('calls the function on confirm', () => {
-    act(() => {
-      wrapper.find(Button).last().props().onClick();
-    });
+  const confirmButton = getByRole('button', { name: 'delete' });
+  fireEvent.click(confirmButton);
 
-    expect(mockedProps.onConfirm).toHaveBeenCalledWith('foo');
-  });
+  await waitFor(() => expect(mockedProps.onConfirm).toHaveBeenCalledTimes(1));
+  expect(mockedProps.onConfirm).toHaveBeenCalledWith('foo');
 });