test(breadcrumb): refactor enzyme tests to react testing library

packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js

@@ -5,112 +5,75 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { cleanup, render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
+import { screen, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { settings } from 'carbon-components';
+import Breadcrumb from '../';
+import BreadcrumbItem from '../BreadcrumbItem';
 
 const { prefix } = settings;
 
 describe('Breadcrumb', () => {
-  let Breadcrumb;
-  let BreadcrumbItem;
+  describe('API', () => {
+    it('should accept a `aria-label` for nav element', () => {
+      render(<Breadcrumb aria-label={'test-label'} />);
+      expect(screen.getByLabelText('test-label')).toBeInTheDocument();
+    });
 
-  beforeEach(() => {
-    const BreadcrumbEntrypoint = require('../');
-    Breadcrumb = BreadcrumbEntrypoint.Breadcrumb;
-    BreadcrumbItem = BreadcrumbEntrypoint.BreadcrumbItem;
-  });
+    it('should provide a default `aria-label` for nav element', () => {
+      render(<Breadcrumb />);
+      expect(screen.getByLabelText('Breadcrumb')).toBeInTheDocument();
+    });
 
-  it('should render', () => {
-    const wrapper = mount(
-      <Breadcrumb className="parent-class">
-        <BreadcrumbItem
-          className="some-class"
-          href="www.carbondesignsystem.com">
-          Breadcrumb 1
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should accept `children` of BreadcrumbItem', () => {
+      render(
+        <Breadcrumb>
+          <BreadcrumbItem href="#a">A</BreadcrumbItem>
+          <BreadcrumbItem href="#b">B</BreadcrumbItem>
+          <BreadcrumbItem href="#c">C</BreadcrumbItem>
+        </Breadcrumb>
+      );
+      expect(screen.getByText('A')).toBeInTheDocument();
+      expect(screen.getByText('B')).toBeInTheDocument();
+      expect(screen.getByText('C')).toBeInTheDocument();
+    });
 
-  it('should support rendering without a trailing slash', () => {
-    const wrapper = mount(
-      <Breadcrumb noTrailingSlash>
-        <BreadcrumbItem href="www.carbondesignsystem.com">
-          Breadcrumb 1
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should accept a `noTrailingSlash` and omit the trailing slash', () => {
+      render(
+        <Breadcrumb noTrailingSlash>
+          <BreadcrumbItem href="#a">A</BreadcrumbItem>
+          <BreadcrumbItem href="#b">B</BreadcrumbItem>
+          <BreadcrumbItem href="#c">C</BreadcrumbItem>
+        </Breadcrumb>
+      );
 
-  it('should support rendering a custom component as a breadcrumb item', () => {
-    const CustomComponent = jest.fn(({ children, href, ...rest }) => (
-      <a href={href} data-test-id="custom-component" {...rest}>
-        {children}
-      </a>
-    ));
+      // The slashes are implemented with pseudo elements that can't be detected in jsdom.
+      // So we have to settle here for just validating against the class. Pseudo elements
+      // should be tested in the browser/e2e tests.
+      // https://testing-library.com/docs/dom-testing-library/api-configuration/#computedstylesupportspseudoelements
+      // https://github.com/jsdom/jsdom/issues/1928
+      expect(screen.getByRole('list')).toHaveClass(
+        `${prefix}--breadcrumb--no-trailing-slash`
+      );
+    });
 
-    mount(
-      <Breadcrumb>
-        <BreadcrumbItem href="#a">A</BreadcrumbItem>
-        <BreadcrumbItem href="#b">B</BreadcrumbItem>
-        <BreadcrumbItem>
-          <CustomComponent href="#c">C</CustomComponent>
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
+    it('should accept a `className` for outermost DOM node', () => {
+      const { container } = render(<Breadcrumb className="test" />);
 
-    expect(CustomComponent).toHaveBeenCalled();
-    expect(CustomComponent).toHaveBeenCalledWith(
-      expect.objectContaining({
-        className: `${prefix}--link`,
-      }),
-      {}
-    );
-  });
+      expect(container.firstChild).toHaveClass('test');
+    });
 
-  it('should support rendering the current page', () => {
-    const manual = mount(
-      <Breadcrumb>
-        <BreadcrumbItem href="#a">A</BreadcrumbItem>
-        <BreadcrumbItem href="#b">B</BreadcrumbItem>
-        <BreadcrumbItem href="#c" isCurrentPage>
-          C
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-    expect(manual).toMatchSnapshot();
+    it('should apply additional props to the outermost element', () => {
+      const { container } = render(<Breadcrumb data-testid="test" />);
 
-    const aria = mount(
-      <Breadcrumb>
-        <BreadcrumbItem href="#a">A</BreadcrumbItem>
-        <BreadcrumbItem href="#b">B</BreadcrumbItem>
-        <BreadcrumbItem href="#c" aria-current="page">
-          C
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-    expect(aria).toMatchSnapshot();
-  });
+      expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+    });
 
-  describe('Component API', () => {
-    afterEach(cleanup);
+    it('should accept a `ref` for the outermost element', () => {
+      const ref = jest.fn();
+      const { container } = render(<Breadcrumb ref={ref} />);
 
-    it('should accept a `ref` for the outermost node', () => {
-      const ref = jest.fn(() => React.createRef());
-      const { container } = render(
-        <Breadcrumb ref={ref}>
-          <BreadcrumbItem href="#a">A</BreadcrumbItem>
-          <BreadcrumbItem href="#b">B</BreadcrumbItem>
-          <BreadcrumbItem href="#c" aria-current="page">
-            C
-          </BreadcrumbItem>
-        </Breadcrumb>
-      );
-      expect(ref).toHaveBeenCalled();
       expect(ref).toHaveBeenCalledWith(container.firstChild);
     });
   });