Replace enzyme with React testing library in test-tab (#915)

packages/redux-devtools-inspector-monitor-test-tab/jest.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
-  setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
   testEnvironment: 'jsdom',
   moduleNameMapper: {
     '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',

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

@@ -60,8 +60,7 @@
     "@babel/preset-typescript": "^7.15.0",
     "@redux-devtools/core": "^3.9.0",
     "@redux-devtools/inspector-monitor": "^1.0.0",
-    "@types/enzyme": "^3.10.10",
+    "@testing-library/react": "^12.1.2",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/es6template": "^1.0.0",
     "@types/jest": "^27.0.2",
     "@types/jsan": "^3.1.2",
@@ -70,9 +69,6 @@
     "@types/simple-diff": "^1.6.1",
     "@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-test-tab/test/TestGenerator.spec.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { renderToJson } from 'enzyme-to-json';
 import { PerformAction } from '@redux-devtools/core';
 import { Action } from 'redux';
 import TestGenerator from '../src/TestGenerator';
@@ -30,12 +29,12 @@ const TestGeneratorAsAny = TestGenerator as any;
 
 describe('TestGenerator component', () => {
   it('should show warning message when no params provided', () => {
-    const component = render(<TestGeneratorAsAny useCodemirror={false} />);
+    const { container } = render(<TestGeneratorAsAny useCodemirror={false} />);
-    expect(renderToJson(component)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should be empty when no actions provided', () => {
-    const component = render(
+    const { container } = render(
       <TestGeneratorAsAny
         assertion={fnTemplate.assertion}
         dispatcher={fnTemplate.dispatcher}
@@ -43,11 +42,11 @@ describe('TestGenerator component', () => {
         useCodemirror={false}
       />
     );
-    expect(renderToJson(component)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it("should match function template's test for first action", () => {
-    const component = render(
+    const { container } = render(
       <TestGeneratorAsAny
         assertion={fnTemplate.assertion}
         dispatcher={fnTemplate.dispatcher}
@@ -58,11 +57,11 @@ describe('TestGenerator component', () => {
         useCodemirror={false}
       />
     );
-    expect(renderToJson(component)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it("should match string template's test for first action", () => {
-    const component = render(
+    const { container } = render(
       <TestGeneratorAsAny
         assertion={strTemplate.assertion}
         dispatcher={strTemplate.dispatcher}
@@ -73,11 +72,11 @@ describe('TestGenerator component', () => {
         selectedActionId={1}
       />
     );
-    expect(renderToJson(component)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should generate test for the last action when selectedActionId not specified', () => {
-    const component = render(
+    const { container } = render(
       <TestGeneratorAsAny
         assertion={fnTemplate.assertion}
         dispatcher={fnTemplate.dispatcher}
@@ -87,11 +86,11 @@ describe('TestGenerator component', () => {
         useCodemirror={false}
       />
     );
-    expect(renderToJson(component)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should generate test for vanilla js class', () => {
-    const component = render(
+    const { container } = render(
       <TestGeneratorAsAny
         assertion={fnVanillaTemplate.assertion}
         dispatcher={fnVanillaTemplate.dispatcher}
@@ -104,11 +103,11 @@ describe('TestGenerator component', () => {
         useCodemirror={false}
       />
     );
-    expect(renderToJson(component)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should generate test for vanilla js class with string template', () => {
-    const component = render(
+    const { container } = render(
       <TestGeneratorAsAny
         assertion={strVanillaTemplate.assertion}
         dispatcher={strVanillaTemplate.dispatcher}
@@ -121,6 +120,6 @@ describe('TestGenerator component', () => {
         useCodemirror={false}
       />
     );
-    expect(renderToJson(component)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

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

@@ -2,13 +2,13 @@
 
 exports[`TestGenerator component should be empty when no actions provided 1`] = `
 <textarea
-  style="padding:10px;width:100%;height:100%"
+  style="padding: 10px; width: 100%; height: 100%;"
 />
 `;
 
 exports[`TestGenerator component should generate test for the last action when selectedActionId not specified 1`] = `
 <textarea
-  style="padding:10px;width:100%;height:100%"
+  style="padding: 10px; width: 100%; height: 100%;"
 >
   import expect from 'expect';
 import reducers from '../../reducers';
@@ -26,7 +26,7 @@ expect(state).toEqual({counter:1});
 
 exports[`TestGenerator component should generate test for vanilla js class 1`] = `
 <textarea
-  style="padding:10px;width:100%;height:100%"
+  style="padding: 10px; width: 100%; height: 100%;"
 >
   import expect from 'expect';
 import SomeStore from '../../stores/SomeStore';
@@ -44,7 +44,7 @@ expect(store.counter).toEqual(1);
 
 exports[`TestGenerator component should generate test for vanilla js class with string template 1`] = `
 <textarea
-  style="padding:10px;width:100%;height:100%"
+  style="padding: 10px; width: 100%; height: 100%;"
 >
   import expect from 'expect';
 import SomeStore from '../../stores/SomeStore';
@@ -62,7 +62,7 @@ describe('SomeStore', () =&gt; {
 
 exports[`TestGenerator component should match function template's test for first action 1`] = `
 <textarea
-  style="padding:10px;width:100%;height:100%"
+  style="padding: 10px; width: 100%; height: 100%;"
 >
   import expect from 'expect';
 import reducers from '../../reducers';
@@ -80,7 +80,7 @@ expect(state).toEqual({counter:1});
 
 exports[`TestGenerator component should match string template's test for first action 1`] = `
 <textarea
-  style="padding:10px;width:100%;height:100%"
+  style="padding: 10px; width: 100%; height: 100%;"
 >
   import expect from 'expect';
 import reducers from '../../reducers';
@@ -98,6 +98,6 @@ describe('reducers', () =&gt; {
 
 exports[`TestGenerator component should show warning message when no params provided 1`] = `
 <textarea
-  style="padding:10px;width:100%;height:100%"
+  style="padding: 10px; width: 100%; height: 100%;"
 />
 `;

packages/redux-devtools-inspector-monitor-test-tab/test/setup.ts

@@ -1,4 +0,0 @@
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });

yarn.lock

@@ -4751,8 +4751,7 @@ __metadata:
     "@redux-devtools/core": ^3.9.0
     "@redux-devtools/inspector-monitor": ^1.0.0
     "@redux-devtools/ui": ^1.0.0-9
-    "@types/enzyme": ^3.10.10
+    "@testing-library/react": ^12.1.2
-    "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/es6template": ^1.0.0
     "@types/jest": ^27.0.2
     "@types/jsan": ^3.1.2
@@ -4762,9 +4761,6 @@ __metadata:
     "@types/simple-diff": ^1.6.1
     "@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
     es6template: ^1.0.5
     eslint: ^7.32.0
     eslint-config-prettier: ^8.3.0
@@ -6300,6 +6296,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:^8.0.0":
+  version: 8.10.1
+  resolution: "@testing-library/dom@npm:8.10.1"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^4.2.0
+    aria-query: ^5.0.0
+    chalk: ^4.1.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.4.4
+    pretty-format: ^27.0.2
+  checksum: c11da16d981d4479fa18b2e90a62d2c19871da414016a4f80136394cf35e833ca4de4b56a64225f6bd5d3a13842176236d3508d217e3858c5e2ef35a3f391d5b
+  languageName: node
+  linkType: hard
+
+"@testing-library/react@npm:^12.1.2":
+  version: 12.1.2
+  resolution: "@testing-library/react@npm:12.1.2"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    "@testing-library/dom": ^8.0.0
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: 70b0f7f27c83fe1a33e7df01b1e64850fbab4050c403848d611d852cadaa25ccde58518773002ae569a1350b2282c2ccbcbe5eb6af8b29ab377ab2a8ab573b3b
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"
@@ -6344,6 +6369,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/aria-query@npm:^4.2.0":
+  version: 4.2.2
+  resolution: "@types/aria-query@npm:4.2.2"
+  checksum: 6f2ce11d91e2d665f3873258db19da752d91d85d3679eb5efcdf9c711d14492287e1e4eb52613b28e60375841a9e428594e745b68436c963d8bad4bf72188df3
+  languageName: node
+  linkType: hard
+
 "@types/async@npm:*":
   version: 3.2.8
   resolution: "@types/async@npm:3.2.8"
@@ -9075,6 +9107,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "aria-query@npm:5.0.0"
+  checksum: c41f98866c5a304561ee8cae55856711cddad6f3f85d8cb43cc5f79667078d9b8979ce32d244c1ff364e6463a4d0b6865804a33ccc717fed701b281cf7dc6296
+  languageName: node
+  linkType: hard
+
 "arr-diff@npm:^4.0.0":
   version: 4.0.0
   resolution: "arr-diff@npm:4.0.0"
@@ -13044,6 +13083,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-accessibility-api@npm:^0.5.9":
+  version: 0.5.9
+  resolution: "dom-accessibility-api@npm:0.5.9"
+  checksum: 3988bd1c58e115e972179b9ef881e65ab5da9c2e9d08f4e9646870301971fb0c72d0e0866559e0c06b91b9da6f1fed2f31f0fcbf0b6cffd959b01c0601da2c56
+  languageName: node
+  linkType: hard
+
 "dom-converter@npm:^0.2.0":
   version: 0.2.0
   resolution: "dom-converter@npm:0.2.0"
@@ -20131,6 +20177,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"lz-string@npm:^1.4.4":
+  version: 1.4.4
+  resolution: "lz-string@npm:1.4.4"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 54e31238a61a84d8f664d9860a9fba7310c5b97a52c444f80543069bc084815eff40b8d4474ae1d93992fdf6c252dca37cf27f6adbeb4dbc3df2f3ac773d0e61
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:^1.0.0":
   version: 1.3.0
   resolution: "make-dir@npm:1.3.0"
@@ -23539,7 +23594,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^27.0.0, pretty-format@npm:^27.3.1":
+"pretty-format@npm:^27.0.0, pretty-format@npm:^27.0.2, pretty-format@npm:^27.3.1":
   version: 27.3.1
   resolution: "pretty-format@npm:27.3.1"
   dependencies: