Replace enzyme with React testing library in trace-tab

This commit is contained in:
Nathan Bierema 2021-10-21 19:30:36 -04:00
parent f1514f7e4a
commit 1b87ca46d9
6 changed files with 94 additions and 403 deletions

View File

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

View File

@ -43,9 +43,8 @@
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0", "@redux-devtools/core": "^3.9.0",
"@redux-devtools/inspector-monitor": "^1.0.0", "@redux-devtools/inspector-monitor": "^1.0.0",
"@testing-library/react": "^12.1.2",
"@types/babel__code-frame": "^7.0.3", "@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/html-entities": "^1.3.4",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/react": "^16.14.18", "@types/react": "^16.14.18",
@ -53,9 +52,6 @@
"@types/source-map": "0.5.2", "@types/source-map": "0.5.2",
"@typescript-eslint/eslint-plugin": "^5.1.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^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": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "eslint-plugin-jest": "^25.2.2",

View File

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

View File

@ -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 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 = { const actions = {
0: { type: 'PERFORM_ACTION', action: { type: '@@INIT' } }, 0: { type: 'PERFORM_ACTION', action: { type: '@@INIT' } },
1: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT_COUNTER' } }, 1: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT_COUNTER' } },
@ -32,37 +17,32 @@ const actions = {
const StackTraceTabAsAny = StackTraceTab as any; const StackTraceTabAsAny = StackTraceTab as any;
describe('StackTraceTab component', () => { 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} /> <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', () => { 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} /> <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} /> <StackTraceTabAsAny actions={actions} action={actions[2].action} />
); );
genAsyncSnapshot(component, done); await screen.findByTestId('stack-trace');
}); expect(container.firstChild).toMatchSnapshot();
}); });
}); });

View File

@ -1,376 +1,91 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StackTraceTab component should render the link to docs 1`] = ` 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 <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 To enable tracing action calls, you should set \`trace\` option to \`true\` for Redux DevTools enhancer. Refer to
<a <a
href="#" href="#"
onClick={[Function]}
> >
this page this page
</a> </a>
for more details. for more details.
</div> </div>
</StackTraceTab>
`; `;
exports[`StackTraceTab component should render with no props 1`] = ` exports[`StackTraceTab component should render with no props 1`] = `
<StackTraceTab <div
openFile={[Function]} style="padding: 5px 10px;"
> >
<div <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> </div>
</StackTraceTab>
`; `;
exports[`StackTraceTab component should render with props, but without stack 1`] = ` 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 <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> </div>
</StackTraceTab>
`; `;
exports[`StackTraceTab component should render with trace stack 1`] = ` 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 <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> <div>
<button <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. ▼ 2 stack frames were expanded.
</button> </button>
<div <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>
<div> <div>
fn1 fn1
</div> </div>
<div <div
style={ style="font-size: 0.9em; margin-bottom: 0.9em;"
Object {
"fontSize": "0.9em",
"marginBottom": "0.9em",
}
}
> >
<span> <span>
app.js:72:24 app.js:72:24
</span> </span>
</div> </div>
</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>
<div> <div>
fn2 fn2
</div> </div>
<div <div
style={ style="font-size: 0.9em; margin-bottom: 0.9em;"
Object {
"fontSize": "0.9em",
"marginBottom": "0.9em",
}
}
> >
<span> <span>
app.js:84:31 app.js:84:31
</span> </span>
</div> </div>
</div> </div>
</StackFrame>
<button <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. ▲ 2 stack frames were expanded.
</button> </button>
</div> </div>
</div> </div>
</Collapsible>
</div> </div>
</StackTrace>
</div> </div>
</StackTraceTab>
`; `;

View File

@ -4801,10 +4801,9 @@ __metadata:
"@babel/runtime": ^7.15.4 "@babel/runtime": ^7.15.4
"@redux-devtools/core": ^3.9.0 "@redux-devtools/core": ^3.9.0
"@redux-devtools/inspector-monitor": ^1.0.0 "@redux-devtools/inspector-monitor": ^1.0.0
"@testing-library/react": ^12.1.2
"@types/babel__code-frame": ^7.0.3 "@types/babel__code-frame": ^7.0.3
"@types/chrome": ^0.0.159 "@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/html-entities": ^1.3.4
"@types/jest": ^27.0.2 "@types/jest": ^27.0.2
"@types/react": ^16.14.18 "@types/react": ^16.14.18
@ -4813,9 +4812,6 @@ __metadata:
"@typescript-eslint/eslint-plugin": ^5.1.0 "@typescript-eslint/eslint-plugin": ^5.1.0
"@typescript-eslint/parser": ^5.1.0 "@typescript-eslint/parser": ^5.1.0
anser: ^2.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: ^7.32.0
eslint-config-prettier: ^8.3.0 eslint-config-prettier: ^8.3.0
eslint-plugin-jest: ^25.2.2 eslint-plugin-jest: ^25.2.2