diff --git a/packages/redux-devtools-app/jest.config.js b/packages/redux-devtools-app/jest.config.js index a1f53444..bae50f60 100644 --- a/packages/redux-devtools-app/jest.config.js +++ b/packages/redux-devtools-app/jest.config.js @@ -1,6 +1,5 @@ module.exports = { preset: 'ts-jest', - setupFilesAfterEnv: ['/test/setup.ts'], testEnvironment: 'jsdom', moduleNameMapper: { '\\.css$': '/test/__mocks__/styleMock.ts', diff --git a/packages/redux-devtools-app/package.json b/packages/redux-devtools-app/package.json index a3cb9044..4318454b 100644 --- a/packages/redux-devtools-app/package.json +++ b/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", - "@types/enzyme-adapter-react-16": "^1.0.6", + "@testing-library/react": "^12.1.2", "@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", diff --git a/packages/redux-devtools-app/test/app.spec.tsx b/packages/redux-devtools-app/test/app.spec.tsx index bcd7811f..101e312e 100644 --- a/packages/redux-devtools-app/test/app.spec.tsx +++ b/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 { mountToJson } from 'enzyme-to-json'; +import { render, screen, within } from '@testing-library/react'; 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; - const store = createStore(rootReducer, applyMiddleware(exportState, api)); describe('App container', () => { - beforeAll(() => { - wrapper = mount( + it("should render inspector monitor's wrapper", () => { + render( ); - }); - - /* - it('should render the App', () => { - expect(mountToJson(wrapper)).toMatchSnapshot(); - }); -*/ - - it("should render inspector monitor's wrapper", () => { - expect(wrapper.find('DevtoolsInspector').html()).toBeDefined(); + expect(screen.getByTestId('inspector')).toBeDefined(); }); it('should contain an empty action list', () => { + render( + + + + ); + const actionList = screen.getByTestId('actionList'); expect( - wrapper - .find('ActionList') - .findWhere((n) => { - const { className } = n.props(); - return className && className.startsWith('actionListRows-'); - }) - .html() - ).toMatch(/
<\/div>/); + within(actionList).getByTestId('actionListRows').getAttribute('class') + ).toMatch(/actionListRows-\d-\d-\d+/); }); }); diff --git a/packages/redux-devtools-app/test/setup.ts b/packages/redux-devtools-app/test/setup.ts deleted file mode 100644 index fc7b0dce..00000000 --- a/packages/redux-devtools-app/test/setup.ts +++ /dev/null @@ -1,4 +0,0 @@ -import Enzyme from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/redux-devtools-inspector-monitor/src/ActionList.tsx b/packages/redux-devtools-inspector-monitor/src/ActionList.tsx index 22085b0e..4362d2d6 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionList.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionList.tsx @@ -140,6 +140,7 @@ export default class ActionList< return (
0} hasStagedActions={actionIds.length > 1} /> -
+
{filteredActionIds.map((actionId) => ( > extends PureComponent< return (