Replace enzyme with React testing library in trace-tab (#916)

packages/redux-devtools-inspector-monitor-test-tab/test/TestGenerator.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { PerformAction } from '@redux-devtools/core';
 import { Action } from 'redux';
 import TestGenerator from '../src/TestGenerator';

packages/redux-devtools-inspector-monitor-trace-tab/package.json

@@ -31,6 +31,7 @@
     "@types/chrome": "^0.0.159",
     "anser": "^2.1.0",
     "html-entities": "^2.3.2",
+    "path-browserify": "^1.0.1",
     "redux-devtools-themes": "^1.0.0",
     "source-map": "^0.5.7"
   },
@@ -43,9 +44,8 @@
     "@babel/preset-typescript": "^7.15.0",
     "@redux-devtools/core": "^3.9.0",
     "@redux-devtools/inspector-monitor": "^1.0.0",
+    "@testing-library/react": "^12.1.2",
     "@types/babel__code-frame": "^7.0.3",
-    "@types/enzyme": "^3.10.10",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/html-entities": "^1.3.4",
     "@types/jest": "^27.0.2",
     "@types/react": "^16.14.18",
@@ -53,9 +53,6 @@
     "@types/source-map": "0.5.2",
     "@typescript-eslint/eslint-plugin": "^5.1.0",
     "@typescript-eslint/parser": "^5.1.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",

packages/redux-devtools-inspector-monitor-trace-tab/src/StackTraceTab.tsx

