Replace enzyme with React testing library in trace-tab

2025-07-27 00:19:55 +03:00 · 2021-10-21 19:30:36 -04:00 · 2021-10-21 19:30:36 -04:00 · 1b87ca46d9
commit 1b87ca46d9
parent f1514f7e4a
6 changed files with 94 additions and 403 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
@ -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",
--- 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/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(
+  it('should render with props, but without stack', async () => {
+    const { container } = render(
      <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 component = mount(
+    const { container } = render(
      <StackTraceTabAsAny actions={actions} action={actions[1].action} />
    );
-      genAsyncSnapshot(component, done);
-    });
+    expect(container.firstChild).toMatchSnapshot();
  });

-  it('should render with trace stack', () => {
-    return new Promise<void>((done) => {
-      const component = mount(
+  it('should render with trace stack', async () => {
+    const { container } = render(
      <StackTraceTabAsAny actions={actions} action={actions[2].action} />
    );
-      genAsyncSnapshot(component, done);
-    });
+    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={
-      Object {
-        "padding": "5px 10px",
-      }
-    }
+  style="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
-  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",
-          }
-        }
+    data-testid="stack-trace"
+    style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
  />
-    </StackTrace>
 </div>
-</StackTraceTab>
 `;

 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",
-          }
-        }
+    data-testid="stack-trace"
+    style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
  />
-    </StackTrace>
 </div>
-</StackTraceTab>
 `;

 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",
-      }
-    }
-  >
-    <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"
+    data-testid="stack-trace"
+    style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
  >
    <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%",
-                }
-              }
+        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
-              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}
+        style="display: block;"
      >
        <div>
          <div>
            fn1
          </div>
          <div
-                    style={
-                      Object {
-                        "fontSize": "0.9em",
-                        "marginBottom": "0.9em",
-                      }
-                    }
+            style="font-size: 0.9em; margin-bottom: 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",
-                      }
-                    }
+            style="font-size: 0.9em; margin-bottom: 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%",
-                  }
-                }
+          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>
    </div>
-        </Collapsible>
  </div>
-    </StackTrace>
 </div>
-</StackTraceTab>
 `;
--- 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