From 1b87ca46d942aafe240fdee74d07ad1916b68b31 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Thu, 21 Oct 2021 19:30:36 -0400
Subject: [PATCH] Replace enzyme with React testing library in trace-tab

---
 .../test/TestGenerator.spec.tsx               |   2 +-
 .../package.json                              |   6 +-
 .../containers/StackTrace.tsx                 |   6 +-
 .../test/StackTraceTab.spec.tsx               |  64 +--
 .../__snapshots__/StackTraceTab.spec.tsx.snap | 413 +++---------------
 yarn.lock                                     |   6 +-
 6 files changed, 94 insertions(+), 403 deletions(-)

diff --git a/packages/redux-devtools-inspector-monitor-test-tab/test/TestGenerator.spec.tsx b/packages/redux-devtools-inspector-monitor-test-tab/test/TestGenerator.spec.tsx
index 51a15ae8..7bad8807 100644
--- 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';
diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/package.json b/packages/redux-devtools-inspector-monitor-trace-tab/package.json
index 5359e1cb..60a3bb93 100644
--- a/packages/redux-devtools-inspector-monitor-trace-tab/package.json
+++ b/packages/redux-devtools-inspector-monitor-trace-tab/package.json
@@ -43,9 +43,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 +52,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",
diff --git 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
index 6369fe96..f285330e 100644
--- 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>
+    );
   }
 }
 
diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/test/StackTraceTab.spec.tsx b/packages/redux-devtools-inspector-monitor-trace-tab/test/StackTraceTab.spec.tsx
index 8e3a5c1d..9cf32961 100644
--- 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();
   });
 });
diff --git 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
index ce4cb318..1d844da9 100644
--- 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>
 `;
diff --git a/yarn.lock b/yarn.lock
index 462bc562..a92f41aa 100644
--- 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,9 +4812,6 @@ __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