test(enzyme): Migrate Enzyme to RTL (#2714)

Author: markov00

jest.config.js

@@ -12,7 +12,8 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: [
-    '<rootDir>/scripts/setup_enzyme.ts',
+    '<rootDir>/scripts/setup_tests.ts',
+    '@testing-library/jest-dom',
     '<rootDir>/scripts/custom_matchers.mock.ts',
     'jest-extended/all',
   ],

package.json

@@ -86,6 +86,8 @@
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@storybook/react": "^6.3.7",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^14.2.1",
     "@types/chroma-js": "^2.4.2",
     "@types/classnames": "^2.2.7",
     "@types/color": "^3.0.1",
@@ -95,7 +97,6 @@
     "@types/d3-interpolate": "^3.0.1",
     "@types/d3-scale": "^3.3.0",
     "@types/d3-shape": "^2.0.0",
-    "@types/enzyme": "^3.9.0",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.14.121",
     "@types/luxon": "^1.25.0",
@@ -116,8 +117,6 @@
     "commitizen": "^4.2.3",
     "cross-env": "^7.0.2",
     "cz-conventional-changelog": "^3.3.0",
-    "enzyme": "^3.11.0",
-    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",

packages/charts/src/chart_types/xy_chart/annotations/line/tooltip.test.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { mount } from 'enzyme';
+import { render, fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 
 import type { AnnotationLineProps } from './types';
@@ -29,7 +29,7 @@ import type { AnnotationDimensions } from '../types';
 describe('Annotation tooltips', () => {
   describe('Line annotation tooltips', () => {
     test('should show tooltip on mouseenter', () => {
-      const wrapper = mount(
+      render(
         <Chart size={[100, 100]}>
           <Settings
             theme={{
@@ -56,20 +56,23 @@ describe('Annotation tooltips', () => {
           />
         </Chart>,
       );
-      const annotation = wrapper.find('.echAnnotation__marker');
-      expect(annotation).toHaveLength(1);
-      expect(wrapper.find('.echAnnotation')).toHaveLength(0);
-      annotation.simulate('mouseenter');
-      const header = wrapper.find('.echTooltipHeader');
-      expect(header).toHaveLength(1);
-      expect(header.text()).toEqual('2');
-      expect(wrapper.find('.echAnnotation__details').text()).toEqual('foo');
-      annotation.simulate('mouseleave');
-      expect(annotation.find('.echTooltipHeader')).toHaveLength(0);
+
+      expect(screen.queryByTestId('echAnnotationMarker')).not.toBeNull();
+      const marker = screen.getByTestId('echAnnotationMarker');
+      expect(screen.queryAllByTestId('echAnnotation')).toHaveLength(0);
+
+      if (marker) fireEvent.mouseEnter(marker);
+
+      expect(screen.queryByTestId('echTooltip')).not.toBeNull();
+      expect(screen.getByTestId('echTooltipHeader').textContent).toBe('2');
+      expect(screen.getByTestId('echAnnotationDetails').textContent).toBe('foo');
+
+      if (marker) fireEvent.mouseLeave(marker);
+      expect(screen.queryByTestId('echTooltipHeader')).toBeNull();
     });
 
-    test('should now show tooltip if hidden', () => {
-      const wrapper = mount(
+    test('should not show tooltip when using hideTooltips', () => {
+      render(
         <Chart size={[100, 100]}>
           <Settings
             theme={{
@@ -97,10 +100,12 @@ describe('Annotation tooltips', () => {
           />
         </Chart>,
       );
-      const annotation = wrapper.find('.echAnnotation__marker');
-      expect(wrapper.find('.echAnnotation')).toHaveLength(0);
-      annotation.simulate('mouseenter');
-      expect(wrapper.find('.echTooltip__header')).toHaveLength(0);
+
+      expect(screen.queryAllByTestId('echAnnotation')).toHaveLength(0);
+      const marker = screen.getByTestId('echAnnotationMarker');
+      if (marker) fireEvent.mouseEnter(marker);
+
+      expect(screen.queryByTestId('echTooltip')).toBeNull();
     });
   });
 

packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/annotation_tooltip.tsx

@@ -40,6 +40,7 @@ export const AnnotationTooltip = ({ state, chartRef, chartId, onScroll, zIndex }
         actionsLoading=""
         noActionsLoaded=""
         className="echAnnotation"
+        data-testid="echAnnotation"
       >
         <TooltipContent {...state} />
       </TooltipWrapper>

packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/line_marker.tsx

@@ -127,6 +127,7 @@ export function LineMarker({
   return clickable ? (
     <button
       className="echAnnotation__marker"
+      data-testid="echAnnotationMarker"
       onMouseEnter={() => {
         onDOMElementEnter({
           createdBySpecId: specId,
@@ -153,6 +154,7 @@ export function LineMarker({
   ) : (
     <div
       className="echAnnotation__marker"
+      data-testid="echAnnotationMarker"
       onMouseEnter={() => {
         onDOMElementEnter({
           createdBySpecId: specId,

packages/charts/src/chart_types/xy_chart/renderer/dom/annotations/tooltip_content.tsx

@@ -27,7 +27,7 @@ export const TooltipContent = ({
       <>
         <TooltipHeader>{header}</TooltipHeader>
         <TooltipDivider />
-        <div className="echAnnotation__details">
+        <div className="echAnnotation__details" data-testid="echAnnotationDetails">
           {customTooltipDetails ? renderWithProps(customTooltipDetails, { details }) : details}
         </div>
       </>
@@ -41,7 +41,11 @@ export const TooltipContent = ({
       return null;
     }
 
-    return <div className="echAnnotation__details">{tooltipContent}</div>;
+    return (
+      <div className="echAnnotation__details" data-testid="echAnnotationDetails">
+        {tooltipContent}
+      </div>
+    );
   }, [datum, customTooltipDetails]);
 
   if (CustomTooltip) {

packages/charts/src/chart_types/xy_chart/specs/line_annotation.test.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { Provider } from 'react-redux';
 import type { Store } from 'redux';
@@ -45,9 +45,9 @@ function LineAnnotationChart(props: { chartStore: Store<GlobalChartState> }) {
 describe('Line annotation', () => {
   it('Should always be available on the on every render', () => {
     const chartStore = createChartStore('chart_id');
-    const wrapper = mount(<LineAnnotationChart chartStore={chartStore} />);
+    const { rerender } = render(<LineAnnotationChart chartStore={chartStore} />);
     expect(chartStore.getState().specs.threshold).toBeDefined();
-    wrapper.setProps({});
+    rerender(<LineAnnotationChart chartStore={chartStore} />);
     expect(chartStore.getState().specs.threshold).toBeDefined();
   });
 });