Update tests

packages/redux-devtools-app/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-app/package.json

@@ -67,8 +67,7 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@rjsf/core": "^3.2.0",
-    "@types/enzyme": "^3.10.10",
+    "@testing-library/react": "^12.1.2",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^27.0.2",
     "@types/jsan": "^3.1.2",
     "@types/json-schema": "^7.0.9",
@@ -86,9 +85,6 @@
     "@typescript-eslint/parser": "^5.1.0",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.4.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-app/test/app.spec.tsx

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
-import { mount, ReactWrapper } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
-// import { mountToJson } from 'enzyme-to-json';
 import App from '../src/containers/App';
 import api from '../src/middlewares/api';
 import exportState from '../src/middlewares/exportState';
@@ -10,39 +9,28 @@ import rootReducer from '../src/reducers';
 import { DATA_TYPE_KEY } from '../src/constants/dataTypes';
 import stringifyJSON from '../src/utils/stringifyJSON';
 
-let wrapper: ReactWrapper<unknown, unknown, Component>;
-
 const store = createStore(rootReducer, applyMiddleware(exportState, api));
 
 describe('App container', () => {
-  beforeAll(() => {
+  it("should render inspector monitor's wrapper", () => {
-    wrapper = mount(
+    render(
       <Provider store={store}>
         <App />
       </Provider>
     );
-  });
+    expect(screen.getByTestId('inspector')).toBeDefined();
-
-  /*
-  it('should render the App', () => {
-    expect(mountToJson(wrapper)).toMatchSnapshot();
-  });
-*/
-
-  it("should render inspector monitor's wrapper", () => {
-    expect(wrapper.find('DevtoolsInspector').html()).toBeDefined();
   });
 
   it('should contain an empty action list', () => {
+    render(
+      <Provider store={store}>
+        <App />
+      </Provider>
+    );
+    const actionList = screen.getByTestId('actionList');
     expect(
-      wrapper
+      within(actionList).getByTestId('actionListRows').getAttribute('class')
-        .find('ActionList')
+    ).toMatch(/actionListRows-\d-\d-\d+/);
-        .findWhere((n) => {
-          const { className } = n.props();
-          return className && className.startsWith('actionListRows-');
-        })
-        .html()
-    ).toMatch(/<div class="actionListRows-\d-\d-\d+"><\/div>/);
   });
 });
 

packages/redux-devtools-app/test/setup.ts

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

packages/redux-devtools-inspector-monitor/src/ActionList.tsx

@@ -140,6 +140,7 @@ export default class ActionList<
     return (
       <div
         key="actionList"
+        data-testid="actionList"
         {...styling(
           ['actionList', isWideLayout && 'actionListWide'],
           isWideLayout
@@ -154,7 +155,11 @@ export default class ActionList<
           hasSkippedActions={skippedActionIds.length > 0}
           hasStagedActions={actionIds.length > 1}
         />
-        <div {...styling('actionListRows')} ref={this.getRef}>
+        <div
+          data-testid="actionListRows"
+          {...styling('actionListRows')}
+          ref={this.getRef}
+        >
           {filteredActionIds.map((actionId) => (
             <ActionListRow
               key={actionId}

packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx

@@ -312,6 +312,7 @@ class DevtoolsInspector<S, A extends Action<unknown>> extends PureComponent<
     return (
       <div
         key="inspector"
+        data-testid="inspector"
         ref={this.inspectorCreateRef}
         {...styling(
           ['inspector', isWideLayout && 'inspectorWide'],

yarn.lock

@@ -4504,8 +4504,7 @@ __metadata:
     "@redux-devtools/ui": ^1.0.0-9
     "@reduxjs/toolkit": ^1.6.2
     "@rjsf/core": ^3.2.0
-    "@types/enzyme": ^3.10.10
+    "@testing-library/react": ^12.1.2
-    "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/jest": ^27.0.2
     "@types/jsan": ^3.1.2
     "@types/json-schema": ^7.0.9
@@ -4525,9 +4524,6 @@ __metadata:
     babel-loader: ^8.2.3
     css-loader: ^6.4.0
     d3-state-visualizer: ^1.4.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
@@ -6487,15 +6483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/cheerio@npm:*, @types/cheerio@npm:^0.22.22":
-  version: 0.22.30
-  resolution: "@types/cheerio@npm:0.22.30"
-  dependencies:
-    "@types/node": "*"
-  checksum: 2aba93f57c0c88964bd83c3403b1f9ad98c377d00e0d638417a943ab483f0a638925c9a4f2e25d923db2a293ffb59f833cd49fa76c6299684494633becea54de
-  languageName: node
-  linkType: hard
-
 "@types/chrome@npm:^0.0.159":
   version: 0.0.159
   resolution: "@types/chrome@npm:0.0.159"
@@ -6663,25 +6650,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/enzyme-adapter-react-16@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "@types/enzyme-adapter-react-16@npm:1.0.6"
-  dependencies:
-    "@types/enzyme": "*"
-  checksum: d668ed5fbb7bf72e647f212ab60e2208f96b566a1782cbaa35cd0be3bfc27c5d075367517d341155d35dd21834271df7d74bbf49d1f878e0b7be2a9c0daa17a3
-  languageName: node
-  linkType: hard
-
-"@types/enzyme@npm:*, @types/enzyme@npm:^3.10.10":
-  version: 3.10.10
-  resolution: "@types/enzyme@npm:3.10.10"
-  dependencies:
-    "@types/cheerio": "*"
-    "@types/react": "*"
-  checksum: e2393f87d6737d643789fb1a83c53c5cb6cb9eaebf1e1c8a3163d95f778f3741a9734fea47761a7648d9c778166ffd531f61c0aa4c5bf97b0d8018cacad05a49
-  languageName: node
-  linkType: hard
-
 "@types/es6template@npm:^1.0.0":
   version: 1.0.0
   resolution: "@types/es6template@npm:1.0.0"
@@ -13559,19 +13527,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enzyme-to-json@npm:^3.6.2":
-  version: 3.6.2
-  resolution: "enzyme-to-json@npm:3.6.2"
-  dependencies:
-    "@types/cheerio": ^0.22.22
-    lodash: ^4.17.21
-    react-is: ^16.12.0
-  peerDependencies:
-    enzyme: ^3.4.0
-  checksum: e81f3dc05b5c440da416544a3cbc41fb9e79de0777453e48fe55de822f7d6f56ee08e5173d46a7624cf2781198396509c470bdd616a1ea441e6fa9ddf4396477
-  languageName: node
-  linkType: hard
-
 "enzyme@npm:^3.11.0":
   version: 3.11.0
   resolution: "enzyme@npm:3.11.0"
@@ -24609,7 +24564,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.3.2, react-is@npm:^16.6.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1, react-is@npm:^16.8.6, react-is@npm:^16.9.0":
+"react-is@npm:^16.13.1, react-is@npm:^16.3.2, react-is@npm:^16.6.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1, react-is@npm:^16.8.6, react-is@npm:^16.9.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f