fix(useTreeData): insert items into a child node with StrictMode (adobe#9824)

* fix(useTreeData): insert items into a child node with StrictMode

* fix 17/16

Author: chirokas

packages/dev/test-utils/src/renderOverride.tsx

@@ -25,11 +25,11 @@ function customRender(ui: Parameters<typeof render>[0], options?: Parameters<typ
 let reactTestingLibrary = require('@testing-library/react');
 // export renderHook and actHook from testing-library/react-hooks library if they don't exist in @testing-library/react
 // (i.e. renderHook is only in v13+ of testing library)
-export let renderHook = reactTestingLibrary.renderHook as typeof originalRenderHook;
+export let renderHook: typeof originalRenderHook = (render, options) => reactTestingLibrary.renderHook(render, {wrapper: StrictModeWrapper, ...options});
 export let actHook = reactTestingLibrary.act as typeof originalAct;
-if (!renderHook) {
+if (!reactTestingLibrary.renderHook) {
   let rhtl = require('@testing-library/react-hooks');
-  renderHook = rhtl.renderHook;
+  renderHook = (render, options) => rhtl.renderHook(render, {wrapper: StrictModeWrapper, ...options});
   actHook = rhtl.act;
 }
 

packages/react-stately/src/data/useTreeData.ts

@@ -261,7 +261,7 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
     },
     insert(parentKey: Key | null, index: number, ...values: T[]) {
       setItems(({items, nodeMap: originalMap}) => {
-        let {items: newNodes, nodeMap: newMap} = buildTree(values, originalMap, parentKey);
+        let {items: newNodes, nodeMap: newMap} = buildTree(values, new Map(originalMap), parentKey);
 
         // If parentKey is null, insert into the root.
         if (parentKey == null) {

packages/react-stately/test/data/useTreeData.test.js

@@ -69,6 +69,26 @@ describe('useTreeData', function () {
     expect(result.current.items[0].children[0].children[1].value).toEqual({name: 'Devon'});
     expect(result.current.items[0].children[1]).toBe(initialResult.items[0].children[1]);
     expect(result.current.items[0].children[2]).toBe(initialResult.items[0].children[2]);
+
+    ({result} = renderHook(() => useTreeData({initialItems: [], getChildren, getKey})));
+
+    expect(result.current.items).toHaveLength(0);
+
+    act(() => {
+      result.current.insert(null, 0, {name: 'John'});
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].value).toEqual({name: 'John'});
+
+    act(() => {
+      result.current.insert('John', 0, {name: 'Devon'});
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].value).toEqual({name: 'John'});
+    expect(result.current.items[0].children).toHaveLength(1);
+    expect(result.current.items[0].children[0].value).toEqual({name: 'Devon'});
   });
 
   it('should insert multiple items into a child node', function () {
@@ -90,6 +110,27 @@ describe('useTreeData', function () {
     expect(result.current.items[0].children[0].children[2].value).toEqual({name: 'Danni'});
     expect(result.current.items[0].children[1]).toBe(initialResult.items[0].children[1]);
     expect(result.current.items[0].children[2]).toBe(initialResult.items[0].children[2]);
+
+    ({result} = renderHook(() => useTreeData({initialItems: [], getChildren, getKey})));
+
+    expect(result.current.items).toHaveLength(0);
+
+    act(() => {
+      result.current.insert(null, 0, {name: 'John'});
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].value).toEqual({name: 'John'});
+
+    act(() => {
+      result.current.insert('John', 0, {name: 'Devon'}, {name: 'Danni'});
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].value).toEqual({name: 'John'});
+    expect(result.current.items[0].children).toHaveLength(2);
+    expect(result.current.items[0].children[0].value).toEqual({name: 'Devon'});
+    expect(result.current.items[0].children[1].value).toEqual({name: 'Danni'});
   });
 
   it('should insert an item into the root', function () {