[core] Use describeTreeView in existing tests for useTreeViewItems (

#12732)

packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx

@@ -1,60 +1,24 @@
-import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, ErrorBoundary } from '@mui-internal/test-utils';
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
-import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { describeTreeView } from 'test/utils/tree-view/describeTreeView';
 
-describe('useTreeViewItems', () => {
-  const { render } = createRenderer();
-
-  it('should throw an error when two items have the same ID (items prop approach)', function test() {
-    // TODO is this fixed?
-    if (!/jsdom/.test(window.navigator.userAgent)) {
-      // can't catch render errors in the browser for unknown reason
-      // tried try-catch + error boundary + window onError preventDefault
-      this.skip();
-    }
-
-    expect(() =>
-      render(
-        <ErrorBoundary>
-          <RichTreeView
-            items={[
-              { id: '1', label: '1' },
-              { id: '1', label: 'B' },
-            ]}
-          />
-        </ErrorBoundary>,
-      ),
-    ).toErrorDev([
-      'MUI X: The Tree View component requires all items to have a unique `id` property.',
-      'MUI X: The Tree View component requires all items to have a unique `id` property.',
-      'The above error occurred in the <ForwardRef(RichTreeView)> component:',
-    ]);
-  });
-
-  it('should throw an error when two items have the same ID (JSX approach)', function test() {
+describeTreeView('useTreeViewItems plugin', ({ render, treeViewComponent }) => {
+  it('should throw an error when two items have the same ID', function test() {
     // TODO is this fixed?
     if (!/jsdom/.test(window.navigator.userAgent)) {
       // can't catch render errors in the browser for unknown reason
       // tried try-catch + error boundary + window onError preventDefault
       this.skip();
     }
 
-    expect(() =>
-      render(
-        <ErrorBoundary>
-          <SimpleTreeView>
-            <TreeItem itemId="1" label="A" />
-            <TreeItem itemId="1" label="B" />
-          </SimpleTreeView>
-        </ErrorBoundary>,
-      ),
-    ).toErrorDev([
-      'MUI X: The Tree View component requires all items to have a unique `id` property.',
-      'MUI X: The Tree View component requires all items to have a unique `id` property.',
-      'The above error occurred in the <ForwardRef(SimpleTreeView)> component:',
-    ]);
+    expect(() => render({ items: [{ id: '1' }, { id: '1' }], withErrorBoundary: true })).toErrorDev(
+      [
+        ...(treeViewComponent === 'SimpleTreeView'
+          ? ['Encountered two children with the same key']
+          : []),
+        'MUI X: The Tree View component requires all items to have a unique `id` property.',
+        'MUI X: The Tree View component requires all items to have a unique `id` property.',
+        `The above error occurred in the <ForwardRef(${treeViewComponent})> component`,
+      ],
+    );
   });
 });

packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.ts

@@ -31,7 +31,6 @@ const updateItemsState = ({
 
   const processItem = (
     item: TreeViewBaseItem,
-    index: number,
     parentId: string | null,
   ): TreeViewItemIdAndChildren => {
     const id: string = getItemId ? getItemId(item) : (item as any).id;
@@ -88,11 +87,11 @@ const updateItemsState = ({
 
     return {
       id,
-      children: item.children?.map((child, childIndex) => processItem(child, childIndex, id)),
+      children: item.children?.map((child) => processItem(child, id)),
     };
   };
 
-  const itemTree = items.map((item, itemIndex) => processItem(item, itemIndex, null));
+  const itemTree = items.map((item) => processItem(item, null));
 
   const itemChildrenIndexes: State['itemChildrenIndexes'] = {};
   Object.keys(itemOrderedChildrenIds).forEach((parentId) => {