@@ -68,10 +68,6 @@ export default class StackTraceTab<
 
       getStackFrames(deserializedError)
         .then((stackFrames) => {
-          /* eslint-disable no-console */
-          if (process.env.NODE_ENV === 'development')
-            console.log('Stack frames: ', stackFrames);
-          /* eslint-enable no-console */
           this.setState({
             stackFrames: stackFrames!,
             currentError: deserializedError,

packages/redux-devtools-inspector-monitor-trace-tab/src/openFile.ts

@@ -88,7 +88,6 @@ function openInEditor(editor: string, path: string, stackFrame: StackFrame) {
       // sublime, emacs, macvim, textmate + custom like https://github.com/eclemens/atom-url-handler
       url = `${editor}://open/?url=file://${projectPath}${filePath}&line=${line}&column=${column}`;
   }
-  if (process.env.NODE_ENV === 'development') console.log(url); // eslint-disable-line no-console
   if (chrome.devtools && !isFF) {
     if (chrome.tabs) openAndCloseTab(url);
     else window.open(url);
@@ -102,9 +101,6 @@ export default function openFile(
   lineNumber: number,
   stackFrame: StackFrame
 ) {
-  if (process.env.NODE_ENV === 'development')
-    // eslint-disable-next-line no-console
-    console.log(fileName, lineNumber, stackFrame);
   if (!chrome || !chrome.storage) return; // TODO: Pass editor settings for using outside of browser extension
   const storage = isFF
     ? chrome.storage.local

packages/redux-devtools-inspector-monitor-trace-tab/src/path-browserify.ts

@@ -0,0 +1,150 @@
+declare module 'path-browserify' {
+  /**
+   * A parsed path object generated by path.parse() or consumed by path.format().
+   */
+  interface ParsedPath {
+    /**
+     * The root of the path such as '/' or 'c:\'
+     */
+    root: string;
+    /**
+     * The full directory path such as '/home/user/dir' or 'c:\path\dir'
+     */
+    dir: string;
+    /**
+     * The file name including extension (if any) such as 'index.html'
+     */
+    base: string;
+    /**
+     * The file extension (if any) such as '.html'
+     */
+    ext: string;
+    /**
+     * The file name without extension (if any) such as 'index'
+     */
+    name: string;
+  }
+  interface FormatInputPathObject {
+    /**
+     * The root of the path such as '/' or 'c:\'
+     */
+    root?: string | undefined;
+    /**
+     * The full directory path such as '/home/user/dir' or 'c:\path\dir'
+     */
+    dir?: string | undefined;
+    /**
+     * The file name including extension (if any) such as 'index.html'
+     */
+    base?: string | undefined;
+    /**
+     * The file extension (if any) such as '.html'
+     */
+    ext?: string | undefined;
+    /**
+     * The file name without extension (if any) such as 'index'
+     */
+    name?: string | undefined;
+  }
+  interface PlatformPath {
+    /**
+     * Normalize a string path, reducing '..' and '.' parts.
+     * When multiple slashes are found, they're replaced by a single one; when the path contains a trailing slash, it is preserved. On Windows backslashes are used.
+     *
+     * @param p string path to normalize.
+     */
+    normalize(p: string): string;
+    /**
+     * Join all arguments together and normalize the resulting path.
+     * Arguments must be strings. In v0.8, non-string arguments were silently ignored. In v0.10 and up, an exception is thrown.
+     *
+     * @param paths paths to join.
+     */
+    join(...paths: string[]): string;
+    /**
+     * The right-most parameter is considered {to}.  Other parameters are considered an array of {from}.
+     *
+     * Starting from leftmost {from} parameter, resolves {to} to an absolute path.
+     *
+     * If {to} isn't already absolute, {from} arguments are prepended in right to left order,
+     * until an absolute path is found. If after using all {from} paths still no absolute path is found,
+     * the current working directory is used as well. The resulting path is normalized,
+     * and trailing slashes are removed unless the path gets resolved to the root directory.
+     *
+     * @param pathSegments string paths to join.  Non-string arguments are ignored.
+     */
+    resolve(...pathSegments: string[]): string;
+    /**
+     * Determines whether {path} is an absolute path. An absolute path will always resolve to the same location, regardless of the working directory.
+     *
+     * @param path path to test.
+     */
+    isAbsolute(p: string): boolean;
+    /**
+     * Solve the relative path from {from} to {to}.
+     * At times we have two absolute paths, and we need to derive the relative path from one to the other. This is actually the reverse transform of path.resolve.
+     */
+    relative(from: string, to: string): string;
+    /**
+     * Return the directory name of a path. Similar to the Unix dirname command.
+     *
+     * @param p the path to evaluate.
+     */
+    dirname(p: string): string;
+    /**
+     * Return the last portion of a path. Similar to the Unix basename command.
+     * Often used to extract the file name from a fully qualified path.
+     *
+     * @param p the path to evaluate.
+     * @param ext optionally, an extension to remove from the result.
+     */
+    basename(p: string, ext?: string): string;
+    /**
+     * Return the extension of the path, from the last '.' to end of string in the last portion of the path.
+     * If there is no '.' in the last portion of the path or the first character of it is '.', then it returns an empty string
+     *
+     * @param p the path to evaluate.
+     */
+    extname(p: string): string;
+    /**
+     * The platform-specific file separator. '\\' or '/'.
+     */
+    readonly sep: string;
+    /**
+     * The platform-specific file delimiter. ';' or ':'.
+     */
+    readonly delimiter: string;
+    /**
+     * Returns an object from a path string - the opposite of format().
+     *
+     * @param pathString path to evaluate.
+     */
+    parse(p: string): ParsedPath;
+    /**
+     * Returns a path string from an object - the opposite of parse().
+     *
+     * @param pathString path to evaluate.
+     */
+    format(pP: FormatInputPathObject): string;
+    /**
+     * On Windows systems only, returns an equivalent namespace-prefixed path for the given path.
+     * If path is not a string, path will be returned without modifications.
+     * This method is meaningful only on Windows system.
+     * On POSIX systems, the method is non-operational and always returns path without modifications.
+     */
+    toNamespacedPath(path: string): string;
+    /**
+     * Posix specific pathing.
+     * Same as parent object on posix.
+     */
+    readonly posix: PlatformPath;
+    /**
+     * Windows specific pathing.
+     * Same as parent object on windows
+     */
+    readonly win32: PlatformPath;
+  }
+
+  const path: PlatformPath;
+  export = path;
+}

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackTrace.tsx

@@ -94,7 +94,11 @@ class StackTrace extends Component<Props> {
   }
 
   render() {
-    return <div style={traceStyle}>{this.renderFrames()}</div>;
+    return (
+      <div data-testid="stack-trace" style={traceStyle}>
+        {this.renderFrames()}
+      </div>
+    );
   }
 }
 

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/pollyfills.ts

@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-if (typeof Promise === 'undefined') {
-  // Rejection tracking prevents a common issue where React gets into an
-  // inconsistent state due to an error, but it gets swallowed by a Promise,
-  // and the user has no idea what causes React's erratic future behavior.
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  require('promise/lib/rejection-tracking').enable();
-  window.Promise = require('promise/lib/es6-extensions.js');
-}
-
-// Object.assign() is commonly used with React.
-// It will use the native implementation if it's present and isn't buggy.
-Object.assign = require('object-assign');

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/unmapper.ts

@@ -8,7 +8,7 @@
 import StackFrame from './stack-frame';
 import { getSourceMap } from './getSourceMap';
 import { getLinesAround } from './getLinesAround';
-import path from 'path';
+import path from 'path-browserify';
 
 function count(search: string, string: string): number {
   // Count starts at -1 becuse a do-while loop always runs at least once

packages/redux-devtools-inspector-monitor-trace-tab/test/StackTraceTab.spec.tsx

@@ -1,22 +1,7 @@
-import React, { ReactComponentElement } from 'react';
+import React from 'react';
-import { configure, mount, ReactWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import toJson from 'enzyme-to-json';
 import StackTraceTab from '../src/StackTraceTab';
 
-import Adapter from 'enzyme-adapter-react-16';
-configure({ adapter: new Adapter() });
-
-function genAsyncSnapshot(
-  component: ReactWrapper<any, any, any>,
-  done: () => void
-) {
-  setTimeout(() => {
-    component.update();
-    expect(toJson(component)).toMatchSnapshot();
-    done();
-  });
-}
-
 const actions = {
   0: { type: 'PERFORM_ACTION', action: { type: '@@INIT' } },
   1: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT_COUNTER' } },
@@ -32,37 +17,32 @@ const actions = {
 const StackTraceTabAsAny = StackTraceTab as any;
 
 describe('StackTraceTab component', () => {
-  it('should render with no props', () => {
+  it('should render with no props', async () => {
-    return new Promise<void>((done) => {
+    const { container } = render(<StackTraceTabAsAny />);
-      const component = mount(<StackTraceTabAsAny />);
+    await screen.findByTestId('stack-trace');
-      genAsyncSnapshot(component, done);
+    expect(container.firstChild).toMatchSnapshot();
-    });
   });
 
-  it('should render with props, but without stack', () => {
+  it('should render with props, but without stack', async () => {
-    return new Promise<void>((done) => {
+    const { container } = render(
-      const component = mount(
       <StackTraceTabAsAny actions={actions} action={actions[0].action} />
     );
-      genAsyncSnapshot(component, done);
+    await screen.findByTestId('stack-trace');
-    });
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should render the link to docs', () => {
-    return new Promise<void>((done) => {
+    const { container } = render(
-      const component = mount(
       <StackTraceTabAsAny actions={actions} action={actions[1].action} />
     );
-      genAsyncSnapshot(component, done);
+    expect(container.firstChild).toMatchSnapshot();
-    });
   });
 
-  it('should render with trace stack', () => {
+  it('should render with trace stack', async () => {
-    return new Promise<void>((done) => {
+    const { container } = render(
-      const component = mount(
       <StackTraceTabAsAny actions={actions} action={actions[2].action} />
     );
-      genAsyncSnapshot(component, done);
+    await screen.findByTestId('stack-trace');
-    });
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

packages/redux-devtools-inspector-monitor-trace-tab/test/__snapshots__/StackTraceTab.spec.tsx.snap

@@ -1,376 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StackTraceTab component should render the link to docs 1`] = `
-<StackTraceTab
-  action={
-    Object {
-      "type": "INCREMENT_COUNTER",
-    }
-  }
-  actions={
-    Object {
-      "0": Object {
-        "action": Object {
-          "type": "@@INIT",
-        },
-        "type": "PERFORM_ACTION",
-      },
-      "1": Object {
-        "action": Object {
-          "type": "INCREMENT_COUNTER",
-        },
-        "type": "PERFORM_ACTION",
-      },
-      "2": Object {
-        "action": Object {
-          "type": "INCREMENT_COUNTER",
-        },
-        "stack": "Error
-    at fn1 (app.js:72:24)
-    at fn2 (app.js:84:31)
-     at fn3 (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/page.bundle.js:1269:80)",
-        "type": "PERFORM_ACTION",
-      },
-    }
-  }
-  openFile={[Function]}
->
 <div
-    style={
+  style="padding: 5px 10px;"
-      Object {
-        "padding": "5px 10px",
-      }
-    }
 >
   To enable tracing action calls, you should set \`trace\` option to \`true\` for Redux DevTools enhancer. Refer to
    
   <a
     href="#"
-      onClick={[Function]}
   >
     this page
   </a>
    
   for more details.
 </div>
-</StackTraceTab>
 `;
 
 exports[`StackTraceTab component should render with no props 1`] = `
-<StackTraceTab
+<div
-  openFile={[Function]}
+  style="padding: 5px 10px;"
 >
   <div
-    style={
+    data-testid="stack-trace"
-      Object {
+    style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
-        "padding": "5px 10px",
-      }
-    }
-  >
-    <StackTrace
-      contextSize={3}
-      editorHandler={[Function]}
-      errorName="N/A"
-      stackFrames={Array []}
-    >
-      <div
-        style={
-          Object {
-            "flex": "0 1 auto",
-            "fontSize": "1em",
-            "minHeight": "0px",
-            "overflow": "auto",
-          }
-        }
   />
-    </StackTrace>
 </div>
-</StackTraceTab>
 `;
 
 exports[`StackTraceTab component should render with props, but without stack 1`] = `
-<StackTraceTab
+<div
-  action={
+  style="padding: 5px 10px;"
-    Object {
-      "type": "@@INIT",
-    }
-  }
-  actions={
-    Object {
-      "0": Object {
-        "action": Object {
-          "type": "@@INIT",
-        },
-        "type": "PERFORM_ACTION",
-      },
-      "1": Object {
-        "action": Object {
-          "type": "INCREMENT_COUNTER",
-        },
-        "type": "PERFORM_ACTION",
-      },
-      "2": Object {
-        "action": Object {
-          "type": "INCREMENT_COUNTER",
-        },
-        "stack": "Error
-    at fn1 (app.js:72:24)
-    at fn2 (app.js:84:31)
-     at fn3 (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/page.bundle.js:1269:80)",
-        "type": "PERFORM_ACTION",
-      },
-    }
-  }
-  openFile={[Function]}
 >
   <div
-    style={
+    data-testid="stack-trace"
-      Object {
+    style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
-        "padding": "5px 10px",
-      }
-    }
-  >
-    <StackTrace
-      contextSize={3}
-      editorHandler={[Function]}
-      errorName="N/A"
-      stackFrames={Array []}
-    >
-      <div
-        style={
-          Object {
-            "flex": "0 1 auto",
-            "fontSize": "1em",
-            "minHeight": "0px",
-            "overflow": "auto",
-          }
-        }
   />
-    </StackTrace>
 </div>
-</StackTraceTab>
 `;
 
 exports[`StackTraceTab component should render with trace stack 1`] = `
-<StackTraceTab
+<div
-  action={
+  style="padding: 5px 10px;"
-    Object {
-      "type": "INCREMENT_COUNTER",
-    }
-  }
-  actions={
-    Object {
-      "0": Object {
-        "action": Object {
-          "type": "@@INIT",
-        },
-        "type": "PERFORM_ACTION",
-      },
-      "1": Object {
-        "action": Object {
-          "type": "INCREMENT_COUNTER",
-        },
-        "type": "PERFORM_ACTION",
-      },
-      "2": Object {
-        "action": Object {
-          "type": "INCREMENT_COUNTER",
-        },
-        "stack": "Error
-    at fn1 (app.js:72:24)
-    at fn2 (app.js:84:31)
-     at fn3 (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/page.bundle.js:1269:80)",
-        "type": "PERFORM_ACTION",
-      },
-    }
-  }
-  openFile={[Function]}
 >
   <div
-    style={
+    data-testid="stack-trace"
-      Object {
+    style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
-        "padding": "5px 10px",
-      }
-    }
-  >
-    <StackTrace
-      contextSize={3}
-      editorHandler={[Function]}
-      errorName="N/A"
-      stackFrames={
-        Array [
-          StackFrame {
-            "_originalColumnNumber": null,
-            "_originalFileName": null,
-            "_originalFunctionName": null,
-            "_originalLineNumber": null,
-            "_originalScriptCode": null,
-            "_scriptCode": null,
-            "columnNumber": 24,
-            "fileName": "app.js",
-            "functionName": "fn1",
-            "lineNumber": 72,
-          },
-          StackFrame {
-            "_originalColumnNumber": null,
-            "_originalFileName": null,
-            "_originalFunctionName": null,
-            "_originalLineNumber": null,
-            "_originalScriptCode": null,
-            "_scriptCode": null,
-            "columnNumber": 31,
-            "fileName": "app.js",
-            "functionName": "fn2",
-            "lineNumber": 84,
-          },
-        ]
-      }
-    >
-      <div
-        style={
-          Object {
-            "flex": "0 1 auto",
-            "fontSize": "1em",
-            "minHeight": "0px",
-            "overflow": "auto",
-          }
-        }
-      >
-        <Collapsible
-          collapsedByDefault={false}
-          key="bundle-1"
   >
     <div>
       <button
-              onClick={[Function]}
+        style="color: rgb(255, 255, 255); background-color: rgb(60, 68, 79); cursor: pointer; display: block; width: 100%; text-align: left; font-size: 1em; padding: 0px 5px; line-height: 1.5; margin-bottom: 0.6em;"
-              style={
-                Object {
-                  "backgroundColor": "#3C444F",
-                  "border": "none",
-                  "color": "#FFFFFF",
-                  "cursor": "pointer",
-                  "display": "block",
-                  "fontSize": "1em",
-                  "lineHeight": "1.5",
-                  "marginBottom": "0.6em",
-                  "padding": "0px 5px",
-                  "textAlign": "left",
-                  "width": "100%",
-                }
-              }
       >
         ▼ 2 stack frames were expanded.
       </button>
       <div
-              style={
+        style="display: block;"
-                Object {
-                  "display": "block",
-                }
-              }
-            >
-              <StackFrame
-                contextSize={3}
-                critical={true}
-                editorHandler={[Function]}
-                frame={
-                  StackFrame {
-                    "_originalColumnNumber": null,
-                    "_originalFileName": null,
-                    "_originalFunctionName": null,
-                    "_originalLineNumber": null,
-                    "_originalScriptCode": null,
-                    "_scriptCode": null,
-                    "columnNumber": 24,
-                    "fileName": "app.js",
-                    "functionName": "fn1",
-                    "lineNumber": 72,
-                  }
-                }
-                key="frame-0"
-                showCode={false}
       >
         <div>
           <div>
             fn1
           </div>
           <div
-                    style={
+            style="font-size: 0.9em; margin-bottom: 0.9em;"
-                      Object {
-                        "fontSize": "0.9em",
-                        "marginBottom": "0.9em",
-                      }
-                    }
           >
             <span>
               app.js:72:24
             </span>
           </div>
         </div>
-              </StackFrame>
-              <StackFrame
-                contextSize={3}
-                critical={false}
-                editorHandler={[Function]}
-                frame={
-                  StackFrame {
-                    "_originalColumnNumber": null,
-                    "_originalFileName": null,
-                    "_originalFunctionName": null,
-                    "_originalLineNumber": null,
-                    "_originalScriptCode": null,
-                    "_scriptCode": null,
-                    "columnNumber": 31,
-                    "fileName": "app.js",
-                    "functionName": "fn2",
-                    "lineNumber": 84,
-                  }
-                }
-                key="frame-1"
-                showCode={false}
-              >
         <div>
           <div>
             fn2
           </div>
           <div
-                    style={
+            style="font-size: 0.9em; margin-bottom: 0.9em;"
-                      Object {
-                        "fontSize": "0.9em",
-                        "marginBottom": "0.9em",
-                      }
-                    }
           >
             <span>
               app.js:84:31
             </span>
           </div>
         </div>
-              </StackFrame>
         <button
-                onClick={[Function]}
+          style="color: rgb(255, 255, 255); background-color: rgb(60, 68, 79); cursor: pointer; display: block; width: 100%; text-align: left; font-size: 1em; padding: 0px 5px; line-height: 1.5; margin-bottom: 0.6em;"
-                style={
-                  Object {
-                    "backgroundColor": "#3C444F",
-                    "border": "none",
-                    "color": "#FFFFFF",
-                    "cursor": "pointer",
-                    "display": "block",
-                    "fontSize": "1em",
-                    "lineHeight": "1.5",
-                    "marginBottom": "0.6em",
-                    "padding": "0px 5px",
-                    "textAlign": "left",
-                    "width": "100%",
-                  }
-                }
         >
           ▲ 2 stack frames were expanded.
         </button>
       </div>
     </div>
-        </Collapsible>
   </div>
-    </StackTrace>
 </div>
-</StackTraceTab>
 `;

yarn.lock

@@ -4801,10 +4801,9 @@ __metadata:
     "@babel/runtime": ^7.15.4
     "@redux-devtools/core": ^3.9.0
     "@redux-devtools/inspector-monitor": ^1.0.0
+    "@testing-library/react": ^12.1.2
     "@types/babel__code-frame": ^7.0.3
     "@types/chrome": ^0.0.159
-    "@types/enzyme": ^3.10.10
-    "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/html-entities": ^1.3.4
     "@types/jest": ^27.0.2
     "@types/react": ^16.14.18
@@ -4813,15 +4812,13 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^5.1.0
     "@typescript-eslint/parser": ^5.1.0
     anser: ^2.1.0
-    enzyme: ^3.11.0
-    enzyme-adapter-react-16: ^1.15.6
-    enzyme-to-json: ^3.6.2
     eslint: ^7.32.0
     eslint-config-prettier: ^8.3.0
     eslint-plugin-jest: ^25.2.2
     eslint-plugin-react: ^7.26.1
     html-entities: ^2.3.2
     jest: ^27.3.1
+    path-browserify: ^1.0.1
     react: ^16.14.0
     react-dom: ^16.14.0
     react-test-renderer: ^16.14.0