chore(test): remove enzyme (#13316)

* test(accordion): refactor from enzyme to RTL

* chore(test): remove enzyme

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

config/jest-config-carbon/index.js

@@ -20,7 +20,6 @@ module.exports = {
   reporters: ['default'],
   setupFiles: [require.resolve('./setup/setup.js')],
   setupFilesAfterEnv: [require.resolve('./setup/setupAfterEnv.js')],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
   testMatch: [
     '<rootDir>/**/__tests__/**/*.js?(x)',
     '<rootDir>/**/*.(spec|test).js?(x)',

config/jest-config-carbon/package.json

@@ -27,13 +27,10 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@babel/runtime": "^7.18.3",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "accessibility-checker": "^3.1.32",
     "axe-core": "^4.3.5",
     "babel-jest": "^28.1.0",
     "chalk": "^4.1.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "jest-circus": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
     "jest-watch-typeahead": "^1.1.0",

config/jest-config-carbon/setup/setup.js

@@ -17,11 +17,6 @@ global.requestAnimationFrame = function requestAnimationFrame(callback) {
   callback();
 };
 
-const enzyme = jest.requireActual('enzyme');
-const Adapter = jest.requireActual('@wojtekmaj/enzyme-adapter-react-17');
-
-enzyme.configure({ adapter: new Adapter() });
-
 if (global.HTMLElement) {
   // This is a quirk that we need to bring in due to how our `tabbable` dependency
   // determines what nodes are focusable. Without this override, it's unable to

packages/react/src/components/Accordion/__tests__/AccordionItem-test.js

@@ -1,111 +1,118 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getByText } from '@carbon/test-utils/dom';
-import { render, cleanup } from '@carbon/test-utils/react';
 import React from 'react';
-import { Simulate } from 'react-dom/test-utils';
 import AccordionItem from '../AccordionItem';
-import { mount } from 'enzyme';
-
-const prefix = 'cds';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 
 describe('AccordionItem', () => {
-  afterEach(cleanup);
-
-  it('should render', () => {
-    const wrapper = mount(
-      <AccordionItem title="A heading" className="extra-class">
-        Lorem ipsum.
-      </AccordionItem>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
+  describe('renders as expected - Component API', () => {
+    it('should spread extra props onto outermost element', () => {
+      const { container } = render(<AccordionItem data-testid="test-id" />);
 
-  it('should update the item open state when the `open` prop changes', () => {
-    const wrapper = mount(
-      <AccordionItem title="A heading" open>
-        Lorem ipsum.
-      </AccordionItem>
-    );
-
-    expect(
-      wrapper
-        .find(`.${prefix}--accordion__item`)
-        .hasClass(`${prefix}--accordion__item--active`)
-    ).toBe(true);
-
-    wrapper.setProps({ open: false });
-    wrapper.update();
-
-    expect(
-      wrapper
-        .find(`.${prefix}--accordion__item`)
-        .hasClass(`${prefix}--accordion__item--active`)
-    ).toBe(false);
-  });
+      expect(container.firstChild).toHaveAttribute('data-testid', 'test-id');
+    });
 
-  it('should call `onClick` when the accordion list item is clicked', () => {
-    const title = 'test title';
-    const onClick = jest.fn();
-    const { container } = render(
-      <AccordionItem title={title} open onClick={onClick}>
-        Lorem ipsum.
-      </AccordionItem>
-    );
-
-    Simulate.click(getByText(container, title));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
+    it('should render and match snapshot', () => {
+      const { container } = render(
+        <AccordionItem title="Test title" className="extra-class">
+          Lorem ipsum.
+        </AccordionItem>
+      );
 
-  it('should call `onHeadingClick` when the accordion header is clicked', () => {
-    const onHeadingClick = jest.fn();
-    const wrapper = mount(
-      <AccordionItem title="A heading" open onHeadingClick={onHeadingClick}>
-        Lorem ipsum.
-      </AccordionItem>
-    );
-    wrapper.find('button').simulate('click');
-    expect(onHeadingClick).toHaveBeenCalledTimes(1);
-  });
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should support a custom `className` prop on the outermost element', () => {
+      const { container } = render(<AccordionItem className="custom-class" />);
 
-  it('should close an open AccordionItem panel when the Esc key is pressed', () => {
-    const wrapper = mount(
-      <AccordionItem title="A heading" open>
-        Lorem ipsum.
-      </AccordionItem>
-    );
-    wrapper.find('button').simulate('keydown', {
-      key: 'Escape',
-      keyCode: 27,
-      which: 27,
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('should respect disabled prop', () => {
+      render(<AccordionItem title="Test title" disabled />);
+
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+
+    it('should call onClick when expected', () => {
+      const onClick = jest.fn();
+      render(<AccordionItem title="Test title" onClick={onClick} />);
+
+      userEvent.click(screen.getByText('Test title'));
+
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should call onHeadingClick prop when expected', () => {
+      const onHeadingClick = jest.fn();
+      render(
+        <AccordionItem title="Test title" onHeadingClick={onHeadingClick} />
+      );
+
+      userEvent.click(screen.getByText('Test title'));
+
+      expect(onHeadingClick).toHaveBeenCalled();
+    });
+
+    it('should respect open prop', () => {
+      render(<AccordionItem open />);
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'true'
+      );
+    });
+
+    it('should respect renderToggle prop', () => {
+      const renderToggle = jest.fn((props) => (
+        <svg {...props} data-testid="icon">
+          <circle cx="16" cy="16" r="8" />
+        </svg>
+      ));
+      render(<AccordionItem renderToggle={renderToggle} />);
+
+      expect(renderToggle).toHaveBeenCalled();
+    });
+
+    it('should respect title prop', () => {
+      render(<AccordionItem title="Test title" />);
+
+      expect(screen.getByText('Test title')).toBeInTheDocument();
     });
-    expect(
-      wrapper
-        .find(`.${prefix}--accordion__item`)
-        .hasClass(`${prefix}--accordion__item--active`)
-    ).toBe(false);
   });
 
-  it('should not close an open AccordionItem panel if the Esc key is pressed in the panel', () => {
-    const wrapper = mount(
-      <AccordionItem title="A heading" open>
-        <input data-test-id="input" />
-      </AccordionItem>
-    );
-    wrapper.find('[data-test-id="input"]').simulate('keydown', {
-      key: 'Escape',
-      keyCode: 27,
-      which: 27,
+  describe('behaves as expected', () => {
+    it('should close an open AccordionItem panel when the Esc key is pressed', () => {
+      render(
+        <AccordionItem title="A heading" open>
+          Lorem ipsum.
+        </AccordionItem>
+      );
+      userEvent.type(screen.getByRole('button'), '{esc}');
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      );
+    });
+
+    it('should not close an open AccordionItem panel if the Esc key is pressed in the panel', () => {
+      render(
+        <AccordionItem title="A heading" open>
+          <input type="text" />
+        </AccordionItem>
+      );
+      userEvent.type(screen.getByRole('textbox'), '{esc}');
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'true'
+      );
     });
-    expect(
-      wrapper
-        .find(`.${prefix}--accordion__item`)
-        .hasClass(`${prefix}--accordion__item--active`)
-    ).toBe(true);
   });
 });

packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import AccordionSkeleton from '../Accordion.Skeleton';
+import { render, screen } from '@testing-library/react';
+
+describe('AccordionSkeleton', () => {
+  describe('renders as expected - Component API', () => {
+    it('should spread extra props onto outermost element', () => {
+      const { container } = render(<AccordionSkeleton data-testid="test-id" />);
+
+      expect(container.firstChild).toHaveAttribute('data-testid', 'test-id');
+    });
+
+    it('should render and match snapshot', () => {
+      const { container } = render(<AccordionSkeleton />);
+
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should respect align prop', () => {
+      const { container, rerender } = render(
+        <AccordionSkeleton align="start" />
+      );
+      expect(container.firstChild).toHaveClass('cds--accordion--start');
+
+      rerender(<AccordionSkeleton align="end" />);
+      expect(container.firstChild).toHaveClass('cds--accordion--end');
+    });
+
+    it('should support a custom `className` prop on the outermost element', () => {
+      const { container } = render(
+        <AccordionSkeleton className="custom-class" />
+      );
+
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('should respect count prop', () => {
+      render(<AccordionSkeleton count={8} />);
+
+      expect(screen.getAllByRole('listitem').length).toBe(8);
+    });
+
+    it('should respect isFlush prop', () => {
+      const { container } = render(<AccordionSkeleton isFlush />);
+
+      expect(container.firstChild).toHaveClass('cds--accordion--flush');
+    });
+
+    it('should respect open prop', () => {
+      render(<AccordionSkeleton open />);
+      expect(screen.getAllByRole('listitem')[0]).toHaveClass(
+        'cds--accordion__item--active'
+      );
+    });
+  });
+
+  describe('behaves as expected', () => {
+    // Add tests for relevant component behavior. For more information, visit https://github.com/carbon-design-system/carbon/issues/10184#issuecomment-992978122
+  });
+});