piral-breadcrumbs 0.15.0-alpha.4396 → 0.15.0-beta.4411

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-breadcrumbs",
-  "version": "0.15.0-alpha.4396",
+  "version": "0.15.0-beta.4411",
   "description": "Plugin for creating a breadcrumb manager in Piral.",
   "keywords": [
     "piral",
@@ -66,7 +66,7 @@
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-router": "^5.1.8",
-    "piral-core": "0.15.0-alpha.4396",
+    "piral-core": "0.15.0-beta.4411",
     "react": "^18.0.0",
     "react-router": "^5.2.0"
   },
@@ -75,5 +75,5 @@
     "react": ">=16.8.0",
     "react-router": "5.x"
   },
-  "gitHead": "62abff4d61634b3ecffda2407f1c29f1de929b4c"
+  "gitHead": "4f5faf811d34692b5f2d3042b9fb732fa8d64cb0"
 }

package/src/Breadcrumbs.test.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import create from 'zustand';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { StateContext } from 'piral-core';
 import { Breadcrumbs } from './Breadcrumbs';
 
-const MockBcContainer: React.FC<any> = ({ children }) => <div>{children}</div>;
+const MockBcContainer: React.FC<any> = ({ children }) => <div role="container">{children}</div>;
 MockBcContainer.displayName = 'MockBcContainer';
 
-const MockBcItem: React.FC<any> = ({ children }) => <div>{children}</div>;
+const MockBcItem: React.FC<any> = ({ children }) => <div role="dialog">{children}</div>;
 MockBcItem.displayName = 'MockBcTile';
 
 jest.mock('react-router', () => ({
@@ -52,13 +52,13 @@ function createMockContainer(breadcrumbs = {}) {
 describe('Piral-Breadcrumb Container component', () => {
   it('uses container for a breadcrumbs', () => {
     const { context } = createMockContainer();
-    const node = mount(
+    const node = render(
       <StateContext.Provider value={context}>
         <Breadcrumbs />
       </StateContext.Provider>,
     );
-    expect(node.find(MockBcContainer).length).toBe(1);
-    expect(node.find(MockBcItem).length).toBe(0);
+    expect(node.getAllByRole("container").length).toBe(1);
+    expect(node.queryByRole("dialog")).toBe(null);
   });
 
   it('uses container and item for each breadcrumb', () => {
@@ -87,12 +87,12 @@ describe('Piral-Breadcrumb Container component', () => {
         },
       },
     });
-    const node = mount(
+    const node = render(
       <StateContext.Provider value={context}>
         <Breadcrumbs />
       </StateContext.Provider>,
     );
-    expect(node.find(MockBcContainer).length).toBe(1);
-    expect(node.find(MockBcItem).length).toBe(2);
+    expect(node.getAllByRole("container").length).toBe(1);
+    expect(node.getAllByRole("dialog").length).toBe(2);
   });
 });

package/src/default.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { DefaultBreadcrumbsContainer } from './default';
 
 jest.mock('piral-core', () => ({
@@ -35,10 +35,10 @@ const state = {
 
 (React as any).useMemo = (cb) => cb();
 
-const StubBreadcrumbsContainer: React.FC = () => <div />;
+const StubBreadcrumbsContainer: React.FC = () => <ul />;
 StubBreadcrumbsContainer.displayName = 'StubBreadcrumbsContainer';
 
-const StubBreadcrumbItem: React.FC = () => <div />;
+const StubBreadcrumbItem: React.FC = () => <li />;
 StubBreadcrumbItem.displayName = 'BreadcrumbItem';
 
 describe('Default Breadcrumbs Component', () => {
@@ -47,13 +47,13 @@ describe('Default Breadcrumbs Component', () => {
       component: StubBreadcrumbItem,
       preferences: {},
     };
-    const node = mount(
+    const node = render(
       <DefaultBreadcrumbsContainer>
         <StubBreadcrumbItem />
       </DefaultBreadcrumbsContainer>,
     );
-    expect(node.find(StubBreadcrumbsContainer).length).toBe(0);
-    expect(node.find(StubBreadcrumbItem).length).toBe(1);
+    expect(node.queryByRole('list')).toBe(null);
+    expect(node.getAllByRole('listitem').length).toBe(1);
   });
 
   it('renders the provided extension in the default case', () => {
@@ -62,12 +62,12 @@ describe('Default Breadcrumbs Component', () => {
         component: StubBreadcrumbsContainer,
       },
     ];
-    const node = mount(
+    const node = render(
       <DefaultBreadcrumbsContainer>
         <StubBreadcrumbItem />
       </DefaultBreadcrumbsContainer>,
     );
-    expect(node.find(StubBreadcrumbItem).length).toBe(0);
-    expect(node.find(StubBreadcrumbsContainer).length).toBe(1);
+    expect(node.queryByRole('listitem')).toBe(null);
+    expect(node.getAllByRole('list').length).toBe(1);
   });
 });