diff --git a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js
index 24ebf2a9c5c5..b3155244f2fa 100644
--- a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js
+++ b/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();
+ 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();
+ expect(screen.getByLabelText('Breadcrumb')).toBeInTheDocument();
+ });
- it('should render', () => {
- const wrapper = mount(
-
-
- Breadcrumb 1
-
-
- );
- expect(wrapper).toMatchSnapshot();
- });
+ it('should accept `children` of BreadcrumbItem', () => {
+ render(
+
+ A
+ B
+ C
+
+ );
+ 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 1
-
-
- );
- expect(wrapper).toMatchSnapshot();
- });
+ it('should accept a `noTrailingSlash` and omit the trailing slash', () => {
+ render(
+
+ A
+ B
+ C
+
+ );
- it('should support rendering a custom component as a breadcrumb item', () => {
- const CustomComponent = jest.fn(({ children, href, ...rest }) => (
-
- {children}
-
- ));
+ // 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(
-
- A
- B
-
- C
-
-
- );
+ it('should accept a `className` for outermost DOM node', () => {
+ const { container } = render();
- 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(
-
- A
- B
-
- C
-
-
- );
- expect(manual).toMatchSnapshot();
+ it('should apply additional props to the outermost element', () => {
+ const { container } = render();
- const aria = mount(
-
- A
- B
-
- C
-
-
- );
- 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();
- it('should accept a `ref` for the outermost node', () => {
- const ref = jest.fn(() => React.createRef());
- const { container } = render(
-
- A
- B
-
- C
-
-
- );
- expect(ref).toHaveBeenCalled();
expect(ref).toHaveBeenCalledWith(container.firstChild);
});
});
diff --git a/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.js.snap b/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.js.snap
deleted file mode 100644
index d04e3a30e883..000000000000
--- a/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.js.snap
+++ /dev/null
@@ -1,215 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Breadcrumb should render 1`] = `
-
-
-
-`;
-
-exports[`Breadcrumb should support rendering the current page 1`] = `
-
-
-
-`;
-
-exports[`Breadcrumb should support rendering the current page 2`] = `
-
-
-
-`;
-
-exports[`Breadcrumb should support rendering without a trailing slash 1`] = `
-
-
-
-`;