Remove dependency on enzyme

[yurishkuro]

Enzyme is not compatible with React 18, so we need to phase it out.

Preferred approach is to migrate to react-testing-library. In some cases we may use a replacement shallow function #1653, but only when absolutely necessary, it's better to move away from snapshot testing.

• https://testing-library.com/docs/react-testing-library/migrate-from-enzyme
• https://medium.com/zipyai/migrating-from-enzyme-to-react-testing-library-b1fb607d81ab

For examples of this being partially done, see merged PRs in this ticket below (e.g. #1659 #1653 #1643).

The scope of this is sizeable, so the recommendation is to limit the changes to specific modules, a couple test files at a time.

Current enzyme references (Nov 9):

$ grep -rn enzyme packages/jaeger-ui/src
packages/jaeger-ui/src/utils/redux-form-field-adapter.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/Monitor/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/Monitor/EmptyState/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/index.test.js:16:import { mount, shallow } from 'enzyme';
packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/QualityMetrics/MetricCard.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/QualityMetrics/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/QualityMetrics/Header.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/SearchableSelect.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/CircularProgressbar.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/TraceName.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/EmphasizedNode.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/DetailsCard/DetailList.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/DetailsCard/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/UiFindInput.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/ExternalLinks.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/ErrorMessage.test.js:16:import { shallow, mount } from 'enzyme';
packages/jaeger-ui/src/components/common/FilteredList/highlightMatches.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/FilteredList/ListItem.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/FilteredList/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/VerticalResizer.test.js:16:import { mount } from 'enzyme';
packages/jaeger-ui/src/components/common/ExamplesLink.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/CopyIcon.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/common/NameSelector.test.js:18:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsPanel.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/SidePanel/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.test.js:24:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/Graph/getNodeRenderers.test.js:15:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/Graph/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/traces.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/Header/ChevronDown.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/Header/LayoutSettings/index.test.js:17:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/Header/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/renderNode.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/TraceDiffGraph.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceDiffHeader.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceIdInput.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js:62:   * when props change because enzyme does not support wrapper.setProps for classes that render an array of
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js:155:      // traceNameRenderer returns a React Fragment, wrapper div helps enzyme
packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.js:178:      // traceNameRenderer returns a React Fragment, wrapper div helps enzyme
packages/jaeger-ui/src/components/TraceDiff/TraceDiff.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DependencyGraph/DependencyForceGraph.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DependencyGraph/ForceGraphArrowLink.test.js:22:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/DependencyGraph/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceSpanView/index.test.js:16:import { mount, shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/url/ReferenceLink.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/index.test.js:32:import { shallow, mount } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/KeyboardShortcutsHelp.test.js:17:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.test.js:16:import { shallow, mount } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/CanvasSpanGraph.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.test.js:15:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/Scrubber.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/GraphTicks.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceGraph/OpNode.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.test.js:16:import { mount, shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.test.js:16:import { mount, shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js:15:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ReferencesButton.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/index.test.js:16:import { mount, shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/TextList.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.test.js:19:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.test.js:15:import { shallow, mount } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/Ticks.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js:16:import { mount } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceStatistics/index.test.js:16:import { mount } from 'enzyme';
packages/jaeger-ui/src/components/TracePage/TraceStatistics/PopupSql.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/AltViewOptions.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DownloadResults.test.js:17:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.test.js:17:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js:16:import { mount, shallow } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.test.js:17:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/FileLoader.test.js:16:import { shallow } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/index.test.js:32:import { mount } from 'enzyme';
packages/jaeger-ui/src/components/SearchTracePage/SearchForm.test.js:19:import { shallow } from 'enzyme';

[Sangam-ghimire]

I want to work on this @yurishkuro. Can you assign it to me please? Will be a very good start for me

[yurishkuro]

We do not assign issues. There are multiple packages that are affected, don't try to change all in one PR.

[Sangam-ghimire]

@yurishkuro Any previous discussion that I should not miss, execpt the mentioned ones.

[TiwariAbhishek23]

I also want to work on this. There are several test files, so I think we can split the task between us, @Sangam-ghimire. Please let me know if you want to handle all the files alone because if we both work on same files, it will waste time for both of us.
Thanks

[Sangam-ghimire]

Sure @AbhishekTiwari23 that's a great spirit. Let's split and work together. I might need some help too.

[anshgoyalevil]

@Sangam-ghimire @AbhishekTiwari23 Please have a look at the discussion among the PRs: #1659 #1653 #1643
It would help you understand the issue's landscape.

[anikdhabal]

https://testing-library.com/docs/react-testing-library/migrate-from-enzyme
https://medium.com/zipyai/migrating-from-enzyme-to-react-testing-library-b1fb607d81ab
you can refer these @Sangam-ghimire @AbhishekTiwari23

[TiwariAbhishek23]

Thanks, working on it