(superset) branch replace-jest-enzyme updated: reactify -> RTL

[rusackas]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch replace-jest-enzyme
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/replace-jest-enzyme by this 
push:
     new 4bc60b1055 reactify -> RTL
4bc60b1055 is described below

commit 4bc60b1055ef8f8629eabd1e350cc2d6ce8c093f
Author: Evan Rusackas <e...@rusackas.com>
AuthorDate: Fri Feb 7 18:47:11 2025 -0700

    reactify -> RTL
---
 .../test/chart/components/reactify.test.tsx        | 57 +++++++++++-----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git 
a/superset-frontend/packages/superset-ui-core/test/chart/components/reactify.test.tsx
 
b/superset-frontend/packages/superset-ui-core/test/chart/components/reactify.test.tsx
index db74801bac..f21ebab4a1 100644
--- 
a/superset-frontend/packages/superset-ui-core/test/chart/components/reactify.test.tsx
+++ 
b/superset-frontend/packages/superset-ui-core/test/chart/components/reactify.test.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { mount } from 'enzyme';
 import { reactify } from '@superset-ui/core';
 import { RenderFuncType } from '../../../src/chart/components/reactify';
 
@@ -35,17 +36,14 @@ describe('reactify(renderFn)', () => {
   );
 
   renderFn.displayName = 'BoldText';
-
   renderFn.propTypes = {
     content: PropTypes.string,
   };
-
   renderFn.defaultProps = {
     content: 'ghi',
   };
 
   const willUnmountCb = jest.fn();
-
   const TheChart = reactify(renderFn);
   const TheChartWithWillUnmountHook = reactify(renderFn, {
     componentWillUnmount: willUnmountCb,
@@ -65,7 +63,6 @@ describe('reactify(renderFn)', () => {
 
     render() {
       const { content } = this.state;
-
       return <TheChart id="test" content={content} />;
     }
   }
@@ -76,28 +73,28 @@ describe('reactify(renderFn)', () => {
     }
   }
 
-  it('returns a React component class', () =>
-    new Promise(done => {
-      const wrapper = mount(<TestComponent />);
+  it('returns a React component class', async () => {
+    const { container } = render(<TestComponent />);
+    expect(renderFn).toHaveBeenCalledTimes(1);
+    expect(container.innerHTML).toBe('<div id="test"><b>abc</b></div>');
+
+    // Wait for state update
+    await new Promise(resolve => setTimeout(resolve, 20));
+    expect(renderFn).toHaveBeenCalledTimes(2);
+    expect(container.innerHTML).toBe('<div id="test"><b>def</b></div>');
+  });
 
-      expect(renderFn).toHaveBeenCalledTimes(1);
-      expect(wrapper.html()).toEqual('<div id="test"><b>abc</b></div>');
-      setTimeout(() => {
-        expect(renderFn).toHaveBeenCalledTimes(2);
-        expect(wrapper.html()).toEqual('<div id="test"><b>def</b></div>');
-        wrapper.unmount();
-        done(undefined);
-      }, 20);
-    }));
   describe('displayName', () => {
     it('has displayName if renderFn.displayName is defined', () => {
       expect(TheChart.displayName).toEqual('BoldText');
     });
+
     it('does not have displayName if renderFn.displayName is not defined', () 
=> {
       const AnotherChart = reactify(() => {});
       expect(AnotherChart.displayName).toBeUndefined();
     });
   });
+
   describe('propTypes', () => {
     it('has propTypes if renderFn.propTypes is defined', () => {
       /* eslint-disable-next-line react/forbid-foreign-prop-types */
@@ -107,6 +104,7 @@ describe('reactify(renderFn)', () => {
         'content',
       ]);
     });
+
     it('does not have propTypes if renderFn.propTypes is not defined', () => {
       const AnotherChart = reactify(() => {});
       /* eslint-disable-next-line react/forbid-foreign-prop-types */
@@ -116,31 +114,32 @@ describe('reactify(renderFn)', () => {
       ]);
     });
   });
+
   describe('defaultProps', () => {
     it('has defaultProps if renderFn.defaultProps is defined', () => {
       expect(TheChart.defaultProps).toBe(renderFn.defaultProps);
-      const wrapper = mount(<TheChart id="test" />);
-      expect(wrapper.html()).toEqual('<div id="test"><b>ghi</b></div>');
+      const { container } = render(<TheChart id="test" />);
+      expect(container.innerHTML).toBe('<div id="test"><b>ghi</b></div>');
     });
+
     it('does not have defaultProps if renderFn.defaultProps is not defined', 
() => {
       const AnotherChart = reactify(() => {});
       expect(AnotherChart.defaultProps).toBeUndefined();
     });
   });
+
   it('does not try to render if not mounted', () => {
     const anotherRenderFn = jest.fn();
-    const AnotherChart = reactify(anotherRenderFn); // enables valid new 
AnotherChart() call
+    const AnotherChart = reactify(anotherRenderFn);
     // @ts-ignore
     new AnotherChart({ id: 'test' }).execute();
     expect(anotherRenderFn).not.toHaveBeenCalled();
   });
-  it('calls willUnmount hook when it is provided', () =>
-    new Promise(done => {
-      const wrapper = mount(<AnotherTestComponent />);
-      setTimeout(() => {
-        wrapper.unmount();
-        expect(willUnmountCb).toHaveBeenCalledTimes(1);
-        done(undefined);
-      }, 20);
-    }));
+
+  it('calls willUnmount hook when it is provided', async () => {
+    const { unmount } = render(<AnotherTestComponent />);
+    await new Promise(resolve => setTimeout(resolve, 20));
+    unmount();
+    expect(willUnmountCb).toHaveBeenCalledTimes(1);
+  });
 });