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

2024-11-22 01:26:48 +03:00 · 2021-10-21 20:43:15 -04:00 · 2021-10-21 20:43:15 -04:00 · 623e4b42a6
commit 623e4b42a6
parent f1514f7e4a
11 changed files with 247 additions and 431 deletions
--- a/packages/redux-devtools-inspector-monitor-test-tab/test/TestGenerator.spec.tsx
+++ b/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';
--- a/packages/redux-devtools-inspector-monitor-trace-tab/package.json
+++ b/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",
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/StackTraceTab.tsx
+++ b/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,
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/openFile.ts
+++ b/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
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/path-browserify.ts
+++ b/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;
+}
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackTrace.tsx
+++ b/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>
+    );
  }
 }

--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/pollyfills.ts
+++ b/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');
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/unmapper.ts
+++ b/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
--- a/packages/redux-devtools-inspector-monitor-trace-tab/test/StackTraceTab.spec.tsx
+++ b/packages/redux-devtools-inspector-monitor-trace-tab/test/StackTraceTab.spec.tsx
@ -1,22 +1,7 @@
-import React, { ReactComponentElement } from 'react';
-import { configure, mount, ReactWrapper } from 'enzyme';
-import toJson from 'enzyme-to-json';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 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', () => {
-    return new Promise<void>((done) => {
-      const component = mount(<StackTraceTabAsAny />);
-      genAsyncSnapshot(component, done);
-    });
+  it('should render with no props', async () => {
+    const { container } = render(<StackTraceTabAsAny />);
+    await screen.findByTestId('stack-trace');
+    expect(container.firstChild).toMatchSnapshot();
  });

-  it('should render with props, but without stack', () => {
-    return new Promise<void>((done) => {
-      const component = mount(
-        <StackTraceTabAsAny actions={actions} action={actions[0].action} />
-      );
-      genAsyncSnapshot(component, done);
-    });
+  it('should render with props, but without stack', async () => {
+    const { container } = render(
+      <StackTraceTabAsAny actions={actions} action={actions[0].action} />
+    );
+    await screen.findByTestId('stack-trace');
+    expect(container.firstChild).toMatchSnapshot();
  });

  it('should render the link to docs', () => {
-    return new Promise<void>((done) => {
-      const component = mount(
-        <StackTraceTabAsAny actions={actions} action={actions[1].action} />
-      );
-      genAsyncSnapshot(component, done);
-    });
+    const { container } = render(
+      <StackTraceTabAsAny actions={actions} action={actions[1].action} />
+    );
+    expect(container.firstChild).toMatchSnapshot();
  });

-  it('should render with trace stack', () => {
-    return new Promise<void>((done) => {
-      const component = mount(
-        <StackTraceTabAsAny actions={actions} action={actions[2].action} />
-      );
-      genAsyncSnapshot(component, done);
-    });
+  it('should render with trace stack', async () => {
+    const { container } = render(
+      <StackTraceTabAsAny actions={actions} action={actions[2].action} />
+    );
+    await screen.findByTestId('stack-trace');
+    expect(container.firstChild).toMatchSnapshot();
  });
 });
--- a/packages/redux-devtools-inspector-monitor-trace-tab/test/snapshots/StackTraceTab.spec.tsx.snap
+++ b/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="padding: 5px 10px;"
 >
-  <div
-    style={
-      Object {
-        "padding": "5px 10px",
-      }
-    }
+  To enable tracing action calls, you should set \`trace\` option to \`true\` for Redux DevTools enhancer. Refer to
+   
+  <a
+    href="#"
  >
-    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>
+    this page
+  </a>
+   
+  for more details.
+</div>
 `;

 exports[`StackTraceTab component should render with no props 1`] = `
-<StackTraceTab
-  openFile={[Function]}
+<div
+  style="padding: 5px 10px;"
 >
  <div
-    style={
-      Object {
-        "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>
+    data-testid="stack-trace"
+    style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
+  />
+</div>
 `;

 exports[`StackTraceTab component should render with props, but without stack 1`] = `
-<StackTraceTab
-  action={
-    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="padding: 5px 10px;"
 >
  <div
-    style={
-      Object {
-        "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>
+    data-testid="stack-trace"
+    style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
+  />
+</div>
 `;

 exports[`StackTraceTab component should render with trace stack 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="padding: 5px 10px;"
 >
  <div
-    style={
-      Object {
-        "padding": "5px 10px",
-      }
-    }
+    data-testid="stack-trace"
+    style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
  >
-    <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",
-          }
-        }
+    <div>
+      <button
+        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;"
      >
-        <Collapsible
-          collapsedByDefault={false}
-          key="bundle-1"
-        >
+        ▼ 2 stack frames were expanded.
+      </button>
+      <div
+        style="display: block;"
+      >
+        <div>
          <div>
-            <button
-              onClick={[Function]}
-              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={
-                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={
-                      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={
-                      Object {
-                        "fontSize": "0.9em",
-                        "marginBottom": "0.9em",
-                      }
-                    }
-                  >
-                    <span>
-                      app.js:84:31
-                    </span>
-                  </div>
-                </div>
-              </StackFrame>
-              <button
-                onClick={[Function]}
-                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>
+            fn1
          </div>
-        </Collapsible>
+          <div
+            style="font-size: 0.9em; margin-bottom: 0.9em;"
+          >
+            <span>
+              app.js:72:24
+            </span>
+          </div>
+        </div>
+        <div>
+          <div>
+            fn2
+          </div>
+          <div
+            style="font-size: 0.9em; margin-bottom: 0.9em;"
+          >
+            <span>
+              app.js:84:31
+            </span>
+          </div>
+        </div>
+        <button
+          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;"
+        >
+          ▲ 2 stack frames were expanded.
+        </button>
      </div>
-    </StackTrace>
+    </div>
  </div>
-</StackTraceTab>
+</div>
 `;
--- a/yarn.lock
+++ b/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