Fixed remaining DevTools broken tests by fixing a hydration/spread bug

facebook · Aug 27, 2019 · 896c993 · 896c993
1 parent e3cc42b
commit 896c993
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -109,6 +109,7 @@
     "test-build": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.build.js",
     "test-build-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.build.js",
     "test-build-devtools": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.build-devtools.js",
+    "debug-test-build-devtools": "cross-env NODE_ENV=development node --inspect-brk node_modules/.bin/jest --config ./scripts/jest/config.build-devtools.js",
     "test-dom-fixture": "cd fixtures/dom && yarn && yarn prestart && yarn test",
     "flow": "node ./scripts/tasks/flow.js",
     "flow-ci": "node ./scripts/tasks/flow-ci.js",

diff --git a/packages/react-devtools-shared/src/__tests__/bridge-test.js b/packages/react-devtools-shared/src/__tests__/bridge-test.js
@@ -30,7 +30,7 @@ describe('Bridge', () => {
     expect(wall.send).toHaveBeenCalledWith('shutdown');
 
     // Verify that the Bridge doesn't send messages after shutdown.
-    spyOnDevAndProd(console, 'warn');
+    spyOn(console, 'warn');
     wall.send.mockClear();
     bridge.send('should not send');
     jest.runAllTimers();

diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
@@ -287,7 +287,11 @@ export function dehydrate(
         };
 
         if (typeof data[Symbol.iterator]) {
-          [...data].forEach(
+          // TRICKY
+          // Don't use [...spread] syntax for this purpose.
+          // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values.
+          // Other types (e.g. typed arrays, Sets) will not spread correctly.
+          Array.from(data).forEach(
             (item, i) =>
               (unserializableValue[i] = dehydrate(
                 item,

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
@@ -266,14 +266,19 @@ export function shallowDiffers(prev: Object, next: Object): boolean {
 }
 
 export function getInObject(object: Object, path: Array<string | number>): any {
-  return path.reduce((reduced: Object, attr: string | number): any => {
+  return path.reduce((reduced: Object, attr: any): any => {
     if (reduced) {
       if (hasOwnProperty.call(reduced, attr)) {
         return reduced[attr];
       }
       if (typeof reduced[Symbol.iterator] === 'function') {
         // Convert iterable to array and return array[index]
-        return [...reduced][attr];
+        //
+        // TRICKY
+        // Don't use [...spread] syntax for this purpose.
+        // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values.
+        // Other types (e.g. typed arrays, Sets) will not spread correctly.
+        return Array.from(reduced)[attr];
       }
     }