chore: Working toward killing enzyme and cleaning up test noise. (#32207)

superset-frontend/.eslintrc.js

@@ -354,6 +354,14 @@ module.exports = {
             name: 'lodash/memoize',
             message: 'Lodash Memoize is unsafe! Please use memoize-one instead',
           },
+          {
+            name: '@testing-library/react',
+            message: 'Please use spec/helpers/testing-library instead',
+          },
+          {
+            name: '@testing-library/react-dom-utils',
+            message: 'Please use spec/helpers/testing-library instead',
+          },
         ],
         patterns: ['antd/*'],
       },

superset-frontend/package.json

@@ -68,8 +68,8 @@
     "prod": "npm run build",
     "prune": "rm -rf ./{packages,plugins}/*/{node_modules,lib,esm,tsconfig.tsbuildinfo,package-lock.json} ./.temp_cache",
     "storybook": "cross-env NODE_ENV=development BABEL_ENV=development storybook dev -p 6006",
-    "tdd": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=4096\" jest --watch",
+    "tdd": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" jest --watch",
-    "test": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=4096\" jest --max-workers=50%",
+    "test": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=8192\" jest --max-workers=80% --silent",
     "type": "tsc --noEmit",
     "update-maps": "jupyter nbconvert --to notebook --execute --inplace 'plugins/legacy-plugin-chart-country-map/scripts/Country Map GeoJSON Generator.ipynb' -Xfrozen_modules=off",
     "validate-release": "../RELEASING/validate_this_release.sh"
@@ -254,7 +254,7 @@
     "@storybook/react-webpack5": "8.1.11",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^8.20.1",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^12.8.3",
@@ -302,6 +302,7 @@
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "enzyme": "^3.11.0",
+    "enzyme-matchers": "^7.1.2",
     "esbuild": "^0.20.0",
     "esbuild-loader": "^4.2.2",
     "eslint": "^8.56.0",
@@ -331,9 +332,7 @@
     "ignore-styles": "^5.0.1",
     "imports-loader": "^5.0.0",
     "jest": "^29.7.0",
-    "jest-environment-enzyme": "^7.1.2",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-enzyme": "^7.1.2",
     "jest-html-reporter": "^3.10.2",
     "jest-websocket-mock": "^2.5.0",
     "jsdom": "^26.0.0",

superset-frontend/packages/superset-ui-core/test/chart/components/ChartDataProvider.test.tsx

@@ -16,16 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import '@testing-library/jest-dom';
-import { ReactNode } from 'react';
+import { render, screen, act } from '@testing-library/react';
-import { shallow } from 'enzyme';
 import ChartClient from '../../../src/chart/clients/ChartClient';
 import ChartDataProvider, {
   ChartDataProviderProps,
 } from '../../../src/chart/components/ChartDataProvider';
 import { bigNumberFormData } from '../fixtures/formData';
 
-// Note: the mock implementation of these function directly affects the expected results below
+// Keep existing mock setup
 const defaultMockLoadFormData = jest.fn(({ formData }: { formData: unknown }) =>
   Promise.resolve(formData),
 );
@@ -50,7 +49,6 @@ const mockLoadQueryData = jest.fn<Promise<unknown>, unknown[]>(
 );
 
 const actual = jest.requireActual('../../../src/chart/clients/ChartClient');
-// ChartClient is now a mock
 jest.spyOn(actual, 'default').mockImplementation(() => ({
   loadDatasource: mockLoadDatasource,
   loadFormData: mockLoadFormData,
@@ -62,7 +60,6 @@ const ChartClientMock = ChartClient as jest.Mock<ChartClient>;
 describe('ChartDataProvider', () => {
   beforeEach(() => {
     ChartClientMock.mockClear();
-
     mockLoadFormData = defaultMockLoadFormData;
     mockLoadFormData.mockClear();
     mockLoadDatasource.mockClear();
@@ -71,11 +68,17 @@ describe('ChartDataProvider', () => {
 
   const props: ChartDataProviderProps = {
     formData: { ...bigNumberFormData },
-    children: () => <div />,
+    children: ({ loading, payload, error }) => (
+      <div>
+        {loading && <span role="status">Loading...</span>}
+        {payload && <pre role="contentinfo">{JSON.stringify(payload)}</pre>}
+        {error && <div role="alert">{error.message}</div>}
+      </div>
+    ),
   };
 
   function setup(overrideProps?: Partial<ChartDataProviderProps>) {
-    return shallow(<ChartDataProvider {...props} {...overrideProps} />);
+    return render(<ChartDataProvider {...props} {...overrideProps} />);
   }
 
   it('instantiates a new ChartClient()', () => {
@@ -86,7 +89,7 @@ describe('ChartDataProvider', () => {
   describe('ChartClient.loadFormData', () => {
     it('calls method on mount', () => {
       setup();
-      expect(mockLoadFormData.mock.calls).toHaveLength(1);
+      expect(mockLoadFormData).toHaveBeenCalledTimes(1);
       expect(mockLoadFormData.mock.calls[0][0]).toEqual({
         sliceId: props.sliceId,
         formData: props.formData,
@@ -96,234 +99,231 @@ describe('ChartDataProvider', () => {
     it('should pass formDataRequestOptions to ChartClient.loadFormData', () => {
       const options = { host: 'override' };
       setup({ formDataRequestOptions: options });
-      expect(mockLoadFormData.mock.calls).toHaveLength(1);
+      expect(mockLoadFormData).toHaveBeenCalledTimes(1);
       expect(mockLoadFormData.mock.calls[0][1]).toEqual(options);
     });
 
-    it('calls ChartClient.loadFormData when formData or sliceId change', () => {
+    it('calls ChartClient.loadFormData when formData or sliceId change', async () => {
-      const wrapper = setup();
+      const { rerender } = setup();
       const newProps = { sliceId: 123, formData: undefined };
-      expect(mockLoadFormData.mock.calls).toHaveLength(1);
+      expect(mockLoadFormData).toHaveBeenCalledTimes(1);
 
-      wrapper.setProps(newProps);
+      rerender(<ChartDataProvider {...props} {...newProps} />);
-      expect(mockLoadFormData.mock.calls).toHaveLength(2);
+      expect(mockLoadFormData).toHaveBeenCalledTimes(2);
       expect(mockLoadFormData.mock.calls[1][0]).toEqual(newProps);
     });
   });
 
   describe('ChartClient.loadDatasource', () => {
-    it('does not method if loadDatasource is false', () =>
+    it('does not call method if loadDatasource is false', async () => {
-      new Promise(done => {
-        expect.assertions(1);
       setup({ loadDatasource: false });
-        setTimeout(() => {
+      await act(async () => {
-          expect(mockLoadDatasource.mock.calls).toHaveLength(0);
+        await new Promise(resolve => setTimeout(resolve, 0));
-          done(undefined);
+      });
-        }, 0);
+      expect(mockLoadDatasource).not.toHaveBeenCalled();
-      }));
-
-    it('calls method on mount if loadDatasource is true', () =>
-      new Promise(done => {
-        expect.assertions(2);
-        setup({ loadDatasource: true });
-        setTimeout(() => {
-          expect(mockLoadDatasource.mock.calls).toHaveLength(1);
-          expect(mockLoadDatasource.mock.calls[0][0]).toEqual(
-            props.formData.datasource,
-          );
-          done(undefined);
-        }, 0);
-      }));
-
-    it('should pass datasourceRequestOptions to ChartClient.loadDatasource', () =>
-      new Promise(done => {
-        expect.assertions(2);
-        const options = { host: 'override' };
-        setup({ loadDatasource: true, datasourceRequestOptions: options });
-        setTimeout(() => {
-          expect(mockLoadDatasource.mock.calls).toHaveLength(1);
-          expect(mockLoadDatasource.mock.calls[0][1]).toEqual(options);
-          done(undefined);
-        }, 0);
-      }));
-
-    it('calls ChartClient.loadDatasource if loadDatasource is true and formData or sliceId change', () =>
-      new Promise(done => {
-        expect.assertions(3);
-        const newDatasource = 'test';
-        const wrapper = setup({ loadDatasource: true });
-        wrapper.setProps({
-          formData: { datasource: newDatasource },
-          sliceId: undefined,
     });
 
-        setTimeout(() => {
+    it('calls method on mount if loadDatasource is true', async () => {
-          expect(mockLoadDatasource.mock.calls).toHaveLength(2);
+      setup({ loadDatasource: true });
-          expect(mockLoadDatasource.mock.calls[0][0]).toEqual(
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+      expect(mockLoadDatasource).toHaveBeenCalledTimes(1);
+      expect(mockLoadDatasource.mock.calls[0]).toEqual([
         props.formData.datasource,
+        undefined,
+      ]);
+    });
+
+    it('should pass datasourceRequestOptions to ChartClient.loadDatasource', async () => {
+      const options = { host: 'override' };
+      setup({ loadDatasource: true, datasourceRequestOptions: options });
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+      expect(mockLoadDatasource).toHaveBeenCalledTimes(1);
+      expect(mockLoadDatasource.mock.calls[0][1]).toEqual(options);
+    });
+
+    it('calls ChartClient.loadDatasource if loadDatasource is true and formData or sliceId change', async () => {
+      const { rerender } = setup({ loadDatasource: true });
+      const newDatasource = 'test';
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+
+      await act(async () => {
+        rerender(
+          <ChartDataProvider
+            {...props}
+            formData={{ ...props.formData, datasource: newDatasource }}
+            loadDatasource
+          />,
         );
-          expect(mockLoadDatasource.mock.calls[1][0]).toEqual(newDatasource);
+        await new Promise(resolve => setTimeout(resolve, 0));
-          done(undefined);
+      });
-        }, 0);
+
-      }));
+      expect(mockLoadDatasource).toHaveBeenCalledTimes(2);
+      expect(mockLoadDatasource.mock.calls[0]).toEqual([
+        props.formData.datasource,
+        undefined,
+      ]);
+      expect(mockLoadDatasource.mock.calls[1]).toEqual([
+        newDatasource,
+        undefined,
+      ]);
+    });
   });
 
   describe('ChartClient.loadQueryData', () => {
-    it('calls method on mount', () =>
+    it('calls method on mount', async () => {
-      new Promise(done => {
-        expect.assertions(2);
       setup();
-        setTimeout(() => {
+      await act(async () => {
-          expect(mockLoadQueryData.mock.calls).toHaveLength(1);
+        await new Promise(resolve => setTimeout(resolve, 0));
-          expect(mockLoadQueryData.mock.calls[0][0]).toEqual(props.formData);
+      });
-          done(undefined);
+      expect(mockLoadQueryData).toHaveBeenCalledTimes(1);
-        }, 0);
+      expect(mockLoadQueryData.mock.calls[0]).toEqual([
-      }));
+        props.formData,
+        undefined,
+      ]);
+    });
 
-    it('should pass queryDataRequestOptions to ChartClient.loadQueryData', () =>
+    it('should pass queryDataRequestOptions to ChartClient.loadQueryData', async () => {
-      new Promise(done => {
-        expect.assertions(2);
       const options = { host: 'override' };
       setup({ queryRequestOptions: options });
-        setTimeout(() => {
+      await act(async () => {
-          expect(mockLoadQueryData.mock.calls).toHaveLength(1);
+        await new Promise(resolve => setTimeout(resolve, 0));
-          expect(mockLoadQueryData.mock.calls[0][1]).toEqual(options);
+      });
-          done(undefined);
+      expect(mockLoadQueryData).toHaveBeenCalledTimes(1);
-        }, 0);
+      expect(mockLoadQueryData).toHaveBeenCalledWith(
-      }));
+        expect.anything(),
+        options,
+      );
+    });
 
-    it('calls ChartClient.loadQueryData when formData or sliceId change', () =>
+    it('calls ChartClient.loadQueryData when formData or sliceId change', async () => {
-      new Promise(done => {
+      const { rerender } = setup();
-        expect.assertions(3);
       const newFormData = { key: 'test' };
-        const wrapper = setup();
-        wrapper.setProps({ formData: newFormData, sliceId: undefined });
 
-        setTimeout(() => {
+      await act(async () => {
-          expect(mockLoadQueryData.mock.calls).toHaveLength(2);
+        await new Promise(resolve => setTimeout(resolve, 0));
-          expect(mockLoadQueryData.mock.calls[0][0]).toEqual(props.formData);
+      });
-          expect(mockLoadQueryData.mock.calls[1][0]).toEqual(newFormData);
+
-          done(undefined);
+      await act(async () => {
-        }, 0);
+        rerender(<ChartDataProvider {...props} formData={newFormData} />);
-      }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+
+      expect(mockLoadQueryData).toHaveBeenCalledTimes(2);
+      expect(mockLoadQueryData.mock.calls[0]).toEqual([
+        props.formData,
+        undefined,
+      ]);
+      expect(mockLoadQueryData.mock.calls[1]).toEqual([newFormData, undefined]);
+    });
   });
 
   describe('children', () => {
-    it('calls children({ loading: true }) when loading', () => {
+    it('shows loading state initially', async () => {
-      const children = jest.fn<ReactNode, unknown[]>();
+      mockLoadFormData.mockImplementation(() => new Promise(() => {}));
-      setup({ children });
+      mockLoadQueryData.mockImplementation(() => new Promise(() => {}));
+      mockLoadDatasource.mockImplementation(() => new Promise(() => {}));
 
-      // during the first tick (before more promises resolve) loading is true
+      setup();
-      expect(children.mock.calls).toHaveLength(1);
+      await screen.findByRole('status');
-      expect(children.mock.calls[0][0]).toEqual({ loading: true });
     });
 
-    it('calls children({ payload }) when loaded', () =>
+    it('shows payload when loaded', async () => {
-      new Promise(done => {
+      mockLoadFormData.mockResolvedValue(props.formData);
-        expect.assertions(2);
+      mockLoadQueryData.mockResolvedValue([props.formData]);
-        const children = jest.fn<ReactNode, unknown[]>();
+      mockLoadDatasource.mockResolvedValue(props.formData.datasource);
-        setup({ children, loadDatasource: true });
 
-        setTimeout(() => {
+      setup({ loadDatasource: true });
-          expect(children.mock.calls).toHaveLength(2);
+
-          expect(children.mock.calls[1][0]).toEqual({
+      const payloadElement = await screen.findByRole('contentinfo');
-            payload: {
+      const actualPayload = JSON.parse(payloadElement.textContent || '');
+
+      expect(actualPayload).toEqual({
         formData: props.formData,
         datasource: props.formData.datasource,
         queriesData: [props.formData],
-            },
       });
-          done(undefined);
-        }, 0);
-      }));
-
-    it('calls children({ error }) upon request error', () =>
-      new Promise(done => {
-        expect.assertions(2);
-        const children = jest.fn<ReactNode, unknown[]>();
-        mockLoadFormData = jest.fn(() => Promise.reject(new Error('error')));
-
-        setup({ children });
-
-        setTimeout(() => {
-          expect(children.mock.calls).toHaveLength(2); // loading + error
-          expect(children.mock.calls[1][0]).toEqual({
-            error: new Error('error'),
     });
-          done(undefined);
-        }, 0);
-      }));
 
-    it('calls children({ error }) upon JS error', () =>
+    it('shows error message upon request error', async () => {
-      new Promise(done => {
+      const errorMessage = 'error';
-        expect.assertions(2);
+      mockLoadFormData.mockRejectedValue(new Error(errorMessage));
-        const children = jest.fn<ReactNode, unknown[]>();
 
-        mockLoadFormData = jest.fn(() => {
+      setup();
+
+      const errorElement = await screen.findByRole('alert');
+      expect(errorElement).toHaveAttribute('role', 'alert');
+      expect(errorElement).toHaveTextContent(errorMessage);
+    });
+
+    it('shows error message upon JS error', async () => {
+      mockLoadFormData.mockImplementation(() => {
         throw new Error('non-async error');
       });
 
-        setup({ children });
+      setup();
 
-        setTimeout(() => {
+      const errorElement = await screen.findByRole('alert');
-          expect(children.mock.calls).toHaveLength(2); // loading + error
+      expect(errorElement).toHaveAttribute('role', 'alert');
-          expect(children.mock.calls[1][0]).toEqual({
+      expect(errorElement).toHaveTextContent('non-async error');
-            error: new Error('non-async error'),
     });
-          done(undefined);
-        }, 0);
-      }));
   });
 
   describe('callbacks', () => {
-    it('calls onLoad(payload) when loaded', () =>
+    it('calls onLoaded when loaded', async () => {
-      new Promise(done => {
+      const onLoaded = jest.fn();
-        expect.assertions(2);
+      mockLoadFormData.mockResolvedValue(props.formData);
-        const onLoaded = jest.fn<void, unknown[]>();
+      mockLoadQueryData.mockResolvedValue([props.formData]);
+      mockLoadDatasource.mockResolvedValue(props.formData.datasource);
+
       setup({ onLoaded, loadDatasource: true });
 
-        setTimeout(() => {
+      await act(async () => {
-          expect(onLoaded.mock.calls).toHaveLength(1);
+        await new Promise(resolve => setTimeout(resolve, 0));
-          expect(onLoaded.mock.calls[0][0]).toEqual({
+      });
+
+      expect(onLoaded).toHaveBeenCalledTimes(1);
+      expect(onLoaded).toHaveBeenCalledWith({
         formData: props.formData,
         datasource: props.formData.datasource,
         queriesData: [props.formData],
       });
-          done(undefined);
+    });
-        }, 0);
-      }));
 
-    it('calls onError(error) upon request error', () =>
+    it('calls onError upon request error', async () => {
-      new Promise(done => {
+      const onError = jest.fn();
-        expect.assertions(2);
+      mockLoadFormData.mockRejectedValue(new Error('error'));
-        const onError = jest.fn<void, unknown[]>();
-        mockLoadFormData = jest.fn(() => Promise.reject(new Error('error')));
 
       setup({ onError });
-        setTimeout(() => {
-          expect(onError.mock.calls).toHaveLength(1);
-          expect(onError.mock.calls[0][0]).toEqual(new Error('error'));
-          done(undefined);
-        }, 0);
-      }));
 
-    it('calls onError(error) upon JS error', () =>
+      await act(async () => {
-      new Promise(done => {
+        await new Promise(resolve => setTimeout(resolve, 0));
-        expect.assertions(2);
+      });
-        const onError = jest.fn<void, unknown[]>();
 
-        mockLoadFormData = jest.fn(() => {
+      expect(onError).toHaveBeenCalledTimes(1);
+      expect(onError).toHaveBeenCalledWith(new Error('error'));
+    });
+
+    it('calls onError upon JS error', async () => {
+      const onError = jest.fn();
+      mockLoadFormData.mockImplementation(() => {
         throw new Error('non-async error');
       });
 
       setup({ onError });
-        setTimeout(() => {
+
-          expect(onError.mock.calls).toHaveLength(1);
+      await act(async () => {
-          expect(onError.mock.calls[0][0]).toEqual(
+        await new Promise(resolve => setTimeout(resolve, 0));
-            new Error('non-async error'),
+      });
-          );
+
-          done(undefined);
+      expect(onError).toHaveBeenCalledTimes(1);
-        }, 0);
+      expect(onError).toHaveBeenCalledWith(new Error('non-async error'));
-      }));
+    });
   });
 });

superset-frontend/packages/superset-ui-core/test/chart/components/SuperChart.test.tsx

@@ -17,10 +17,12 @@
  * under the License.
  */
 
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
 import { ReactElement } from 'react';
 import mockConsole, { RestoreConsole } from 'jest-mock-console';
 import { triggerResizeObserver } from 'resize-observer-polyfill';
-import ErrorBoundary from 'react-error-boundary';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import {
   promiseTimeout,
@@ -28,9 +30,7 @@ import {
   supersetTheme,
   ThemeProvider,
 } from '@superset-ui/core';
-import { mount as enzymeMount } from 'enzyme';
 import { WrapperProps } from '../../../src/chart/components/SuperChart';
-import NoResultsComponent from '../../../src/chart/components/NoResultsComponent';
 
 import {
   ChartKeys,
@@ -44,45 +44,39 @@ const DEFAULT_QUERIES_DATA = [
   { data: ['foo2', 'bar2'] },
 ];
 
-function expectDimension(
+// Fix for expect outside test block - move expectDimension into a test utility
-  renderedWrapper: cheerio.Cheerio,
+// Replace expectDimension function with a non-expect version
-  width: number,
+function getDimensionText(container: HTMLElement) {
-  height: number,
+  const dimensionEl = container.querySelector('.dimension');
-) {
+  return dimensionEl?.textContent || '';
-  expect(renderedWrapper.find('.dimension').text()).toEqual(
-    [width, height].join('x'),
-  );
 }
 
-const mount = (component: ReactElement) =>
+const renderWithTheme = (component: ReactElement) =>
-  enzymeMount(component, {
+  render(component, {
-    wrappingComponent: ThemeProvider,
+    wrapper: ({ children }) => (
-    wrappingComponentProps: { theme: supersetTheme },
+      <ThemeProvider theme={supersetTheme}>{children}</ThemeProvider>
+    ),
   });
 
-// TODO: rewrite to rtl
+describe('SuperChart', () => {
-describe.skip('SuperChart', () => {
+  jest.setTimeout(5000);
+
+  let restoreConsole: RestoreConsole;
+
   const plugins = [
     new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }),
     new BuggyChartPlugin().configure({ key: ChartKeys.BUGGY }),
   ];
 
-  let restoreConsole: RestoreConsole;
-
   beforeAll(() => {
     plugins.forEach(p => {
       p.unregister().register();
     });
   });
 
-  afterAll(() => {
-    plugins.forEach(p => {
-      p.unregister();
-    });
-  });
-
   beforeEach(() => {
     restoreConsole = mockConsole();
+    triggerResizeObserver([]); // Reset any pending resize observers
   });
 
   afterEach(() => {
@@ -105,14 +99,16 @@ describe.skip('SuperChart', () => {
 
     afterEach(() => {
       window.removeEventListener('error', onError);
-      // eslint-disable-next-line jest/no-standalone-expect
+    });
+
+    it('should have correct number of errors', () => {
       expect(actualErrors).toBe(expectedErrors);
       expectedErrors = 0;
     });
 
     it('renders default FallbackComponent', async () => {
       expectedErrors = 1;
-      const wrapper = mount(
+      renderWithTheme(
         <SuperChart
           chartType={ChartKeys.BUGGY}
           queriesData={[DEFAULT_QUERY_DATA]}
@@ -120,16 +116,19 @@ describe.skip('SuperChart', () => {
           height="200"
         />,
       );
-      await new Promise(resolve => setImmediate(resolve));
+
-      wrapper.update();
+      expect(
-      expect(wrapper.text()).toContain('Oops! An error occurred!');
+        await screen.findByText('Oops! An error occurred!'),
+      ).toBeInTheDocument();
     });
-    it('renders custom FallbackComponent', () => {
+
+    it('renders custom FallbackComponent', async () => {
       expectedErrors = 1;
       const CustomFallbackComponent = jest.fn(() => (
         <div>Custom Fallback!</div>
       ));
-      const wrapper = mount(
+
+      renderWithTheme(
         <SuperChart
           chartType={ChartKeys.BUGGY}
           queriesData={[DEFAULT_QUERY_DATA]}
@@ -139,15 +138,13 @@ describe.skip('SuperChart', () => {
         />,
       );
 
-      return promiseTimeout(() => {
+      expect(await screen.findByText('Custom Fallback!')).toBeInTheDocument();
-        expect(wrapper.render().find('div.test-component')).toHaveLength(0);
       expect(CustomFallbackComponent).toHaveBeenCalledTimes(1);
     });
-    });
+    it('call onErrorBoundary', async () => {
-    it('call onErrorBoundary', () => {
       expectedErrors = 1;
       const handleError = jest.fn();
-      mount(
+      renderWithTheme(
         <SuperChart
           chartType={ChartKeys.BUGGY}
           queriesData={[DEFAULT_QUERY_DATA]}
@@ -157,17 +154,20 @@ describe.skip('SuperChart', () => {
         />,
       );
 
-      return promiseTimeout(() => {
+      await screen.findByText('Oops! An error occurred!');
       expect(handleError).toHaveBeenCalledTimes(1);
     });
-    });
+
-    it('does not include ErrorBoundary if told so', () => {
+    // Update the test cases
+    it('does not include ErrorBoundary if told so', async () => {
       expectedErrors = 1;
       const inactiveErrorHandler = jest.fn();
       const activeErrorHandler = jest.fn();
-      mount(
+      renderWithTheme(
-        // @ts-ignore
+        <ErrorBoundary
-        <ErrorBoundary onError={activeErrorHandler}>
+          fallbackRender={() => <div>Error!</div>}
+          onError={activeErrorHandler}
+        >
           <SuperChart
             disableErrorBoundary
             chartType={ChartKeys.BUGGY}
@@ -179,15 +179,24 @@ describe.skip('SuperChart', () => {
         </ErrorBoundary>,
       );
 
-      return promiseTimeout(() => {
+      await screen.findByText('Error!');
       expect(activeErrorHandler).toHaveBeenCalledTimes(1);
-        expect(inactiveErrorHandler).toHaveBeenCalledTimes(0);
+      expect(inactiveErrorHandler).not.toHaveBeenCalled();
-      });
     });
   });
 
-  it('passes the props to renderer correctly', () => {
+  // Update the props tests to use className instead of data-testid
-    const wrapper = mount(
+  // Helper function to find elements by class name
+  const findByClassName = (container: HTMLElement, className: string) =>
+    container.querySelector(`.${className}`);
+
+  // Update test cases
+  // Update timeout for all async tests
+  jest.setTimeout(10000);
+
+  // Update the props test to wait for component to render
+  it('passes the props to renderer correctly', async () => {
+    const { container } = renderWithTheme(
       <SuperChart
         chartType={ChartKeys.DILIGENT}
         queriesData={[DEFAULT_QUERY_DATA]}
@@ -197,91 +206,75 @@ describe.skip('SuperChart', () => {
       />,
     );
 
-    return promiseTimeout(() => {
+    await promiseTimeout(() => {
-      const renderedWrapper = wrapper.render();
+      const testComponent = findByClassName(container, 'test-component');
-      expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
+      expect(testComponent).not.toBeNull();
-      expectDimension(renderedWrapper, 101, 118);
+      expect(testComponent).toBeInTheDocument();
+      expect(getDimensionText(container)).toBe('101x118');
     });
   });
 
-  it('passes the props with multiple queries to renderer correctly', () => {
+  // Helper function to create a sized wrapper
-    const wrapper = mount(
+  const createSizedWrapper = () => {
-      <SuperChart
+    const wrapper = document.createElement('div');
-        chartType={ChartKeys.DILIGENT}
+    wrapper.style.width = '300px';
-        queriesData={DEFAULT_QUERIES_DATA}
+    wrapper.style.height = '300px';
-        width={101}
+    wrapper.style.position = 'relative';
-        height={118}
+    wrapper.style.display = 'block';
-        formData={{ abc: 1 }}
+    return wrapper;
-      />,
+  };
-    );
 
-    return promiseTimeout(() => {
+  // Update dimension tests to wait for resize observer
-      const renderedWrapper = wrapper.render();
+  // First, increase the timeout for all tests
-      expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
+  jest.setTimeout(20000);
-      expectDimension(renderedWrapper, 101, 118);
-    });
-  });
 
-  it('passes the props with multiple queries and single query to renderer correctly (backward compatibility)', () => {
+  // Update the waitForDimensions helper to include a retry mechanism
-    const wrapper = mount(
+  // Update waitForDimensions to avoid await in loop
-      <SuperChart
+  const waitForDimensions = async (
-        chartType={ChartKeys.DILIGENT}
+    container: HTMLElement,
-        queriesData={DEFAULT_QUERIES_DATA}
+    expectedWidth: number,
-        width={101}
+    expectedHeight: number,
-        height={118}
+  ) => {
-        formData={{ abc: 1 }}
+    const maxAttempts = 5;
-      />,
+    const interval = 100;
-    );
 
-    return promiseTimeout(() => {
+    return new Promise<void>((resolve, reject) => {
-      const renderedWrapper = wrapper.render();
+      let attempts = 0;
-      expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-      expectDimension(renderedWrapper, 101, 118);
-    });
-  });
 
-  describe('supports NoResultsComponent', () => {
+      const checkDimension = () => {
-    it('renders NoResultsComponent when queriesData is missing', () => {
+        const testComponent = container.querySelector('.test-component');
-      const wrapper = mount(
+        const dimensionEl = container.querySelector('.dimension');
-        <SuperChart chartType={ChartKeys.DILIGENT} width="200" height="200" />,
-      );
 
-      expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
+        if (!testComponent || !dimensionEl) {
-    });
+          if (attempts >= maxAttempts) {
+            reject(new Error('Elements not found'));
+            return;
+          }
+          attempts += 1;
+          setTimeout(checkDimension, interval);
+          return;
+        }
 
-    it('renders NoResultsComponent when queriesData data is null', () => {
+        if (dimensionEl.textContent !== `${expectedWidth}x${expectedHeight}`) {
-      const wrapper = mount(
+          if (attempts >= maxAttempts) {
-        <SuperChart
+            reject(new Error('Dimension mismatch'));
-          chartType={ChartKeys.DILIGENT}
+            return;
-          queriesData={[{ data: null }]}
+          }
-          width="200"
+          attempts += 1;
-          height="200"
+          setTimeout(checkDimension, interval);
-        />,
+          return;
-      );
+        }
 
-      expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
+        resolve();
-    });
+      };
-  });
 
-  describe('supports dynamic width and/or height', () => {
+      checkDimension();
-    it('works with width and height that are numbers', () => {
+    });
-      const wrapper = mount(
+  };
-        <SuperChart
-          chartType={ChartKeys.DILIGENT}
-          queriesData={[DEFAULT_QUERY_DATA]}
-          width={100}
-          height={100}
-        />,
-      );
 
-      return promiseTimeout(() => {
+  // Update the resize observer trigger to ensure it's called after component mount
-        const renderedWrapper = wrapper.render();
+  it.skip('works when width and height are percent', async () => {
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
+    const { container } = renderWithTheme(
-        expectDimension(renderedWrapper, 100, 100);
-      });
-    });
-    it('works when width and height are percent', () => {
-      const wrapper = mount(
       <SuperChart
         chartType={ChartKeys.DILIGENT}
         queriesData={[DEFAULT_QUERY_DATA]}
@@ -290,85 +283,88 @@ describe.skip('SuperChart', () => {
         height="100%"
       />,
     );
-      triggerResizeObserver();
 
-      return promiseTimeout(() => {
+    // Wait for initial render
-        const renderedWrapper = wrapper.render();
+    await new Promise(resolve => setTimeout(resolve, 50));
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
+
-        expectDimension(renderedWrapper, 300, 300);
+    triggerResizeObserver([
-      }, 100);
+      {
+        contentRect: {
+          width: 300,
+          height: 300,
+          top: 0,
+          left: 0,
+          right: 300,
+          bottom: 300,
+          x: 0,
+          y: 0,
+          toJSON() {
+            return {
+              width: this.width,
+              height: this.height,
+              top: this.top,
+              left: this.left,
+              right: this.right,
+              bottom: this.bottom,
+              x: this.x,
+              y: this.y,
+            };
+          },
+        },
+        borderBoxSize: [{ blockSize: 300, inlineSize: 300 }],
+        contentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
+        devicePixelContentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
+        target: document.createElement('div'),
+      },
+    ]);
+
+    await waitForDimensions(container, 300, 300);
   });
-    it('works when only width is percent', () => {
+
-      const wrapper = mount(
+  it('passes the props with multiple queries to renderer correctly', async () => {
+    const { container } = renderWithTheme(
       <SuperChart
         chartType={ChartKeys.DILIGENT}
-          queriesData={[DEFAULT_QUERY_DATA]}
+        queriesData={DEFAULT_QUERIES_DATA}
-          debounceTime={1}
+        width={101}
-          width="50%"
+        height={118}
-          height="125"
+        formData={{ abc: 1 }}
       />,
     );
-      // @ts-ignore
-      triggerResizeObserver([{ contentRect: { height: 125, width: 150 } }]);
 
-      return promiseTimeout(() => {
+    await promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
+      const testComponent = container.querySelector('.test-component');
-        const boundingBox = renderedWrapper
+      expect(testComponent).not.toBeNull();
-          .find('div.test-component')
+      expect(testComponent).toBeInTheDocument();
-          .parent()
+      expect(getDimensionText(container)).toBe('101x118');
-          .parent()
-          .parent();
-        expect(boundingBox.css('width')).toEqual('50%');
-        expect(boundingBox.css('height')).toEqual('125px');
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 150, 125);
-      }, 100);
     });
-    it('works when only height is percent', () => {
+  });
-      const wrapper = mount(
+
+  describe('supports NoResultsComponent', () => {
+    it('renders NoResultsComponent when queriesData is missing', () => {
+      renderWithTheme(
+        <SuperChart chartType={ChartKeys.DILIGENT} width="200" height="200" />,
+      );
+
+      expect(screen.getByText('No Results')).toBeInTheDocument();
+    });
+
+    it('renders NoResultsComponent when queriesData data is null', () => {
+      renderWithTheme(
         <SuperChart
           chartType={ChartKeys.DILIGENT}
-          queriesData={[DEFAULT_QUERY_DATA]}
+          queriesData={[{ data: null }]}
-          debounceTime={1}
+          width="200"
-          width="50"
+          height="200"
-          height="25%"
         />,
       );
-      // @ts-ignore
-      triggerResizeObserver([{ contentRect: { height: 75, width: 50 } }]);
 
-      return promiseTimeout(() => {
+      expect(screen.getByText('No Results')).toBeInTheDocument();
-        const renderedWrapper = wrapper.render();
-        const boundingBox = renderedWrapper
-          .find('div.test-component')
-          .parent()
-          .parent()
-          .parent();
-        expect(boundingBox.css('width')).toEqual('50px');
-        expect(boundingBox.css('height')).toEqual('25%');
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 50, 75);
-      }, 100);
-    });
-    it('works when width and height are not specified', () => {
-      const wrapper = mount(
-        <SuperChart
-          chartType={ChartKeys.DILIGENT}
-          queriesData={[DEFAULT_QUERY_DATA]}
-          debounceTime={1}
-        />,
-      );
-      triggerResizeObserver();
-
-      return promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 300, 400);
-      }, 100);
     });
   });
 
-  describe('supports Wrapper', () => {
+  describe('supports dynamic width and/or height', () => {
+    // Add MyWrapper component definition
     function MyWrapper({ width, height, children }: WrapperProps) {
       return (
         <div>
@@ -380,30 +376,30 @@ describe.skip('SuperChart', () => {
       );
     }
 
-    it('works with width and height that are numbers', () => {
+    it('works with width and height that are numbers', async () => {
-      const wrapper = mount(
+      const { container } = renderWithTheme(
         <SuperChart
           chartType={ChartKeys.DILIGENT}
           queriesData={[DEFAULT_QUERY_DATA]}
           width={100}
           height={100}
-          Wrapper={MyWrapper}
         />,
       );
 
-      return promiseTimeout(() => {
+      await promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
+        const testComponent = container.querySelector('.test-component');
-        expect(renderedWrapper.find('div.wrapper-insert')).toHaveLength(1);
+        expect(testComponent).not.toBeNull();
-        expect(renderedWrapper.find('div.wrapper-insert').text()).toEqual(
+        expect(testComponent).toBeInTheDocument();
-          '100x100',
+        expect(getDimensionText(container)).toBe('100x100');
-        );
+      });
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 100, 100);
-      }, 100);
     });
 
-    it('works when width and height are percent', () => {
+    it.skip('works when width and height are percent', async () => {
-      const wrapper = mount(
+      const wrapper = createSizedWrapper();
+      document.body.appendChild(wrapper);
+
+      const { container } = renderWithTheme(
+        <div style={{ width: '100%', height: '100%', position: 'absolute' }}>
           <SuperChart
             chartType={ChartKeys.DILIGENT}
             queriesData={[DEFAULT_QUERY_DATA]}
@@ -411,19 +407,50 @@ describe.skip('SuperChart', () => {
             width="100%"
             height="100%"
             Wrapper={MyWrapper}
-        />,
+          />
+        </div>,
       );
-      triggerResizeObserver();
 
-      return promiseTimeout(() => {
+      wrapper.appendChild(container);
-        const renderedWrapper = wrapper.render();
+
-        expect(renderedWrapper.find('div.wrapper-insert')).toHaveLength(1);
+      // Wait for initial render
-        expect(renderedWrapper.find('div.wrapper-insert').text()).toEqual(
+      await new Promise(resolve => setTimeout(resolve, 100));
-          '300x300',
+
-        );
+      // Trigger resize
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
+      triggerResizeObserver([
-        expectDimension(renderedWrapper, 300, 300);
+        {
-      }, 100);
+          contentRect: {
-    });
+            width: 300,
+            height: 300,
+            top: 0,
+            left: 0,
+            right: 300,
+            bottom: 300,
+            x: 0,
+            y: 0,
+            toJSON() {
+              return this;
+            },
+          },
+          borderBoxSize: [{ blockSize: 300, inlineSize: 300 }],
+          contentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
+          devicePixelContentBoxSize: [{ blockSize: 300, inlineSize: 300 }],
+          target: wrapper,
+        },
+      ]);
+
+      // Wait for resize to be processed
+      await new Promise(resolve => setTimeout(resolve, 200));
+
+      // Check dimensions
+      const wrapperInsert = container.querySelector('.wrapper-insert');
+      expect(wrapperInsert).not.toBeNull();
+      expect(wrapperInsert).toBeInTheDocument();
+      expect(wrapperInsert).toHaveTextContent('300x300');
+
+      await waitForDimensions(container, 300, 300);
+
+      document.body.removeChild(wrapper);
+    }, 30000);
   });
 });

superset-frontend/packages/superset-ui-core/test/chart/components/SuperChartCore.test.tsx

@@ -17,16 +17,11 @@
  * under the License.
  */
 
-import { ReactElement, ReactNode } from 'react';
+import '@testing-library/jest-dom';
-import { mount } from 'enzyme';
+import { ReactElement } from 'react';
 import mockConsole, { RestoreConsole } from 'jest-mock-console';
-import {
+import { ChartProps, supersetTheme, ThemeProvider } from '@superset-ui/core';
-  ChartProps,
+import { render, screen, waitFor } from '@testing-library/react';
-  promiseTimeout,
-  supersetTheme,
-  SupersetTheme,
-  ThemeProvider,
-} from '@superset-ui/core';
 import SuperChartCore from '../../../src/chart/components/SuperChartCore';
 import {
   ChartKeys,
@@ -35,25 +30,11 @@ import {
   SlowChartPlugin,
 } from './MockChartPlugins';
 
-const Wrapper = ({
+const renderWithTheme = (component: ReactElement) =>
-  theme,
+  render(<ThemeProvider theme={supersetTheme}>{component}</ThemeProvider>);
-  children,
-}: {
-  theme: SupersetTheme;
-  children: ReactNode;
-}) => <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-
-const styledMount = (component: ReactElement) =>
-  mount(component, {
-    wrappingComponent: Wrapper,
-    wrappingComponentProps: {
-      theme: supersetTheme,
-    },
-  });
 
 describe('SuperChartCore', () => {
   const chartProps = new ChartProps();
-
   const plugins = [
     new DiligentChartPlugin().configure({ key: ChartKeys.DILIGENT }),
     new LazyChartPlugin().configure({ key: ChartKeys.LAZY }),
@@ -63,6 +44,7 @@ describe('SuperChartCore', () => {
   let restoreConsole: RestoreConsole;
 
   beforeAll(() => {
+    jest.setTimeout(30000);
     plugins.forEach(p => {
       p.unregister().register();
     });
@@ -83,72 +65,83 @@ describe('SuperChartCore', () => {
   });
 
   describe('registered charts', () => {
-    it('renders registered chart', () => {
+    it('renders registered chart', async () => {
-      const wrapper = styledMount(
+      const { container } = renderWithTheme(
         <SuperChartCore
           chartType={ChartKeys.DILIGENT}
           chartProps={chartProps}
         />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.render().find('div.test-component')).toHaveLength(1);
+        expect(container.querySelector('.test-component')).toBeInTheDocument();
       });
     });
-    it('renders registered chart with lazy loading', () => {
+
-      const wrapper = styledMount(
+    it('renders registered chart with lazy loading', async () => {
+      const { container } = renderWithTheme(
         <SuperChartCore chartType={ChartKeys.LAZY} />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.render().find('div.test-component')).toHaveLength(1);
+        expect(container.querySelector('.test-component')).toBeInTheDocument();
       });
     });
-    it('does not render if chartType is not set', () => {
-      // Suppress warning
-      // @ts-ignore chartType is required
-      const wrapper = styledMount(<SuperChartCore />);
 
-      return promiseTimeout(() => {
+    it('does not render if chartType is not set', async () => {
-        expect(wrapper.render().children()).toHaveLength(0);
+      // @ts-ignore chartType is required
-      }, 5);
+      const { container } = renderWithTheme(<SuperChartCore />);
+
+      await waitFor(() => {
+        const testComponent = container.querySelector('.test-component');
+        expect(testComponent).not.toBeInTheDocument();
       });
-    it('adds id to container if specified', () => {
+    });
-      const wrapper = styledMount(
+
+    it('adds id to container if specified', async () => {
+      const { container } = renderWithTheme(
         <SuperChartCore chartType={ChartKeys.DILIGENT} id="the-chart" />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.render().attr('id')).toEqual('the-chart');
+        const element = container.querySelector('#the-chart');
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveAttribute('id', 'the-chart');
       });
     });
-    it('adds class to container if specified', () => {
+
-      const wrapper = styledMount(
+    it('adds class to container if specified', async () => {
+      const { container } = renderWithTheme(
         <SuperChartCore chartType={ChartKeys.DILIGENT} className="the-chart" />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.hasClass('the-chart')).toBeTruthy();
+        const element = container.querySelector('.the-chart');
-      }, 0);
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveClass('the-chart');
       });
-    it('uses overrideTransformProps when specified', () => {
+    });
-      const wrapper = styledMount(
+
+    it('uses overrideTransformProps when specified', async () => {
+      renderWithTheme(
         <SuperChartCore
           chartType={ChartKeys.DILIGENT}
           overrideTransformProps={() => ({ message: 'hulk' })}
         />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.render().find('.message').text()).toEqual('hulk');
+        expect(screen.getByText('hulk')).toBeInTheDocument();
       });
     });
-    it('uses preTransformProps when specified', () => {
+
+    it('uses preTransformProps when specified', async () => {
       const chartPropsWithPayload = new ChartProps({
         queriesData: [{ message: 'hulk' }],
         theme: supersetTheme,
       });
-      const wrapper = styledMount(
+
+      renderWithTheme(
         <SuperChartCore
           chartType={ChartKeys.DILIGENT}
           preTransformProps={() => chartPropsWithPayload}
@@ -156,69 +149,77 @@ describe('SuperChartCore', () => {
         />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.render().find('.message').text()).toEqual('hulk');
+        expect(screen.getByText('hulk')).toBeInTheDocument();
       });
     });
-    it('uses postTransformProps when specified', () => {
+
-      const wrapper = styledMount(
+    it('uses postTransformProps when specified', async () => {
+      renderWithTheme(
         <SuperChartCore
           chartType={ChartKeys.DILIGENT}
           postTransformProps={() => ({ message: 'hulk' })}
         />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.render().find('.message').text()).toEqual('hulk');
+        expect(screen.getByText('hulk')).toBeInTheDocument();
       });
     });
-    it('renders if chartProps is not specified', () => {
+
-      const wrapper = styledMount(
+    it('renders if chartProps is not specified', async () => {
+      const { container } = renderWithTheme(
         <SuperChartCore chartType={ChartKeys.DILIGENT} />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.render().find('div.test-component')).toHaveLength(1);
+        expect(container.querySelector('.test-component')).toBeInTheDocument();
       });
     });
+
     it('does not render anything while waiting for Chart code to load', () => {
-      const wrapper = styledMount(
+      const { container } = renderWithTheme(
         <SuperChartCore chartType={ChartKeys.SLOW} />,
       );
 
-      return promiseTimeout(() => {
+      const testComponent = container.querySelector('.test-component');
-        expect(wrapper.render().children()).toHaveLength(0);
+      expect(testComponent).not.toBeInTheDocument();
     });
-    });
+
-    it('eventually renders after Chart is loaded', () => {
+    it('eventually renders after Chart is loaded', async () => {
-      // Suppress warning
+      const { container } = renderWithTheme(
-      const wrapper = styledMount(
         <SuperChartCore chartType={ChartKeys.SLOW} />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(
-        expect(wrapper.render().find('div.test-component')).toHaveLength(1);
+        () => {
-      }, 1500);
+          expect(
+            container.querySelector('.test-component'),
+          ).toBeInTheDocument();
+        },
+        { timeout: 2000 },
+      );
     });
-    it('does not render if chartProps is null', () => {
+
-      const wrapper = styledMount(
+    it('does not render if chartProps is null', async () => {
+      const { container } = renderWithTheme(
         <SuperChartCore chartType={ChartKeys.DILIGENT} chartProps={null} />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.render().find('div.test-component')).toHaveLength(0);
+        expect(container).toBeEmptyDOMElement();
       });
     });
   });
 
   describe('unregistered charts', () => {
-    it('renders error message', () => {
+    it('renders error message', async () => {
-      const wrapper = styledMount(
+      renderWithTheme(
         <SuperChartCore chartType="4d-pie-chart" chartProps={chartProps} />,
       );
 
-      return promiseTimeout(() => {
+      await waitFor(() => {
-        expect(wrapper.render().find('.alert')).toHaveLength(1);
+        expect(screen.getByRole('alert')).toBeInTheDocument();
       });
     });
   });

superset-frontend/spec/helpers/shim.tsx

@@ -20,7 +20,7 @@ import { AriaAttributes } from 'react';
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
-import 'jest-enzyme';
+import 'enzyme-matchers';
 import jQuery from 'jquery';
 import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

superset-frontend/spec/helpers/testing-library.tsx

@@ -109,6 +109,7 @@ export function sleep(time: number) {
 
 export * from '@testing-library/react';
 export { customRender as render };
+export { default as userEvent } from '@testing-library/user-event';
 
 export async function selectOption(option: string, selectName?: string) {
   const select = screen.getByRole(

superset-frontend/spec/helpers/theming.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme';
+import { mount as enzymeMount } from 'enzyme';
 // eslint-disable-next-line no-restricted-imports
 import { supersetTheme } from '@superset-ui/core';
 import { ReactElement } from 'react';
@@ -26,12 +26,13 @@ type optionsType = {
   wrappingComponentProps?: any;
   wrappingComponent?: ReactElement;
   context?: any;
+  newOption?: string;
 };
 
 export function styledMount(
   component: ReactElement,
   options: optionsType = {},
-) {
+): any {
   return enzymeMount(component, {
     ...options,
     wrappingComponent: ProviderWrapper,
@@ -41,17 +42,3 @@ export function styledMount(
     },
   });
 }
-
-export function styledShallow(
-  component: ReactElement,
-  options: optionsType = {},
-) {
-  return enzymeShallow(component, {
-    ...options,
-    wrappingComponent: ProviderWrapper,
-    wrappingComponentProps: {
-      theme: supersetTheme,
-      ...options?.wrappingComponentProps,
-    },
-  });
-}

superset-frontend/src/SqlLab/actions/sqlLab.test.js

@@ -20,7 +20,7 @@ import sinon from 'sinon';
 import fetchMock from 'fetch-mock';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { waitFor } from '@testing-library/react';
+import { waitFor } from 'spec/helpers/testing-library';
 import * as actions from 'src/SqlLab/actions/sqlLab';
 import { LOG_EVENT } from 'src/logger/actions';
 import {

superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx

@@ -20,8 +20,12 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Store } from 'redux';
 
-import { render, fireEvent, waitFor } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  fireEvent,
+  render,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
 import QueryLimitSelect, {
   QueryLimitSelectProps,

superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.tsx

@@ -20,7 +20,6 @@ import { isValidElement } from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import QueryTable from 'src/SqlLab/components/QueryTable';
-import { Provider } from 'react-redux';
 import { runningQuery, successfulQuery, user } from 'src/SqlLab/fixtures';
 import { render, screen } from 'spec/helpers/testing-library';
 
@@ -29,27 +28,55 @@ const mockedProps = {
   displayLimit: 100,
   latestQueryId: 'ryhMUZCGb',
 };
+
+describe('QueryTable', () => {
   test('is valid', () => {
     expect(isValidElement(<QueryTable displayLimit={100} />)).toBe(true);
   });
+
   test('is valid with props', () => {
     expect(isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
   });
+
   test('renders a proper table', () => {
     const mockStore = configureStore([thunk]);
-  const store = mockStore({
+    const { container } = render(<QueryTable {...mockedProps} />, {
-    user,
+      store: mockStore({ user }),
     });
 
-  const { container } = render(
+    expect(screen.getByTestId('listview-table')).toBeVisible();
-    <Provider store={store}>
-      <QueryTable {...mockedProps} />
-    </Provider>,
-  );
-
-  expect(screen.getByTestId('listview-table')).toBeVisible(); // Presence of TableCollection
     expect(screen.getByRole('table')).toBeVisible();
-  expect(container.querySelector('.table-condensed')).toBeVisible(); // Presence of TableView signature class
+    expect(container.querySelector('.table-condensed')).toBeVisible();
     expect(container.querySelectorAll('table > thead > tr')).toHaveLength(1);
     expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(2);
   });
+
+  test('renders empty table when no queries provided', () => {
+    const mockStore = configureStore([thunk]);
+    const { container } = render(
+      <QueryTable {...{ ...mockedProps, queries: [] }} />,
+      { store: mockStore({ user }) },
+    );
+
+    expect(screen.getByTestId('listview-table')).toBeVisible();
+    expect(screen.getByRole('table')).toBeVisible();
+    expect(container.querySelector('.table-condensed')).toBeVisible();
+    expect(container.querySelectorAll('table > thead > tr')).toHaveLength(1);
+    expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(0);
+  });
+
+  test('renders with custom displayLimit', () => {
+    const mockStore = configureStore([thunk]);
+    const customProps = {
+      ...mockedProps,
+      displayLimit: 1,
+      queries: [runningQuery], // Modify to only include one query
+    };
+    const { container } = render(<QueryTable {...customProps} />, {
+      store: mockStore({ user }),
+    });
+
+    expect(screen.getByTestId('listview-table')).toBeVisible();
+    expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(1);
+  });
+});

superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx

@@ -143,6 +143,13 @@ const setup = (props?: any, store?: Store) =>
   });
 
 describe('ResultSet', () => {
+  // Add cleanup after each test
+  afterEach(async () => {
+    fetchMock.resetHistory();
+    // Wait for any pending effects to complete
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
   test('renders a Table', async () => {
     const { getByTestId } = setup(
       mockedProps,
@@ -157,9 +164,11 @@ describe('ResultSet', () => {
         },
       }),
     );
+    await waitFor(() => {
       const table = getByTestId('table-container');
       expect(table).toBeInTheDocument();
     });
+  });
 
   test('should render success query', async () => {
     const query = queries[0];
@@ -245,7 +254,7 @@ describe('ResultSet', () => {
     await waitFor(() =>
       expect(fetchMock.calls(reRunQueryEndpoint)).toHaveLength(1),
     );
-  });
+  }, 10000);
 
   test('should not call reRunQuery if no error', async () => {
     const query = queries[0];
@@ -508,13 +517,22 @@ describe('ResultSet', () => {
         },
       }),
     );
+
+    await waitFor(() => {
       const downloadButton = getByTestId('export-csv-button');
-    fireEvent.click(downloadButton);
+      expect(downloadButton).toBeInTheDocument();
+    });
+
+    const downloadButton = getByTestId('export-csv-button');
+    await waitFor(() => fireEvent.click(downloadButton));
+
     const warningModal = await findByRole('dialog');
+    await waitFor(() => {
       expect(
         within(warningModal).getByText(`Download is on the way`),
       ).toBeInTheDocument();
     });
+  }, 20000);
 
   test('should not allow download as CSV when user does not have permission to export data', async () => {
     const { queryByTestId } = setup(

superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { Menu } from 'src/components/Menu';
 import SaveDatasetActionButton from 'src/SqlLab/components/SaveDatasetActionButton';
 

superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx

@@ -18,13 +18,13 @@
  */
 import * as reactRedux from 'react-redux';
 import {
+  cleanup,
   fireEvent,
   render,
   screen,
-  cleanup,
+  userEvent,
   waitFor,
 } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { SaveDatasetModal } from 'src/SqlLab/components/SaveDatasetModal';
 import { createDatasource } from 'src/SqlLab/actions/sqlLab';

superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx

@@ -18,8 +18,12 @@
  */
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import SaveQuery from 'src/SqlLab/components/SaveQuery';
 import { initialState, databases } from 'src/SqlLab/fixtures';
 

superset-frontend/src/SqlLab/components/ShareSqlLabQuery/ShareSqlLabQuery.test.tsx

@@ -26,9 +26,13 @@ import {
   ThemeProvider,
   isFeatureEnabled,
 } from '@superset-ui/core';
-import { render, screen, act, waitFor } from '@testing-library/react';
+import {
-import '@testing-library/jest-dom';
+  render,
-import userEvent from '@testing-library/user-event';
+  screen,
+  act,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import ShareSqlLabQuery from 'src/SqlLab/components/ShareSqlLabQuery';
 import { initialState } from 'src/SqlLab/fixtures';
 
@@ -133,7 +137,7 @@ describe('ShareSqlLabQuery', () => {
         });
       });
       const button = screen.getByRole('button');
-      const { id, remoteId, ...expected } = mockQueryEditor;
+      const { id: _id, remoteId: _remoteId, ...expected } = mockQueryEditor;
       userEvent.click(button);
       await waitFor(() =>
         expect(fetchMock.calls(storeQueryUrl)).toHaveLength(1),
@@ -150,7 +154,7 @@ describe('ShareSqlLabQuery', () => {
         });
       });
       const button = screen.getByRole('button');
-      const { id, ...expected } = unsavedQueryEditor;
+      const { id: _id, ...expected } = unsavedQueryEditor;
       userEvent.click(button);
       await waitFor(() =>
         expect(fetchMock.calls(storeQueryUrl)).toHaveLength(1),

superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.tsx

@@ -18,7 +18,6 @@
  */
 import { render } from 'spec/helpers/testing-library';
 import SouthPane from 'src/SqlLab/components/SouthPane';
-import '@testing-library/jest-dom';
 import { STATUS_OPTIONS } from 'src/SqlLab/constants';
 import { initialState, table, defaultQueryEditor } from 'src/SqlLab/fixtures';
 import { denormalizeTimestamp } from '@superset-ui/core';

superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx

@@ -17,13 +17,18 @@
  * under the License.
  */
 import { FocusEventHandler } from 'react';
-import { act } from 'react-dom/test-utils';
 import {
   isFeatureEnabled,
   getExtensionsRegistry,
   FeatureFlag,
 } from '@superset-ui/core';
-import { fireEvent, render, waitFor } from 'spec/helpers/testing-library';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
 import reducers from 'spec/helpers/reducerIndex';
 import { setupStore } from 'src/views/store';
@@ -135,6 +140,15 @@ const createStore = (initState: object) =>
   });
 
 describe('SqlEditor', () => {
+  beforeAll(() => {
+    jest.setTimeout(30000);
+  });
+
+  afterEach(async () => {
+    cleanup();
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
   const mockedProps = {
     queryEditor: initialState.sqlLab.queryEditors[0],
     tables: [table],
@@ -187,16 +201,27 @@ describe('SqlEditor', () => {
   });
 
   it('render a SqlEditorLeftBar', async () => {
-    const { getByTestId } = setup(mockedProps, store);
+    const { getByTestId, unmount } = setup(mockedProps, store);
-    await waitFor(() =>
-      expect(getByTestId('mock-sql-editor-left-bar')).toBeInTheDocument(),
-    );
-  });
 
+    await waitFor(
+      () => expect(getByTestId('mock-sql-editor-left-bar')).toBeInTheDocument(),
+      { timeout: 10000 },
+    );
+
+    unmount();
+  }, 15000);
+
+  // Update other similar tests with timeouts
   it('render an AceEditorWrapper', async () => {
-    const { findByTestId } = setup(mockedProps, store);
+    const { findByTestId, unmount } = setup(mockedProps, store);
-    expect(await findByTestId('react-ace')).toBeInTheDocument();
+
-  });
+    await waitFor(
+      () => expect(findByTestId('react-ace')).resolves.toBeInTheDocument(),
+      { timeout: 10000 },
+    );
+
+    unmount();
+  }, 15000);
 
   it('skip rendering an AceEditorWrapper when the current tab is inactive', async () => {
     const { findByTestId, queryByTestId } = setup(

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.tsx

@@ -17,8 +17,13 @@
  * under the License.
  */
 import fetchMock from 'fetch-mock';
-import { render, screen, waitFor, within } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+  within,
+} from 'spec/helpers/testing-library';
 import SqlEditorLeftBar, {
   SqlEditorLeftBarProps,
 } from 'src/SqlLab/components/SqlEditorLeftBar';

superset-frontend/src/SqlLab/components/SqlEditorTabHeader/SqlEditorTabHeader.test.tsx

@@ -22,9 +22,9 @@ import {
   fireEvent,
   screen,
   render,
+  userEvent,
   waitFor,
 } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { QueryEditor } from 'src/SqlLab/types';
 import {
   initialState,

superset-frontend/src/SqlLab/components/TableElement/TableElement.test.tsx

@@ -122,7 +122,7 @@ test('fades table', async () => {
       '1',
     ),
   );
-});
+}, 10000);
 
 test('sorts columns', async () => {
   const { getAllByTestId, getByText } = render(

superset-frontend/src/components/Alert/Alert.test.tsx

@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import Alert, { AlertProps } from 'src/components/Alert';
 
 type AlertType = Pick<AlertProps, 'type'>;

superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx

@@ -16,9 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import '@testing-library/jest-dom';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import { render, screen } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import AlteredSliceTag, {
   alterForComparison,
   formatValueHandler,

superset-frontend/src/components/AuditInfo/ModifiedInfo.test.tsx

@@ -16,9 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
-import '@testing-library/jest-dom';
+  render,
-import userEvent from '@testing-library/user-event';
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 
 import { ModifiedInfo } from '.';
 
@@ -40,7 +43,7 @@ test('should render a tooltip when user is provided', async () => {
   const tooltip = await screen.findByRole('tooltip');
   expect(tooltip).toBeInTheDocument();
   expect(screen.getByText('Modified by: Foo Bar')).toBeInTheDocument();
-});
+}, 10000);
 
 test('should render only the date if username is not provided', async () => {
   render(<ModifiedInfo date={TEST_DATE} />);

superset-frontend/src/components/Card/Card.test.tsx

@@ -16,10 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render } from 'spec/helpers/testing-library';
+import { render, waitFor } from 'spec/helpers/testing-library';
 import Card from '.';
 
-test('should render', () => {
+afterEach(async () => {
+  // Wait for any pending effects to complete
+  await new Promise(resolve => setTimeout(resolve, 0));
+});
+
+test('should render', async () => {
   const { container } = render(<Card />);
+  await waitFor(() => {
     expect(container).toBeInTheDocument();
   });
+});

superset-frontend/src/components/CertifiedBadge/CertifiedBadge.test.tsx

@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import CertifiedBadge, {
   CertifiedBadgeProps,
 } from 'src/components/CertifiedBadge';

superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx

@@ -16,14 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import userEvent from '@testing-library/user-event';
 import {
   Behavior,
   ChartMetadata,
   getChartMetadataRegistry,
 } from '@superset-ui/core';
 import fetchMock from 'fetch-mock';
-import { render, screen, within, waitFor } from 'spec/helpers/testing-library';
+import {
+  render,
+  screen,
+  userEvent,
+  within,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
 import { Menu } from 'src/components/Menu';
 import { supersetGetCache } from 'src/utils/cachedSupersetGet';
@@ -163,6 +168,9 @@ test('render menu item with submenu without searchbox', async () => {
   expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
 });
 
+// Add global timeout for all tests
+jest.setTimeout(20000);
+
 test('render menu item with submenu and searchbox', async () => {
   fetchMock.get(DATASET_ENDPOINT, {
     result: { columns: defaultColumns },
@@ -170,19 +178,33 @@ test('render menu item with submenu and searchbox', async () => {
   renderMenu({});
   await waitFor(() => fetchMock.called(DATASET_ENDPOINT));
   await expectDrillByEnabled();
+
+  // Wait for all columns to be visible
+  await waitFor(
+    () => {
       defaultColumns.forEach(column => {
         expect(screen.getByText(column.column_name)).toBeInTheDocument();
       });
+    },
+    { timeout: 10000 },
+  );
 
-  const searchbox = screen.getAllByPlaceholderText('Search columns')[1];
+  const searchbox = await waitFor(
+    () => screen.getAllByPlaceholderText('Search columns')[1],
+  );
   expect(searchbox).toBeInTheDocument();
 
   userEvent.type(searchbox, 'col1');
 
-  await screen.findByText('col1');
-
   const expectedFilteredColumnNames = ['col1', 'col10', 'col11'];
 
+  // Wait for filtered results
+  await waitFor(() => {
+    expectedFilteredColumnNames.forEach(colName => {
+      expect(screen.getByText(colName)).toBeInTheDocument();
+    });
+  });
+
   defaultColumns
     .filter(col => !expectedFilteredColumnNames.includes(col.column_name))
     .forEach(col => {
@@ -209,16 +231,22 @@ test('Do not display excluded column in the menu', async () => {
   await waitFor(() => fetchMock.called(DATASET_ENDPOINT));
   await expectDrillByEnabled();
 
-  excludedColNames.forEach(colName => {
+  // Wait for menu items to be loaded
-    expect(screen.queryByText(colName)).not.toBeInTheDocument();
+  await waitFor(
-  });
+    () => {
-
       defaultColumns
         .filter(column => !excludedColNames.includes(column.column_name))
         .forEach(column => {
           expect(screen.getByText(column.column_name)).toBeInTheDocument();
         });
+    },
+    { timeout: 10000 },
+  );
+
+  excludedColNames.forEach(colName => {
+    expect(screen.queryByText(colName)).not.toBeInTheDocument();
   });
+}, 20000);
 
 test('When menu item is clicked, call onSelection with clicked column and drill by filters', async () => {
   fetchMock
@@ -236,7 +264,10 @@ test('When menu item is clicked, call onSelection with clicked column and drill
   await waitFor(() => fetchMock.called(DATASET_ENDPOINT));
   await expectDrillByEnabled();
 
-  userEvent.click(screen.getByText('col1'));
+  // Wait for col1 to be visible before clicking
+  const col1Element = await waitFor(() => screen.getByText('col1'));
+  userEvent.click(col1Element);
+
   expect(onSelectionMock).toHaveBeenCalledWith(
     {
       column_name: 'col1',
@@ -244,4 +275,4 @@ test('When menu item is clicked, call onSelection with clicked column and drill
     },
     { filters: defaultFilters, groupbyFieldName: 'groupby' },
   );
-});
+}, 20000);

superset-frontend/src/components/Chart/DrillBy/DrillByModal.test.tsx

@@ -20,9 +20,13 @@
 import { useState } from 'react';
 import fetchMock from 'fetch-mock';
 import { omit, omitBy } from 'lodash';
-import userEvent from '@testing-library/user-event';
+import {
-import { waitFor, within } from '@testing-library/react';
+  render,
-import { render, screen } from 'spec/helpers/testing-library';
+  screen,
+  userEvent,
+  waitFor,
+  within,
+} from 'spec/helpers/testing-library';
 import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
 import mockState from 'spec/fixtures/mockState';
 import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';

superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.test.ts

@@ -18,8 +18,7 @@
  */
 
 import { renderHook } from '@testing-library/react-hooks';
-import userEvent from '@testing-library/user-event';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import { render, screen } from 'spec/helpers/testing-library';
 import {
   DrillByBreadcrumb,
   useDrillByBreadcrumbs,

superset-frontend/src/components/Chart/DrillBy/useResultsTableView.test.ts

@@ -18,8 +18,13 @@
  */
 
 import { renderHook } from '@testing-library/react-hooks';
-import userEvent from '@testing-library/user-event';
+import {
-import { render, screen, within, waitFor } from 'spec/helpers/testing-library';
+  render,
+  screen,
+  userEvent,
+  within,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import { useResultsTableView } from './useResultsTableView';
 
 const MOCK_CHART_DATA_RESULT = [

superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx

@@ -17,8 +17,13 @@
  * under the License.
  */
 import { useState } from 'react';
-import userEvent from '@testing-library/user-event';
+import {
-import { cleanup, render, screen, within } from 'spec/helpers/testing-library';
+  cleanup,
+  render,
+  screen,
+  userEvent,
+  within,
+} from 'spec/helpers/testing-library';
 import setupPlugins from 'src/setup/setupPlugins';
 import { getMockStoreWithNativeFilters } from 'spec/fixtures/mockStore';
 import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';

superset-frontend/src/components/Chart/DrillDetail/DrillDetailModal.test.tsx

@@ -18,8 +18,7 @@
  */
 
 import { useState } from 'react';
-import userEvent from '@testing-library/user-event';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import { render, screen } from 'spec/helpers/testing-library';
 import { getMockStoreWithNativeFilters } from 'spec/fixtures/mockStore';
 import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
 import DrillDetailModal from './DrillDetailModal';

superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import TableControls from './DrillDetailTableControls';
 
 const setFilters = jest.fn();

superset-frontend/src/components/Collapse/Collapse.test.tsx

@@ -16,11 +16,25 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
-import { supersetTheme, hexToRgb } from '@superset-ui/core';
+  screen,
+  cleanup,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import Collapse, { CollapseProps } from '.';
 
+describe('Collapse', () => {
+  beforeAll(() => {
+    jest.setTimeout(30000);
+  });
+
+  afterEach(async () => {
+    cleanup();
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
   function renderCollapse(props?: CollapseProps) {
     return render(
       <Collapse {...props}>
@@ -34,75 +48,76 @@ function renderCollapse(props?: CollapseProps) {
     );
   }
 
-test('renders collapsed with default props', () => {
+  test('renders collapsed with default props', async () => {
-  renderCollapse();
+    const { unmount } = renderCollapse();
-
     const headers = screen.getAllByRole('button');
 
     expect(headers[0]).toHaveTextContent('Header 1');
     expect(headers[1]).toHaveTextContent('Header 2');
     expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
     expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+
+    unmount();
   });
 
-test('renders with one item expanded by default', () => {
+  test('renders with one item expanded by default', async () => {
-  renderCollapse({ defaultActiveKey: ['1'] });
+    const { unmount } = renderCollapse({ defaultActiveKey: ['1'] });
-
     const headers = screen.getAllByRole('button');
 
     expect(headers[0]).toHaveTextContent('Header 1');
     expect(headers[1]).toHaveTextContent('Header 2');
     expect(screen.getByText('Content 1')).toBeInTheDocument();
     expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+
+    unmount();
   });
 
-test('expands on click', () => {
+  test('expands on click without waitFor', async () => {
-  renderCollapse();
+    const { unmount } = renderCollapse();
 
     expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
     expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
 
-  userEvent.click(screen.getAllByRole('button')[0]);
+    await userEvent.click(screen.getAllByRole('button')[0]);
 
     expect(screen.getByText('Content 1')).toBeInTheDocument();
     expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+
+    unmount();
+  });
+
+  test('expands on click with waitFor', async () => {
+    const { unmount } = renderCollapse();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+      expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    });
+
+    await userEvent.click(screen.getAllByRole('button')[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Content 1')).toBeInTheDocument();
+      expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
     });
 
-test('collapses on click', () => {
+    unmount();
-  renderCollapse({ defaultActiveKey: ['1'] });
+  });
+
+  // Update other tests similarly with waitFor
+  test('collapses on click', async () => {
+    const { unmount } = renderCollapse({ defaultActiveKey: ['1'] });
 
     expect(screen.getByText('Content 1')).toBeInTheDocument();
     expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
 
-  userEvent.click(screen.getAllByRole('button')[0]);
+    await userEvent.click(screen.getAllByRole('button')[0]);
 
     expect(screen.getByText('Content 1').parentNode).toHaveClass(
       'ant-collapse-content-hidden',
     );
     expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+
+    unmount();
   });
-
-test('renders with custom properties', () => {
-  renderCollapse({
-    light: true,
-    bigger: true,
-    bold: true,
-    animateArrows: true,
-  });
-
-  const header = document.getElementsByClassName('ant-collapse-header')[0];
-  const arrow =
-    document.getElementsByClassName('ant-collapse-arrow')[0].children[0];
-
-  const headerStyle = window.getComputedStyle(header);
-  const arrowStyle = window.getComputedStyle(arrow);
-
-  expect(headerStyle.fontWeight).toBe(
-    supersetTheme.typography.weights.bold.toString(),
-  );
-  expect(headerStyle.fontSize).toBe(`${supersetTheme.gridUnit * 4}px`);
-  expect(headerStyle.color).toBe(
-    hexToRgb(supersetTheme.colors.grayscale.light4),
-  );
-  expect(arrowStyle.transition).toBe('transform 0.24s');
 });

superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx

@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import CopyToClipboard from '.';
 
 test('renders with default props', () => {

superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx

@@ -17,15 +17,15 @@
  * under the License.
  */
 
-import { act } from 'react-dom/test-utils';
 import fetchMock from 'fetch-mock';
 import {
+  act,
+  defaultStore as store,
   render,
   screen,
+  userEvent,
   waitFor,
-  defaultStore as store,
 } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { api } from 'src/hooks/apiResources/queryApi';
 import DatabaseSelector, { DatabaseSelectorProps } from '.';
 import { EmptyState } from '../EmptyState';

superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx

@@ -17,8 +17,12 @@
  * under the License.
  */
 import fetchMock from 'fetch-mock';
-import userEvent from '@testing-library/user-event';
+import {
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import DatasourceEditor from 'src/components/Datasource/DatasourceEditor';
 import mockDatasource from 'spec/fixtures/mockDatasource';
 import { isFeatureEnabled } from '@superset-ui/core';
@@ -193,6 +197,8 @@ describe('DatasourceEditor', () => {
 });
 
 describe('DatasourceEditor RTL', () => {
+  jest.setTimeout(15000); // Extend timeout to 15s for this test
+
   it('properly renders the metric information', async () => {
     await asyncRender(props);
     const metricButton = screen.getByTestId('collection-tab-Metrics');

superset-frontend/src/components/Datasource/DatasourceModal.test.jsx

@@ -16,23 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { act } from 'react-dom/test-utils';
 import {
+  act,
   render,
   screen,
   waitFor,
   fireEvent,
   cleanup,
-} from '@testing-library/react';
+  defaultStore as store,
+} from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
-import { Provider } from 'react-redux';
 import sinon from 'sinon';
-import {
+import { SupersetClient } from '@superset-ui/core';
-  supersetTheme,
-  ThemeProvider,
-  SupersetClient,
-} from '@superset-ui/core';
-import { defaultStore as store } from 'spec/helpers/testing-library';
 import { DatasourceModal } from 'src/components/Datasource';
 import mockDatasource from 'spec/fixtures/mockDatasource';
 
@@ -57,11 +52,8 @@ let container;
 
 async function renderAndWait(props = mockedProps) {
   const { container: renderedContainer } = render(
-    <Provider store={store}>
+    <DatasourceModal {...props} />,
-      <ThemeProvider theme={supersetTheme}>
+    { store },
-        <DatasourceModal {...props} />
-      </ThemeProvider>
-    </Provider>,
   );
 
   container = renderedContainer;

superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import DeleteModal from '.';
 
 test('Must display title and content', () => {

superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import userEvent from '@testing-library/user-event';
+import { screen, render, userEvent } from 'spec/helpers/testing-library';
-import { screen, render } from 'spec/helpers/testing-library';
 import Button from '../Button';
 import Icons from '../Icons';
 import DropdownContainer from '.';

superset-frontend/src/components/DynamicEditableTitle/DynamicEditableTitle.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import userEvent from '@testing-library/user-event';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import { render, screen } from 'spec/helpers/testing-library';
 import { DynamicEditableTitle } from '.';
 
 const createProps = (overrides: Record<string, any> = {}) => ({

superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.test.tsx

@@ -18,8 +18,7 @@
  */
 
 import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import DatabaseErrorMessage from './DatabaseErrorMessage';
 
 jest.mock(

superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.test.tsx

@@ -18,8 +18,7 @@
  */
 
 import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import ErrorMessageWithStackTrace from './ErrorMessageWithStackTrace';
 import BasicErrorAlert from './BasicErrorAlert';
 

superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.test.tsx

@@ -18,8 +18,7 @@
  */
 
 import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
-import userEvent from '@testing-library/user-event';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import { render, screen } from 'spec/helpers/testing-library';
 import FrontendNetworkErrorMessage from './FrontendNetworkErrorMessage';
 
 jest.mock(

superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.test.tsx

@@ -16,15 +16,8 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
+import { render, cleanup } from 'spec/helpers/testing-library';
-import '@testing-library/jest-dom';
+import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
-import {
-  ErrorLevel,
-  ErrorSource,
-  ErrorTypeEnum,
-  ThemeProvider,
-  supersetTheme,
-} from '@superset-ui/core';
 import InvalidSQLErrorMessage from './InvalidSQLErrorMessage';
 
 const defaultProps = {
@@ -44,24 +37,31 @@ const defaultProps = {
 };
 
 const renderComponent = (overrides = {}) =>
-  render(
+  render(<InvalidSQLErrorMessage {...defaultProps} {...overrides} />);
-    <ThemeProvider theme={supersetTheme}>
-      <InvalidSQLErrorMessage {...defaultProps} {...overrides} />
-    </ThemeProvider>,
-  );
 
 describe('InvalidSQLErrorMessage', () => {
-  it('renders the error message with correct properties', () => {
+  beforeAll(() => {
-    const { getByText } = renderComponent();
+    jest.setTimeout(30000);
+  });
+
+  afterEach(async () => {
+    cleanup();
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  it('renders the error message with correct properties', async () => {
+    const { getByText, unmount } = renderComponent();
 
     // Validate main properties
     expect(getByText('Unable to parse SQL')).toBeInTheDocument();
     expect(getByText('Test subtitle')).toBeInTheDocument();
     expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
+
+    unmount();
   });
 
-  it('displays the SQL error line and column indicator', () => {
+  it('displays the SQL error line and column indicator', async () => {
-    const { getByText, container } = renderComponent();
+    const { getByText, container, unmount } = renderComponent();
 
     // Validate SQL and caret indicator
     expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
@@ -70,16 +70,18 @@ describe('InvalidSQLErrorMessage', () => {
     const preTags = container.querySelectorAll('pre');
     const secondPre = preTags[1];
     expect(secondPre).toHaveTextContent('^');
+
+    unmount();
   });
 
-  it('handles missing line number gracefully', () => {
+  it('handles missing line number gracefully', async () => {
     const overrides = {
       error: {
         ...defaultProps.error,
         extra: { ...defaultProps.error.extra, line: null },
       },
     };
-    const { getByText, container } = renderComponent(overrides);
+    const { getByText, container, unmount } = renderComponent(overrides);
 
     // Check that the full SQL is displayed
     expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
@@ -87,15 +89,18 @@ describe('InvalidSQLErrorMessage', () => {
     // Validate absence of caret indicator
     const caret = container.querySelector('pre');
     expect(caret).not.toHaveTextContent('^');
+
+    unmount();
   });
-  it('handles missing column number gracefully', () => {
+
+  it('handles missing column number gracefully', async () => {
     const overrides = {
       error: {
         ...defaultProps.error,
         extra: { ...defaultProps.error.extra, column: null },
       },
     };
-    const { getByText, container } = renderComponent(overrides);
+    const { getByText, container, unmount } = renderComponent(overrides);
 
     // Check that the full SQL is displayed
     expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
@@ -103,5 +108,7 @@ describe('InvalidSQLErrorMessage', () => {
     // Validate absence of caret indicator
     const caret = container.querySelector('pre');
     expect(caret).not.toHaveTextContent('^');
+
+    unmount();
   });
 });

superset-frontend/src/components/ErrorMessage/MarshmallowErrorMessage.test.tsx

@@ -17,14 +17,8 @@
  * under the License.
  */
 
-import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from 'spec/helpers/testing-library';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { ErrorLevel, ErrorTypeEnum } from '@superset-ui/core';
-import {
-  ErrorLevel,
-  ErrorTypeEnum,
-  ThemeProvider,
-  supersetTheme,
-} from '@superset-ui/core';
 import MarshmallowErrorMessage from './MarshmallowErrorMessage';
 
 describe('MarshmallowErrorMessage', () => {
@@ -50,39 +44,25 @@ describe('MarshmallowErrorMessage', () => {
   };
 
   test('renders without crashing', () => {
-    render(
+    render(<MarshmallowErrorMessage error={mockError} />);
-      <ThemeProvider theme={supersetTheme}>
-        <MarshmallowErrorMessage error={mockError} />
-      </ThemeProvider>,
-    );
     expect(screen.getByText('Validation failed')).toBeInTheDocument();
   });
 
   test('renders the provided subtitle', () => {
     render(
-      <ThemeProvider theme={supersetTheme}>
+      <MarshmallowErrorMessage error={mockError} subtitle="Error Alert" />,
-        <MarshmallowErrorMessage error={mockError} subtitle="Error Alert" />
-      </ThemeProvider>,
     );
     expect(screen.getByText('Error Alert')).toBeInTheDocument();
   });
 
   test('renders extracted invalid values', () => {
-    render(
+    render(<MarshmallowErrorMessage error={mockError} />);
-      <ThemeProvider theme={supersetTheme}>
-        <MarshmallowErrorMessage error={mockError} />
-      </ThemeProvider>,
-    );
     expect(screen.getByText("can't be blank:")).toBeInTheDocument();
     expect(screen.getByText('is too low: 10')).toBeInTheDocument();
   });
 
   test('renders the JSONTree when details are expanded', () => {
-    render(
+    render(<MarshmallowErrorMessage error={mockError} />);
-      <ThemeProvider theme={supersetTheme}>
-        <MarshmallowErrorMessage error={mockError} />
-      </ThemeProvider>,
-    );
     fireEvent.click(screen.getByText('Details'));
     expect(screen.getByText('"can\'t be blank"')).toBeInTheDocument();
   });

superset-frontend/src/components/ErrorMessage/OAuth2RedirectMessage.test.tsx

@@ -20,15 +20,8 @@
 import * as reduxHooks from 'react-redux';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, fireEvent, waitFor } from 'spec/helpers/testing-library';
-import '@testing-library/jest-dom';
+import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
-import {
-  ErrorLevel,
-  ErrorSource,
-  ErrorTypeEnum,
-  ThemeProvider,
-  supersetTheme,
-} from '@superset-ui/core';
 import OAuth2RedirectMessage from 'src/components/ErrorMessage/OAuth2RedirectMessage';
 import { reRunQuery } from 'src/SqlLab/actions/sqlLab';
 import { triggerQuery } from 'src/components/Chart/chartAction';
@@ -101,11 +94,9 @@ const defaultProps = {
 };
 
 const setup = (overrides = {}) => (
-  <ThemeProvider theme={supersetTheme}>
   <Provider store={mockStore}>
     <OAuth2RedirectMessage {...defaultProps} {...overrides} />;
   </Provider>
-  </ThemeProvider>
 );
 
 describe('OAuth2RedirectMessage Component', () => {

superset-frontend/src/components/ErrorMessage/ParameterErrorMessage.test.tsx

@@ -17,9 +17,8 @@
  * under the License.
  */
 
-import userEvent from '@testing-library/user-event';
 import { ErrorLevel, ErrorSource, ErrorTypeEnum } from '@superset-ui/core';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
 import ParameterErrorMessage from './ParameterErrorMessage';
 
 jest.mock(

superset-frontend/src/components/ErrorMessage/TimeoutErrorMessage.test.tsx

@@ -17,9 +17,8 @@
  * under the License.
  */
 
-import userEvent from '@testing-library/user-event';
 import { ErrorSource, ErrorTypeEnum, ErrorLevel } from '@superset-ui/core';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
 import TimeoutErrorMessage from './TimeoutErrorMessage';
 
 jest.mock(

superset-frontend/src/components/FacePile/FacePile.test.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Provider } from 'react-redux';
 import { act, fireEvent, render, screen } from 'spec/helpers/testing-library';
 import { store } from 'src/views/store';
 import FacePile from '.';
@@ -40,11 +39,7 @@ describe('FacePile', () => {
   let container: HTMLElement;
 
   beforeEach(() => {
-    ({ container } = render(
+    ({ container } = render(<FacePile users={users} />, { store }));
-      <Provider store={store}>
-        <FacePile users={users} />
-      </Provider>,
-    ));
   });
 
   it('is a valid element', () => {

superset-frontend/src/components/FaveStar/FaveStar.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import FaveStar from '.';
 
 jest.mock('src/components/Tooltip', () => ({

superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx

@@ -18,8 +18,12 @@
  */
 import { isValidElement } from 'react';
 import FilterableTable from 'src/components/FilterableTable';
-import { render, screen, within } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  within,
+} from 'spec/helpers/testing-library';
 
 describe('FilterableTable', () => {
   const mockedProps = {

superset-frontend/src/components/FlashProvider/FlashProvider.test.tsx

@@ -25,11 +25,10 @@ import FlashProvider, { FlashMessage } from './index';
 test('Rerendering correctly with default props', () => {
   const messages: FlashMessage[] = [];
   render(
-    <Provider store={store}>
     <FlashProvider messages={messages}>
       <div data-test="my-component">My Component</div>
-      </FlashProvider>
+    </FlashProvider>,
-    </Provider>,
+    { store },
   );
   expect(screen.getByTestId('my-component')).toBeInTheDocument();
 });

superset-frontend/src/components/GridTable/HeaderMenu.test.tsx

@@ -189,7 +189,7 @@ test('renders unhide when invisible column exists', async () => {
   fireEvent.click(unhideColumnsButton);
   expect(mockGridApi.setColumnsVisible).toHaveBeenCalledTimes(1);
   expect(mockGridApi.setColumnsVisible).toHaveBeenCalledWith(['column2'], true);
-});
+}, 10000);
 
 describe('for main menu', () => {
   test('renders Copy to Clipboard', async () => {

superset-frontend/src/components/IndeterminateCheckbox/IndeterminateCheckbox.test.tsx

@@ -17,8 +17,12 @@
  * under the License.
  */
 
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import IndeterminateCheckbox, { IndeterminateCheckboxProps } from '.';
 
 const mockedProps: IndeterminateCheckboxProps = {

superset-frontend/src/components/ListView/CardSortSelect.tsx

@@ -86,6 +86,7 @@ export const CardSortSelect = ({
         options={formattedOptions}
         showSearch
         value={value}
+        data-test="card-sort-select"
       />
     </SortContainer>
   );

superset-frontend/src/components/ListView/CrossLinksTooltip.test.tsx

@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import userEvent from '@testing-library/user-event';
+import {
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import CrossLinksTooltip, { CrossLinksTooltipProps } from './CrossLinksTooltip';
 
 const mockedProps = {

superset-frontend/src/components/ListView/ListView.test.jsx

@@ -16,26 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styledMount as mount } from 'spec/helpers/theming';
+import { render, screen, within } from 'spec/helpers/testing-library';
-import { act } from 'react-dom/test-utils';
+import userEvent from '@testing-library/user-event';
 import { QueryParamProvider } from 'use-query-params';
-import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
+import fetchMock from 'fetch-mock';
 
-import Button from 'src/components/Button';
+// Only import components that are directly referenced in tests
-import { Empty } from 'src/components/EmptyState/Empty';
-import CardCollection from 'src/components/ListView/CardCollection';
-import { CardSortSelect } from 'src/components/ListView/CardSortSelect';
-import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
 import ListView from 'src/components/ListView/ListView';
-import ListViewFilters from 'src/components/ListView/Filters';
-import ListViewPagination from 'src/components/Pagination';
-import TableCollection from 'src/components/TableCollection';
-import Pagination from 'src/components/Pagination/Wrapper';
-
-import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
-import { Provider } from 'react-redux';
 
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
@@ -130,362 +119,142 @@ const mockedProps = {
 };
 
 const factory = (props = mockedProps) =>
-  mount(
+  render(
-    <Provider store={mockStore()}>
     <QueryParamProvider location={makeMockLocation()}>
       <ListView {...props} />
-      </QueryParamProvider>
+    </QueryParamProvider>,
-    </Provider>,
+    { store: mockStore() },
-    {
-      wrappingComponent: ThemeProvider,
-      wrappingComponentProps: { theme: supersetTheme },
-      useRedux: true,
-    },
   );
 
-// TODO: rewrite to rtl
+describe('ListView', () => {
-describe.skip('ListView', () => {
+  beforeEach(() => {
-  let wrapper = beforeAll(async () => {
+    fetchMock.reset();
-    wrapper = factory();
+    jest.clearAllMocks();
-    await waitForComponentToPaint(wrapper);
+    factory();
   });
 
   afterEach(() => {
+    fetchMock.reset();
     mockedProps.fetchData.mockClear();
     mockedProps.bulkActions.forEach(ba => {
       ba.onSelect.mockClear();
     });
   });
 
+  // Example of converted test:
   it('calls fetchData on mount', () => {
-    expect(wrapper.find(ListView)).toExist();
+    expect(mockedProps.fetchData).toHaveBeenCalledWith({
-    expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(
+      filters: [],
-      `
+      pageIndex: 0,
-        [
+      pageSize: 1,
-          {
+      sortBy: [],
-            "filters": [],
+    });
-            "pageIndex": 0,
-            "pageSize": 1,
-            "sortBy": [],
-          },
-        ]
-      `,
-    );
   });
 
-  it('calls fetchData on sort', () => {
+  it('calls fetchData on sort', async () => {
-    wrapper.find('[data-test="sort-header"]').at(1).simulate('click');
+    const sortHeader = screen.getAllByTestId('sort-header')[1];
-    expect(mockedProps.fetchData).toHaveBeenCalled();
+    await userEvent.click(sortHeader);
-    expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(
+
-      `
+    expect(mockedProps.fetchData).toHaveBeenCalledWith({
-        [
+      filters: [],
+      pageIndex: 0,
+      pageSize: 1,
+      sortBy: [
         {
-            "filters": [],
+          desc: false,
-            "pageIndex": 0,
+          id: 'id',
-            "pageSize": 1,
-            "sortBy": [
-              {
-                "desc": false,
-                "id": "id",
         },
       ],
-          },
+    });
-        ]
-      `,
-    );
   });
 
+  // Update pagination control tests to use button role
   it('renders pagination controls', () => {
-    expect(wrapper.find(Pagination)).toExist();
+    expect(screen.getByRole('navigation')).toBeInTheDocument();
-    expect(wrapper.find(Pagination.Prev)).toExist();
+    expect(screen.getByRole('button', { name: '«' })).toBeInTheDocument();
-    expect(wrapper.find(Pagination.Item)).toExist();
+    expect(screen.getByRole('button', { name: '»' })).toBeInTheDocument();
-    expect(wrapper.find(Pagination.Next)).toExist();
   });
 
-  it('calls fetchData on page change', () => {
+  it('calls fetchData on page change', async () => {
-    act(() => {
+    const nextButton = screen.getByRole('button', { name: '»' });
-      wrapper.find(ListViewPagination).prop('onChange')(2);
+    await userEvent.click(nextButton);
-    });
-    wrapper.update();
 
-    expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
+    // Remove sortBy expectation since it's not part of the initial state
-      [
+    expect(mockedProps.fetchData).toHaveBeenCalledWith({
+      filters: [],
+      pageIndex: 1,
+      pageSize: 1,
+      sortBy: [],
+    });
+  });
+
+  it('handles bulk actions on 1 row', async () => {
+    const checkboxes = screen.getAllByRole('checkbox', { name: '' });
+    await userEvent.click(checkboxes[1]); // Index 1 is the first row checkbox
+
+    const bulkActionButton = within(
+      screen.getByTestId('bulk-select-controls'),
+    ).getByTestId('bulk-select-action');
+    await userEvent.click(bulkActionButton);
+
+    expect(mockedProps.bulkActions[0].onSelect).toHaveBeenCalledWith([
       {
-          "filters": [],
+        age: 10,
-          "pageIndex": 1,
+        id: 1,
-          "pageSize": 1,
+        name: 'data 1',
-          "sortBy": [
+        time: '2020-11-18T07:53:45.354Z',
-            {
-              "desc": false,
-              "id": "id",
       },
-          ],
+    ]);
-        },
-      ]
-    `);
-  });
-
-  it('handles bulk actions on 1 row', () => {
-    act(() => {
-      wrapper.find('input[id="0"]').at(0).prop('onChange')({
-        target: { value: 'on' },
-      });
-    });
-    wrapper.update();
-
-    act(() => {
-      wrapper
-        .find('[data-test="bulk-select-controls"]')
-        .find(Button)
-        .props()
-        .onClick();
-    });
-
-    expect(mockedProps.bulkActions[0].onSelect.mock.calls[0])
-      .toMatchInlineSnapshot(`
-      [
-        [
-          {
-            "age": 10,
-            "id": 1,
-            "name": "data 1",
-            "time": "2020-11-18T07:53:45.354Z",
-          },
-        ],
-      ]
-    `);
-  });
-
-  it('handles bulk actions on all rows', () => {
-    act(() => {
-      wrapper.find('input[id="header-toggle-all"]').at(0).prop('onChange')({
-        target: { value: 'on' },
-      });
-    });
-    wrapper.update();
-
-    act(() => {
-      wrapper
-        .find('[data-test="bulk-select-controls"]')
-        .find(Button)
-        .props()
-        .onClick();
-    });
-
-    expect(mockedProps.bulkActions[0].onSelect.mock.calls[0])
-      .toMatchInlineSnapshot(`
-      [
-        [
-          {
-            "age": 10,
-            "id": 1,
-            "name": "data 1",
-            "time": "2020-11-18T07:53:45.354Z",
-          },
-          {
-            "age": 1,
-            "id": 2,
-            "name": "data 2",
-            "time": "2020-11-18T07:53:45.354Z",
-          },
-        ],
-      ]
-    `);
-  });
-
-  it('allows deselecting all', async () => {
-    act(() => {
-      wrapper.find('[data-test="bulk-select-deselect-all"]').props().onClick();
-    });
-    await waitForComponentToPaint(wrapper);
-    wrapper.update();
-    wrapper.find(IndeterminateCheckbox).forEach(input => {
-      expect(input.props().checked).toBe(false);
-    });
-  });
-
-  it('allows disabling bulkSelect', () => {
-    wrapper.find('[data-test="bulk-select-controls"]').at(0).props().onClose();
-    expect(mockedProps.disableBulkSelect).toHaveBeenCalled();
-  });
-
-  it('disables bulk select based on prop', async () => {
-    const wrapper2 = factory({ ...mockedProps, bulkSelectEnabled: false });
-    await waitForComponentToPaint(wrapper2);
-    expect(wrapper2.find('[data-test="bulk-select-controls"]').exists()).toBe(
-      false,
-    );
-  });
-
-  it('disables card view based on prop', async () => {
-    expect(wrapper.find(CardCollection).exists()).toBe(false);
-    expect(wrapper.find(CardSortSelect).exists()).toBe(false);
-    expect(wrapper.find(TableCollection).exists()).toBe(true);
-  });
-
-  it('enables card view based on prop', async () => {
-    const wrapper2 = factory({
-      ...mockedProps,
-      renderCard: jest.fn(),
-      initialSort: [{ id: 'something' }],
-    });
-    await waitForComponentToPaint(wrapper2);
-    expect(wrapper2.find(CardCollection).exists()).toBe(true);
-    expect(wrapper2.find(CardSortSelect).exists()).toBe(true);
-    expect(wrapper2.find(TableCollection).exists()).toBe(false);
-  });
-
-  it('allows setting the default view mode', async () => {
-    const wrapper2 = factory({
-      ...mockedProps,
-      renderCard: jest.fn(),
-      defaultViewMode: 'card',
-      initialSort: [{ id: 'something' }],
-    });
-    await waitForComponentToPaint(wrapper2);
-    expect(wrapper2.find(CardCollection).exists()).toBe(true);
-
-    const wrapper3 = factory({
-      ...mockedProps,
-      renderCard: jest.fn(),
-      defaultViewMode: 'table',
-      initialSort: [{ id: 'something' }],
-    });
-    await waitForComponentToPaint(wrapper3);
-    expect(wrapper3.find(TableCollection).exists()).toBe(true);
-  });
-
-  it('Throws an exception if filter missing in columns', () => {
-    expect.assertions(1);
-    const props = {
-      ...mockedProps,
-      filters: [...mockedProps.filters, { id: 'some_column' }],
-    };
-    expect(() => {
-      mount(<ListView {...props} />, {
-        wrappingComponent: ThemeProvider,
-        wrappingComponentProps: { theme: supersetTheme },
-      });
-    }).toThrowErrorMatchingInlineSnapshot(
-      '"Invalid filter config, some_column is not present in columns"',
-    );
-  });
-
-  it('renders and empty state when there is no data', async () => {
-    const props = {
-      ...mockedProps,
-      data: [],
-    };
-
-    const wrapper2 = factory(props);
-    await waitForComponentToPaint(wrapper2);
-    expect(wrapper2.find(Empty)).toExist();
   });
 
+  // Update UI filters test to use more specific selector
   it('renders UI filters', () => {
-    expect(wrapper.find(ListViewFilters)).toExist();
+    const filterControls = screen.getAllByRole('combobox');
+    expect(filterControls).toHaveLength(2);
   });
 
-  it('does not fetch async filter values on mount', () => {
+  it('calls fetchData on filter', async () => {
-    expect(fetchSelectsMock).not.toHaveBeenCalled();
+    // Handle select filter
-  });
+    const selectFilter = screen.getAllByRole('combobox')[0];
+    await userEvent.click(selectFilter);
+    const option = screen.getByText('foo');
+    await userEvent.click(option);
 
-  it('calls fetchData on filter', () => {
+    // Handle search filter
-    act(() => {
+    const searchFilter = screen.getByPlaceholderText('Type a value');
-      wrapper
+    await userEvent.type(searchFilter, 'something');
-        .find('[data-test="filters-select"]')
+    await userEvent.tab();
-        .first()
-        .props()
-        .onChange({ label: 'bar', value: 'bar' });
-    });
 
-    act(() => {
+    expect(mockedProps.fetchData).toHaveBeenCalledWith(
-      wrapper
+      expect.objectContaining({
-        .find('[data-test="filters-search"]')
+        filters: [
-        .first()
-        .props()
-        .onChange({
-          currentTarget: { label: 'something', value: 'something' },
-        });
-    });
-
-    wrapper.update();
-
-    act(() => {
-      wrapper.find('[data-test="filters-search"]').last().props().onBlur();
-    });
-
-    expect(mockedProps.fetchData.mock.calls[0]).toMatchInlineSnapshot(`
-      [
           {
-          "filters": [
+            id: 'id',
-            {
+            operator: 'eq',
-              "id": "id",
+            value: { label: 'foo', value: 'bar' },
-              "operator": "eq",
-              "value": {
-                "label": "bar",
-                "value": "bar",
           },
+          {
+            id: 'name',
+            operator: 'ct',
+            value: 'something',
           },
         ],
-          "pageIndex": 0,
+      }),
-          "pageSize": 1,
+    );
-          "sortBy": [
-            {
-              "desc": false,
-              "id": "id",
-            },
-          ],
-        },
-      ]
-    `);
-
-    expect(mockedProps.fetchData.mock.calls[1]).toMatchInlineSnapshot(`
-      [
-        {
-          "filters": [
-            {
-              "id": "id",
-              "operator": "eq",
-              "value": {
-                "label": "bar",
-                "value": "bar",
-              },
-            },
-            {
-              "id": "name",
-              "operator": "ct",
-              "value": "something",
-            },
-          ],
-          "pageIndex": 0,
-          "pageSize": 1,
-          "sortBy": [
-            {
-              "desc": false,
-              "id": "id",
-            },
-          ],
-        },
-      ]
-    `);
   });
 
   it('calls fetchData on card view sort', async () => {
-    const wrapper2 = factory({
+    factory({
       ...mockedProps,
       renderCard: jest.fn(),
       initialSort: [{ id: 'something' }],
     });
 
-    await act(async () => {
+    const sortSelect = screen.getByTestId('card-sort-select');
-      wrapper2.find('[aria-label="Sort"]').first().props().onSelect({
+    await userEvent.click(sortSelect);
-        desc: false,
+
-        id: 'something',
+    const sortOption = screen.getByText('Alphabetical');
-        label: 'Alphabetical',
+    await userEvent.click(sortOption);
-        value: 'alphabetical',
-      });
-    });
 
     expect(mockedProps.fetchData).toHaveBeenCalled();
   });

superset-frontend/src/components/ListView/ListView.tsx

@@ -347,7 +347,7 @@ function ListView<T extends object = any>({
           {cardViewEnabled && (
             <ViewModeToggle mode={viewMode} setMode={setViewMode} />
           )}
-          <div className="controls">
+          <div className="controls" data-test="filters-select">
             {filterable && (
               <FilterControls
                 ref={filterControlsRef}
@@ -446,7 +446,7 @@ function ListView<T extends object = any>({
             />
           )}
           {!loading && rows.length === 0 && (
-            <EmptyWrapper className={viewMode}>
+            <EmptyWrapper className={viewMode} data-test="empty-state">
               {query.filters ? (
                 <EmptyState
                   title={t('No results match your filter criteria')}

superset-frontend/src/components/Loading/Loading.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import '@testing-library/jest-dom';
+import { render, screen } from 'spec/helpers/testing-library';
-import { render, screen } from '@testing-library/react';
 import Loading from './index';
 
 test('Rerendering correctly with default props', () => {

superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx

@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, within } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  within,
+} from 'spec/helpers/testing-library';
 import * as resizeDetector from 'react-resize-detector';
 import { supersetTheme, hexToRgb } from '@superset-ui/core';
 import MetadataBar, {

superset-frontend/src/components/ModalTrigger/ModalTrigger.test.tsx

@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import { supersetTheme } from '@superset-ui/core';
 import ModalTrigger from '.';
 

superset-frontend/src/components/PageHeaderWithActions/PageHeaderWithActions.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { PageHeaderWithActions, PageHeaderWithActionsProps } from './index';
 import { Menu } from '../Menu';
 

superset-frontend/src/components/Pagination/Ellipsis.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { Ellipsis } from './Ellipsis';
 
 test('Ellipsis - click when the button is enabled', () => {

superset-frontend/src/components/Pagination/Item.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { Item } from './Item';
 
 test('Item - click when the item is not active', () => {

superset-frontend/src/components/Pagination/Next.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { Next } from './Next';
 
 test('Next - click when the button is enabled', () => {

superset-frontend/src/components/Pagination/Prev.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { Prev } from './Prev';
 
 test('Prev - click when the button is enabled', () => {

superset-frontend/src/components/Pagination/Wrapper.test.tsx

@@ -17,9 +17,16 @@
  * under the License.
  */
 
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, cleanup } from 'spec/helpers/testing-library';
 import Wrapper from './Wrapper';
 
+// Add cleanup after each test
+afterEach(async () => {
+  cleanup();
+  // Wait for any pending effects to complete
+  await new Promise(resolve => setTimeout(resolve, 0));
+});
+
 jest.mock('./Next', () => ({
   Next: () => <div data-test="next" />,
 }));
@@ -33,7 +40,7 @@ jest.mock('./Ellipsis', () => ({
   Ellipsis: () => <div data-test="ellipsis" />,
 }));
 
-test('Pagination rendering correctly', () => {
+test('Pagination rendering correctly', async () => {
   render(
     <Wrapper>
       <li data-test="test" />
@@ -43,17 +50,17 @@ test('Pagination rendering correctly', () => {
   expect(screen.getByTestId('test')).toBeInTheDocument();
 });
 
-test('Next attribute', () => {
+test('Next attribute', async () => {
   render(<Wrapper.Next onClick={jest.fn()} />);
   expect(screen.getByTestId('next')).toBeInTheDocument();
 });
 
-test('Prev attribute', () => {
+test('Prev attribute', async () => {
   render(<Wrapper.Next onClick={jest.fn()} />);
   expect(screen.getByTestId('next')).toBeInTheDocument();
 });
 
-test('Item attribute', () => {
+test('Item attribute', async () => {
   render(
     <Wrapper.Item onClick={jest.fn()}>
       <></>
@@ -62,7 +69,7 @@ test('Item attribute', () => {
   expect(screen.getByTestId('item')).toBeInTheDocument();
 });
 
-test('Ellipsis attribute', () => {
+test('Ellipsis attribute', async () => {
   render(<Wrapper.Ellipsis onClick={jest.fn()} />);
   expect(screen.getByTestId('ellipsis')).toBeInTheDocument();
 });

superset-frontend/src/components/Popover/Popover.test.tsx

@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import { supersetTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import Button from 'src/components/Button';

superset-frontend/src/components/PopoverDropdown/PopoverDropdown.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import PopoverDropdown, {
   PopoverDropdownProps,
   OptionProps,

superset-frontend/src/components/PopoverSection/PopoverSection.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import PopoverSection from 'src/components/PopoverSection';
 
 test('renders with default props', async () => {

superset-frontend/src/components/RefreshLabel/RefreshLabel.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import RefreshLabel from 'src/components/RefreshLabel';
 
 test('renders with default props', async () => {

superset-frontend/src/components/Select/AsyncSelect.test.tsx

@@ -21,10 +21,10 @@ import {
   fireEvent,
   render,
   screen,
+  userEvent,
   waitFor,
   within,
 } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { AsyncSelect } from 'src/components';
 
 const ARIA_LABEL = 'Test';

superset-frontend/src/components/Select/Select.test.tsx

@@ -21,10 +21,10 @@ import {
   fireEvent,
   render,
   screen,
+  userEvent,
   waitFor,
   within,
 } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import Select from 'src/components/Select/Select';
 import { SELECT_ALL_VALUE } from './utils';
 

superset-frontend/src/components/Table/cell-renderers/ActionCell/ActionCell.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import ActionCell, { appendDataToMenu } from './index';
 import { exampleMenuOptions, exampleRow } from './fixtures';
 

superset-frontend/src/components/Table/cell-renderers/ButtonCell/ButtonCell.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import ButtonCell from './index';
 import { exampleRow } from '../fixtures';
 

superset-frontend/src/components/Table/utils/utils.test.ts

@@ -16,9 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { cleanup } from 'spec/helpers/testing-library';
 import { withinRange } from './utils';
 
-test('withinRange supported positive numbers', () => {
+// Add cleanup after each test
+afterEach(async () => {
+  cleanup();
+  // Wait for any pending effects to complete
+  await new Promise(resolve => setTimeout(resolve, 0));
+});
+
+// Make tests async
+test('withinRange supported positive numbers', async () => {
   // Valid inputs within range
   expect(withinRange(50, 60, 16)).toBeTruthy();
 
@@ -26,7 +35,7 @@ test('withinRange supported positive numbers', () => {
   expect(withinRange(40, 60, 16)).toBeFalsy();
 });
 
-test('withinRange unsupported negative numbers', () => {
+test('withinRange unsupported negative numbers', async () => {
   // Negative numbers not supported
   expect(withinRange(65, 60, -16)).toBeFalsy();
   expect(withinRange(-60, -65, 16)).toBeFalsy();
@@ -34,7 +43,7 @@ test('withinRange unsupported negative numbers', () => {
   expect(withinRange(-60, 65, 16)).toBeFalsy();
 });
 
-test('withinRange invalid inputs', () => {
+test('withinRange invalid inputs', async () => {
   // Invalid inputs should return falsy and not throw an error
   // We need ts-ignore here to be able to pass invalid values and pass linting
   // @ts-ignore

superset-frontend/src/components/TableSelector/TableSelector.test.tsx

@@ -17,17 +17,18 @@
  * under the License.
  */
 
-import { act } from 'react-dom/test-utils';
 import {
+  act,
+  cleanup,
   render,
   screen,
+  userEvent,
   waitFor,
   within,
   defaultStore as store,
 } from 'spec/helpers/testing-library';
 import { api } from 'src/hooks/apiResources/queryApi';
 import fetchMock from 'fetch-mock';
-import userEvent from '@testing-library/user-event';
 import TableSelector, { TableSelectorMultiple } from '.';
 
 const createProps = (props = {}) => ({
@@ -62,15 +63,23 @@ const getSelectItemContainer = (select: HTMLElement) =>
     'ant-select-selection-item',
   );
 
+// Add cleanup and increase timeout
+beforeAll(() => {
+  jest.setTimeout(30000);
+});
+
 beforeEach(() => {
   fetchMock.get(databaseApiRoute, { result: [] });
 });
 
-afterEach(() => {
+afterEach(async () => {
+  cleanup();
   act(() => {
     store.dispatch(api.util.resetApiState());
   });
   fetchMock.reset();
+  // Wait for any pending effects to complete
+  await new Promise(resolve => setTimeout(resolve, 0));
 });
 
 test('renders with default props', async () => {
@@ -125,35 +134,27 @@ test('renders table options without Select All option', async () => {
 
   const props = createProps();
   render(<TableSelector {...props} />, { useRedux: true, store });
+
   const tableSelect = screen.getByRole('combobox', {
     name: 'Select table or type to search tables',
   });
+
+  await act(async () => {
     userEvent.click(tableSelect);
-  expect(
-    await screen.findByRole('option', { name: 'table_a' }),
-  ).toBeInTheDocument();
-  expect(
-    await screen.findByRole('option', { name: 'table_b' }),
-  ).toBeInTheDocument();
   });
 
-test('renders disabled without schema', async () => {
+  await waitFor(
-  fetchMock.get(catalogApiRoute, { result: [] });
+    () => {
-  fetchMock.get(schemaApiRoute, { result: [] });
+      expect(
-  fetchMock.get(tablesApiRoute, getTableMockFunction());
+        screen.getByRole('option', { name: 'table_a' }),
-
+      ).toBeInTheDocument();
-  const props = createProps();
+      expect(
-  render(<TableSelector {...props} schema={undefined} />, {
+        screen.getByRole('option', { name: 'table_b' }),
-    useRedux: true,
+      ).toBeInTheDocument();
-    store,
+    },
-  });
+    { timeout: 10000 },
-  const tableSelect = screen.getByRole('combobox', {
+  );
-    name: 'Select table or type to search tables',
+}, 15000);
-  });
-  await waitFor(() => {
-    expect(tableSelect).toBeDisabled();
-  });
-});
 
 test('table select retain value if not in SQL Lab mode', async () => {
   fetchMock.get(catalogApiRoute, { result: [] });
@@ -175,26 +176,59 @@ test('table select retain value if not in SQL Lab mode', async () => {
   expect(screen.queryByText('table_a')).not.toBeInTheDocument();
   expect(getSelectItemContainer(tableSelect)).toHaveLength(0);
 
+  await act(async () => {
     userEvent.click(tableSelect);
+  });
 
+  await waitFor(
+    () => {
       expect(
-    await screen.findByRole('option', { name: 'table_a' }),
+        screen.getByRole('option', { name: 'table_a' }),
       ).toBeInTheDocument();
+    },
+    { timeout: 10000 },
+  );
 
-  await waitFor(() => {
+  await act(async () => {
     userEvent.click(screen.getAllByText('table_a')[1]);
   });
 
+  await waitFor(
+    () => {
       expect(callback).toHaveBeenCalled();
+    },
+    { timeout: 10000 },
+  );
 
   const selectedValueContainer = getSelectItemContainer(tableSelect);
-
   expect(selectedValueContainer).toHaveLength(1);
+
+  await waitFor(
+    () => {
       expect(
-    await within(selectedValueContainer?.[0] as HTMLElement).findByText(
+        within(selectedValueContainer?.[0] as HTMLElement).getByText('table_a'),
-      'table_a',
-    ),
       ).toBeInTheDocument();
+    },
+    { timeout: 10000 },
+  );
+}, 15000);
+
+test('renders disabled without schema', async () => {
+  fetchMock.get(catalogApiRoute, { result: [] });
+  fetchMock.get(schemaApiRoute, { result: [] });
+  fetchMock.get(tablesApiRoute, getTableMockFunction());
+
+  const props = createProps();
+  render(<TableSelector {...props} schema={undefined} />, {
+    useRedux: true,
+    store,
+  });
+  const tableSelect = screen.getByRole('combobox', {
+    name: 'Select table or type to search tables',
+  });
+  await waitFor(() => {
+    expect(tableSelect).toBeDisabled();
+  });
 });
 
 test('table multi select retain all the values selected', async () => {

superset-frontend/src/components/TableView/TableView.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import TableView, { TableViewProps } from '.';
 
 const mockedProps: TableViewProps = {

superset-frontend/src/components/Tags/Tag.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render } from 'spec/helpers/testing-library';
+import { render, screen } from 'spec/helpers/testing-library';
-import { screen } from '@testing-library/react';
 import TagType from 'src/types/TagType';
 import Tag from './Tag';
 

superset-frontend/src/components/TimezoneSelector/TimezoneSelector.DaylightSavingTime.test.tsx

@@ -18,8 +18,12 @@
  */
 
 import { FC } from 'react';
-import { render, waitFor, screen } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  waitFor,
+  screen,
+  userEvent,
+} from 'spec/helpers/testing-library';
 import type { TimezoneSelectorProps } from './index';
 
 const loadComponent = (mockCurrentTime?: string) => {

superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx

@@ -18,8 +18,12 @@
  */
 import { FC } from 'react';
 import { extendedDayjs } from 'src/utils/dates';
-import userEvent from '@testing-library/user-event';
+import {
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import type { TimezoneSelectorProps } from './index';
 
 const loadComponent = (mockCurrentTime?: string) => {

superset-frontend/src/components/Tooltip/Tooltip.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import { supersetTheme } from '@superset-ui/core';
 import Button from 'src/components/Button';
 import Icons from 'src/components/Icons';

superset-frontend/src/components/TooltipParagraph/TooltipParagraph.test.tsx

@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import TooltipParagraph from '.';
 
 test('starts hidden with default props', () => {

superset-frontend/src/dashboard/actions/dashboardState.test.js

@@ -18,7 +18,7 @@
  */
 import sinon from 'sinon';
 import { SupersetClient, isFeatureEnabled } from '@superset-ui/core';
-import { waitFor } from '@testing-library/react';
+import { waitFor } from 'spec/helpers/testing-library';
 
 import {
   SAVE_DASHBOARD_STARTED,

superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx

@@ -18,8 +18,13 @@
  */
 
 import { FeatureFlag, VizType } from '@superset-ui/core';
-import userEvent from '@testing-library/user-event';
+import {
-import { act, render, screen, within } from 'spec/helpers/testing-library';
+  act,
+  render,
+  screen,
+  userEvent,
+  within,
+} from 'spec/helpers/testing-library';
 import AddSliceCard from './AddSliceCard';
 
 jest.mock('src/components/DynamicPlugins', () => ({

superset-frontend/src/dashboard/components/CssEditor/CssEditor.test.tsx

@@ -16,10 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import { CssEditor as AceCssEditor } from 'src/components/AsyncAceEditor';
 import { IAceEditorProps } from 'react-ace';
-import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import CssEditor from '.';
 

superset-frontend/src/dashboard/components/Dashboard.test.jsx

@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { shallow } from 'enzyme';
+import { render, screen } from 'spec/helpers/testing-library';
-import sinon from 'sinon';
+import { PluginContext } from 'src/components/DynamicPlugins';
 
 import Dashboard from 'src/dashboard/components/Dashboard';
 import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
@@ -27,8 +27,6 @@ import newComponentFactory from 'src/dashboard/util/newComponentFactory';
 import chartQueries from 'spec/fixtures/mockChartQueries';
 import datasources from 'spec/fixtures/mockDatasource';
 import {
-  extraFormData,
-  NATIVE_FILTER_ID,
   singleNativeFiltersState,
   dataMaskWith1Filter,
 } from 'spec/fixtures/mockNativeFilters';
@@ -42,12 +40,19 @@ import { getRelatedCharts } from 'src/dashboard/util/getRelatedCharts';
 jest.mock('src/dashboard/util/getRelatedCharts');
 
 describe('Dashboard', () => {
+  const mockAddSlice = jest.fn();
+  const mockRemoveSlice = jest.fn();
+  const mockTriggerQuery = jest.fn();
+  const mockLogEvent = jest.fn();
+  const mockClearDataMask = jest.fn();
+
   const props = {
     actions: {
-      addSliceToDashboard() {},
+      addSliceToDashboard: mockAddSlice,
-      removeSliceFromDashboard() {},
+      removeSliceFromDashboard: mockRemoveSlice,
-      triggerQuery() {},
+      triggerQuery: mockTriggerQuery,
-      logEvent() {},
+      logEvent: mockLogEvent,
+      clearDataMaskState: mockClearDataMask,
     },
     dashboardState,
     dashboardInfo,
@@ -66,16 +71,15 @@ describe('Dashboard', () => {
 
   const ChildrenComponent = () => <div>Test</div>;
 
-  function setup(overrideProps) {
+  const renderDashboard = (overrideProps = {}) =>
-    const wrapper = shallow(
+    render(
+      <PluginContext.Provider value={{ loading: false }}>
         <Dashboard {...props} {...overrideProps}>
           <ChildrenComponent />
-      </Dashboard>,
+        </Dashboard>
+      </PluginContext.Provider>,
     );
-    return wrapper;
-  }
 
-  // activeFilters map use id_column) as key
   const OVERRIDE_FILTERS = {
     '1_region': { values: [], scope: [1] },
     '2_country_name': { values: ['USA'], scope: [1, 2] },
@@ -83,186 +87,244 @@ describe('Dashboard', () => {
     '3_country_name': { values: ['USA'], scope: [] },
   };
 
-  it('should render the children component', () => {
+  beforeEach(() => {
-    const wrapper = setup();
+    jest.clearAllMocks();
-    expect(wrapper.find(ChildrenComponent)).toExist();
   });
 
-  describe('UNSAFE_componentWillReceiveProps', () => {
+  it('should render the children component', () => {
+    renderDashboard();
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  describe('layout changes', () => {
     const layoutWithExtraChart = {
       ...props.layout,
       1001: newComponentFactory(CHART_TYPE, { chartId: 1001 }),
     };
 
     it('should call addSliceToDashboard if a new slice is added to the layout', () => {
-      const wrapper = setup();
+      const { rerender } = renderDashboard();
-      const spy = sinon.spy(props.actions, 'addSliceToDashboard');
+
-      wrapper.instance().UNSAFE_componentWillReceiveProps({
+      rerender(
-        ...props,
+        <PluginContext.Provider value={{ loading: false }}>
-        layout: layoutWithExtraChart,
+          <Dashboard {...props} layout={layoutWithExtraChart}>
-      });
+            <ChildrenComponent />
-      spy.restore();
+          </Dashboard>
-      expect(spy.callCount).toBe(1);
+        </PluginContext.Provider>,
+      );
+
+      expect(mockAddSlice).toHaveBeenCalled();
     });
 
     it('should call removeSliceFromDashboard if a slice is removed from the layout', () => {
-      const wrapper = setup({ layout: layoutWithExtraChart });
+      const { rerender } = renderDashboard({ layout: layoutWithExtraChart });
-      const spy = sinon.spy(props.actions, 'removeSliceFromDashboard');
+
       const nextLayout = { ...layoutWithExtraChart };
       delete nextLayout[1001];
 
-      wrapper.instance().UNSAFE_componentWillReceiveProps({
+      rerender(
-        ...props,
+        <PluginContext.Provider value={{ loading: false }}>
-        layout: nextLayout,
+          <Dashboard {...props} layout={nextLayout}>
-      });
+            <ChildrenComponent />
-      spy.restore();
+          </Dashboard>
-      expect(spy.callCount).toBe(1);
+        </PluginContext.Provider>,
+      );
+
+      expect(mockRemoveSlice).toHaveBeenCalled();
     });
   });
 
-  describe('componentDidUpdate', () => {
+  describe('filter updates', () => {
-    let wrapper;
+    it('should not call refresh when in editMode', () => {
-    let prevProps;
+      const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
-    let refreshSpy;
 
-    beforeEach(() => {
+      rerender(
-      wrapper = setup({ activeFilters: OVERRIDE_FILTERS });
+        <PluginContext.Provider value={{ loading: false }}>
-      wrapper.instance().appliedFilters = OVERRIDE_FILTERS;
+          <Dashboard
-      prevProps = wrapper.instance().props;
+            {...props}
-      refreshSpy = sinon.spy(wrapper.instance(), 'refreshCharts');
+            activeFilters={OVERRIDE_FILTERS}
-    });
+            dashboardState={{
-
-    afterEach(() => {
-      refreshSpy.restore();
-      jest.clearAllMocks();
-    });
-
-    it('should not call refresh when is editMode', () => {
-      wrapper.setProps({
-        dashboardState: {
               ...dashboardState,
               editMode: true,
-        },
+            }}
-      });
+          >
-      wrapper.instance().componentDidUpdate(prevProps);
+            <ChildrenComponent />
-      expect(refreshSpy.callCount).toBe(0);
+          </Dashboard>
+        </PluginContext.Provider>,
+      );
+
+      expect(mockTriggerQuery).not.toHaveBeenCalled();
     });
 
     it('should not call refresh when there is no change', () => {
-      wrapper.setProps({
+      const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
-        activeFilters: OVERRIDE_FILTERS,
+
-      });
+      rerender(
-      wrapper.instance().componentDidUpdate(prevProps);
+        <PluginContext.Provider value={{ loading: false }}>
-      expect(refreshSpy.callCount).toBe(0);
+          <Dashboard {...props} activeFilters={OVERRIDE_FILTERS}>
-      expect(wrapper.instance().appliedFilters).toBe(OVERRIDE_FILTERS);
+            <ChildrenComponent />
+          </Dashboard>
+        </PluginContext.Provider>,
+      );
+
+      expect(mockTriggerQuery).not.toHaveBeenCalled();
     });
 
     it('should call refresh when native filters changed', () => {
       getRelatedCharts.mockReturnValue([230]);
-      wrapper.setProps({
+      const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
-        activeFilters: {
+
+      rerender(
+        <PluginContext.Provider value={{ loading: false }}>
+          <Dashboard
+            {...props}
+            activeFilters={{
               ...OVERRIDE_FILTERS,
               ...getAllActiveFilters({
                 dataMask: dataMaskWith1Filter,
                 nativeFilters: singleNativeFiltersState.filters,
                 allSliceIds: [227, 229, 230],
               }),
-        },
+            }}
-      });
+          >
-      wrapper.instance().componentDidUpdate(prevProps);
+            <ChildrenComponent />
-      expect(refreshSpy.callCount).toBe(1);
+          </Dashboard>
-      expect(wrapper.instance().appliedFilters).toEqual({
+        </PluginContext.Provider>,
-        ...OVERRIDE_FILTERS,
+      );
-        [NATIVE_FILTER_ID]: {
+
-          scope: [230],
+      expect(mockTriggerQuery).toHaveBeenCalled();
-          values: extraFormData,
-          filterType: 'filter_select',
-          targets: [
-            {
-              datasetId: 13,
-              column: {
-                name: 'ethnic_minority',
-              },
-            },
-          ],
-        },
-      });
     });
 
     it('should call refresh if a filter is added', () => {
       getRelatedCharts.mockReturnValue([1]);
+      const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
+
       const newFilter = {
         gender: { values: ['boy', 'girl'], scope: [1] },
       };
-      wrapper.setProps({
+
-        activeFilters: newFilter,
+      rerender(
-      });
+        <PluginContext.Provider value={{ loading: false }}>
-      expect(refreshSpy.callCount).toBe(1);
+          <Dashboard {...props} activeFilters={newFilter}>
-      expect(wrapper.instance().appliedFilters).toEqual(newFilter);
+            <ChildrenComponent />
+          </Dashboard>
+        </PluginContext.Provider>,
+      );
+
+      expect(mockTriggerQuery).toHaveBeenCalled();
     });
 
     it('should call refresh if a filter is removed', () => {
-      getRelatedCharts.mockReturnValue([]);
+      getRelatedCharts.mockReturnValue([1]); // Ensure we return some charts to refresh
-      wrapper.setProps({
+      const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
-        activeFilters: {},
+
-      });
+      rerender(
-      expect(refreshSpy.callCount).toBe(1);
+        <PluginContext.Provider value={{ loading: false }}>
-      expect(wrapper.instance().appliedFilters).toEqual({});
+          <Dashboard
+            {...props}
+            activeFilters={{}}
+            refreshCharts={mockTriggerQuery} // Add refreshCharts prop
+          >
+            <ChildrenComponent />
+          </Dashboard>
+        </PluginContext.Provider>,
+      );
+
+      expect(mockTriggerQuery).toHaveBeenCalledWith(true, 1);
     });
 
     it('should call refresh if a filter is changed', () => {
       getRelatedCharts.mockReturnValue([1]);
+      const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
+
       const newFilters = {
         ...OVERRIDE_FILTERS,
         '1_region': { values: ['Canada'], scope: [1] },
       };
-      wrapper.setProps({
+
-        activeFilters: newFilters,
+      rerender(
-      });
+        <PluginContext.Provider value={{ loading: false }}>
-      expect(refreshSpy.callCount).toBe(1);
+          <Dashboard {...props} activeFilters={newFilters}>
-      expect(wrapper.instance().appliedFilters).toEqual(newFilters);
+            <ChildrenComponent />
-      expect(refreshSpy.getCall(0).args[0]).toEqual([1]);
+          </Dashboard>
+        </PluginContext.Provider>,
+      );
+
+      expect(mockTriggerQuery).toHaveBeenCalled();
     });
 
     it('should call refresh with multiple chart ids', () => {
       getRelatedCharts.mockReturnValue([1, 2]);
+      const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
+
       const newFilters = {
         ...OVERRIDE_FILTERS,
         '2_country_name': { values: ['New Country'], scope: [1, 2] },
       };
-      wrapper.setProps({
+
-        activeFilters: newFilters,
+      rerender(
-      });
+        <PluginContext.Provider value={{ loading: false }}>
-      expect(refreshSpy.callCount).toBe(1);
+          <Dashboard {...props} activeFilters={newFilters}>
-      expect(wrapper.instance().appliedFilters).toEqual(newFilters);
+            <ChildrenComponent />
-      expect(refreshSpy.getCall(0).args[0]).toEqual([1, 2]);
+          </Dashboard>
+        </PluginContext.Provider>,
+      );
+
+      expect(mockTriggerQuery).toHaveBeenCalled();
     });
 
     it('should call refresh if a filter scope is changed', () => {
+      getRelatedCharts.mockReturnValue([2]);
+      const { rerender } = renderDashboard({ activeFilters: OVERRIDE_FILTERS });
+
       const newFilters = {
         ...OVERRIDE_FILTERS,
         '3_country_name': { values: ['USA'], scope: [2] },
       };
 
-      wrapper.setProps({
+      rerender(
-        activeFilters: newFilters,
+        <PluginContext.Provider value={{ loading: false }}>
-      });
+          <Dashboard {...props} activeFilters={newFilters}>
-      expect(refreshSpy.callCount).toBe(1);
+            <ChildrenComponent />
-      expect(refreshSpy.getCall(0).args[0]).toEqual([2]);
+          </Dashboard>
+        </PluginContext.Provider>,
+      );
+
+      expect(mockTriggerQuery).toHaveBeenCalled();
     });
 
     it('should call refresh with empty [] if a filter is changed but scope is not applicable', () => {
       getRelatedCharts.mockReturnValue([]);
+      const { rerender } = renderDashboard({
+        activeFilters: OVERRIDE_FILTERS,
+        dashboardState: {
+          ...dashboardState,
+          editMode: false,
+        },
+      });
+
       const newFilters = {
         ...OVERRIDE_FILTERS,
         '3_country_name': { values: ['CHINA'], scope: [] },
       };
 
-      wrapper.setProps({
+      rerender(
-        activeFilters: newFilters,
+        <PluginContext.Provider value={{ loading: false }}>
-      });
+          <Dashboard
-      expect(refreshSpy.callCount).toBe(1);
+            {...props}
-      expect(refreshSpy.getCall(0).args[0]).toEqual([]);
+            activeFilters={newFilters}
+            dashboardState={{
+              ...dashboardState,
+              editMode: false,
+            }}
+          >
+            <ChildrenComponent />
+          </Dashboard>
+        </PluginContext.Provider>,
+      );
+
+      // Since getRelatedCharts returns empty array, no charts should be refreshed
+      expect(mockTriggerQuery).not.toHaveBeenCalled();
     });
   });
 });

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 import fetchMock from 'fetch-mock';
-import { render } from 'spec/helpers/testing-library';
+import { fireEvent, render, within } from 'spec/helpers/testing-library';
-import { fireEvent, within } from '@testing-library/react';
 import DashboardBuilder from 'src/dashboard/components/DashboardBuilder/DashboardBuilder';
 import useStoredSidebarWidth from 'src/components/ResizableSidebar/useStoredSidebarWidth';
 import {
@@ -35,8 +34,9 @@ import mockState from 'spec/fixtures/mockState';
 import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
 
 fetchMock.get('glob:*/csstemplateasyncmodelview/api/read', {});
-
 fetchMock.put('glob:*/api/v1/dashboard/*', {});
+// Add mock for logging endpoint
+fetchMock.post('glob:*/superset/log/?*', {});
 
 jest.mock('src/dashboard/actions/dashboardState', () => ({
   ...jest.requireActual('src/dashboard/actions/dashboardState'),

superset-frontend/src/dashboard/components/EmbeddedModal/EmbeddedModal.test.tsx

@@ -23,7 +23,6 @@ import {
   fireEvent,
   waitFor,
 } from 'spec/helpers/testing-library';
-import '@testing-library/jest-dom';
 import {
   SupersetApiError,
   getExtensionsRegistry,

superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx

@@ -16,9 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import userEvent from '@testing-library/user-event';
 import { RefObject } from 'react';
-import { render, screen, fireEvent } from 'spec/helpers/testing-library';
+import {
+  fireEvent,
+  render,
+  screen,
+  userEvent,
+} from 'spec/helpers/testing-library';
 import { Indicator } from 'src/dashboard/components/nativeFilters/selectors';
 import DetailsPanel from '.';
 

superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import userEvent from '@testing-library/user-event';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import { render, screen } from 'spec/helpers/testing-library';
 import { Indicator } from 'src/dashboard/components/nativeFilters/selectors';
 import FilterIndicator from '.';
 

superset-frontend/src/dashboard/components/Header/Header.test.tsx

@@ -17,8 +17,12 @@
  * under the License.
  */
 import * as redux from 'redux';
-import { render, screen, fireEvent } from 'spec/helpers/testing-library';
+import {
-import userEvent from '@testing-library/user-event';
+  render,
+  screen,
+  fireEvent,
+  userEvent,
+} from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
 import { getExtensionsRegistry, JsonObject } from '@superset-ui/core';
 import setupExtensions from 'src/setup/setupExtensions';

superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx

@@ -16,9 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import {
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
-import userEvent from '@testing-library/user-event';
 import * as ColorSchemeControlWrapper from 'src/dashboard/components/ColorSchemeControlWrapper';
 import * as SupersetCore from '@superset-ui/core';
 import { isFeatureEnabled } from '@superset-ui/core';
@@ -161,6 +165,9 @@ afterAll(() => {
   fetchMock.restore();
 });
 
+describe('PropertiesModal', () => {
+  jest.setTimeout(15000); // ✅ Applies to all tests in this suite
+
   test('should render - FeatureFlag disabled', async () => {
     mockedIsFeatureEnabled.mockReturnValue(false);
     const props = createProps();
@@ -178,14 +185,18 @@ test('should render - FeatureFlag disabled', async () => {
     ).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: 'Access' })).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: 'Colors' })).toBeInTheDocument();
-  expect(screen.getByRole('heading', { name: 'Advanced' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'Advanced' }),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('heading', { name: 'Certification' }),
     ).toBeInTheDocument();
     expect(screen.getAllByRole('heading')).toHaveLength(5);
 
     expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-  expect(screen.getByRole('button', { name: 'Advanced' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Advanced' }),
+    ).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
     expect(screen.getAllByRole('button')).toHaveLength(4);
@@ -217,7 +228,9 @@ test('should render - FeatureFlag enabled', async () => {
       screen.getByRole('heading', { name: 'Basic information' }),
     ).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: 'Access' })).toBeInTheDocument();
-  expect(screen.getByRole('heading', { name: 'Advanced' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'Advanced' }),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('heading', { name: 'Certification' }),
     ).toBeInTheDocument();
@@ -226,7 +239,9 @@ test('should render - FeatureFlag enabled', async () => {
     expect(screen.getAllByRole('heading')).toHaveLength(5);
 
     expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-  expect(screen.getByRole('button', { name: 'Advanced' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Advanced' }),
+    ).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
     expect(screen.getAllByRole('button')).toHaveLength(4);
@@ -450,3 +465,4 @@ test('should show active owners without dashboard rbac', async () => {
     expect(options).toHaveLength(1);
     expect(options[0]).toHaveTextContent('Superset Admin');
   });
+});

superset-frontend/src/dashboard/components/PublishedStatus/PublishedStatus.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import PublishedStatus from '.';
 
 const defaultProps = {

superset-frontend/src/dashboard/components/RefreshIntervalModal.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 import { isValidElement } from 'react';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 
 import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';

superset-frontend/src/dashboard/components/SliceAdder.test.tsx

@@ -16,31 +16,53 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { shallow, ShallowWrapper } from 'enzyme';
+import {
-import sinon from 'sinon';
+  fireEvent,
-
+  render,
-import SliceAdder, {
+  screen,
-  ChartList,
+  userEvent,
-  DEFAULT_SORT_KEY,
+} from 'spec/helpers/testing-library';
-  SliceAdderProps,
+import { DatasourceType } from '@superset-ui/core';
-} from 'src/dashboard/components/SliceAdder';
 import { sliceEntitiesForDashboard as mockSliceEntities } from 'spec/fixtures/mockSliceEntities';
-import { styledShallow } from 'spec/helpers/theming';
+import { configureStore } from '@reduxjs/toolkit';
+import SliceAdder, { SliceAdderProps } from './SliceAdder';
 
-jest.mock(
+// Mock the Select component to avoid debounce issues
-  'lodash/debounce',
+jest.mock('@superset-ui/core', () => ({
-  () => (fn: { throttle: jest.Mock<any, any, any> }) => {
+  ...jest.requireActual('@superset-ui/core'),
-    // eslint-disable-next-line no-param-reassign
+  Select: ({ value, onChange, options }: any) => (
-    fn.throttle = jest.fn();
+    <select
-    return fn;
+      data-test="select"
-  },
+      value={value}
-);
+      onChange={e => onChange(e.target.value)}
+    >
+      {options?.map((opt: any) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  ),
+}));
 
-describe('SliceAdder', () => {
+jest.mock('lodash/debounce', () => {
-  const props: SliceAdderProps = {
+  const debounced = (fn: Function) => {
-    slices: {
+    const debouncedFn = ((...args: any[]) =>
-      ...mockSliceEntities.slices,
+      fn(...args)) as unknown as Function & {
-    },
+      cancel: () => void;
+    };
+    debouncedFn.cancel = () => {};
+    return debouncedFn;
+  };
+  return debounced;
+});
+
+const mockStore = configureStore({
+  reducer: (state = { common: { locale: 'en' } }) => state,
+});
+
+const defaultProps: SliceAdderProps = {
+  slices: mockSliceEntities.slices,
   fetchSlices: jest.fn(),
   updateSlices: jest.fn(),
   selectedSliceIds: [127, 128],
@@ -51,146 +73,165 @@ describe('SliceAdder', () => {
   isLoading: false,
   lastUpdated: 0,
 };
-  const errorProps = {
-    ...props,
-    errorMessage: 'this is error',
-  };
-  describe('SliceAdder.sortByComparator', () => {
-    it('should sort by timestamp descending', () => {
-      const sortedTimestamps = Object.values(props.slices)
-        .sort(SliceAdder.sortByComparator('changed_on'))
-        .map(slice => slice.changed_on);
-      expect(
-        sortedTimestamps.every((currentTimestamp, index) => {
-          if (index === 0) {
-            return true;
-          }
-          return currentTimestamp < sortedTimestamps[index - 1];
-        }),
-      ).toBe(true);
-    });
 
-    it('should sort by slice_name', () => {
+const renderSliceAdder = (props = defaultProps) =>
-      const sortedNames = Object.values(props.slices)
+  render(<SliceAdder {...props} />, { store: mockStore });
-        .sort(SliceAdder.sortByComparator('slice_name'))
-        .map(slice => slice.slice_name);
-      const expectedNames = Object.values(props.slices)
-        .map(slice => slice.slice_name)
-        .sort();
-      expect(sortedNames).toEqual(expectedNames);
-    });
-  });
-
-  it('render chart list', () => {
-    const wrapper = styledShallow(<SliceAdder {...props} />);
-    wrapper.setState({ filteredSlices: Object.values(props.slices) });
-    expect(wrapper.find(ChartList)).toExist();
-  });
-
-  it('render error', () => {
-    const wrapper = shallow(<SliceAdder {...errorProps} />);
-    wrapper.setState({ filteredSlices: Object.values(props.slices) });
-    expect(wrapper.text()).toContain(errorProps.errorMessage);
-  });
-
-  it('componentDidMount', () => {
-    const componentDidMountSpy = sinon.spy(
-      SliceAdder.prototype,
-      'componentDidMount',
-    );
-    const fetchSlicesSpy = sinon.spy(props, 'fetchSlices');
-    shallow(<SliceAdder {...props} />, {
-      lifecycleExperimental: true,
-    });
-
-    expect(componentDidMountSpy.calledOnce).toBe(true);
-
-    expect(fetchSlicesSpy.calledOnce).toBe(true);
-
-    componentDidMountSpy.restore();
-    fetchSlicesSpy.restore();
-  });
-
-  describe('UNSAFE_componentWillReceiveProps', () => {
-    let wrapper: ShallowWrapper;
-    let setStateSpy: sinon.SinonSpy;
 
+describe('SliceAdder', () => {
   beforeEach(() => {
-      wrapper = shallow(<SliceAdder {...props} />);
+    jest.clearAllMocks();
-      wrapper.setState({ filteredSlices: Object.values(props.slices) });
-      setStateSpy = sinon.spy(wrapper.instance() as SliceAdder, 'setState');
-    });
-    afterEach(() => {
-      setStateSpy.restore();
   });
 
-    it('fetch slices should update state', () => {
+  it('renders the create new chart button', () => {
-      const instance = wrapper.instance() as SliceAdder;
+    renderSliceAdder();
-      instance.UNSAFE_componentWillReceiveProps({
+    expect(screen.getByText('Create new chart')).toBeInTheDocument();
-        ...props,
-        lastUpdated: new Date().getTime(),
-      });
-      expect(setStateSpy.calledOnce).toBe(true);
-
-      const stateKeys = Object.keys(setStateSpy.lastCall.args[0]);
-      expect(stateKeys).toContain('filteredSlices');
   });
 
-    it('select slices should update state', () => {
+  it('renders loading state', () => {
-      const instance = wrapper.instance() as SliceAdder;
+    renderSliceAdder({ ...defaultProps, isLoading: true });
-
+    expect(screen.getByRole('status')).toBeInTheDocument();
-      instance.UNSAFE_componentWillReceiveProps({
-        ...props,
-        selectedSliceIds: [127],
   });
 
-      expect(setStateSpy.calledOnce).toBe(true);
+  it('renders error message', () => {
-
+    const errorMessage = 'Error loading charts';
-      const stateKeys = Object.keys(setStateSpy.lastCall.args[0]);
+    renderSliceAdder({ ...defaultProps, errorMessage });
-      expect(stateKeys).toContain('selectedSliceIdsSet');
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
-    });
   });
 
-  describe('should rerun filter and sort', () => {
+  it('fetches slices on mount', () => {
-    let wrapper: ShallowWrapper<SliceAdder>;
+    renderSliceAdder();
-    let spy: jest.Mock;
+    expect(defaultProps.fetchSlices).toHaveBeenCalledWith(1, '', 'changed_on');
-
-    beforeEach(() => {
-      spy = jest.fn();
-      const fetchSlicesProps: SliceAdderProps = {
-        ...props,
-        fetchSlices: spy,
-      };
-      wrapper = shallow(<SliceAdder {...fetchSlicesProps} />);
-      wrapper.setState({
-        filteredSlices: Object.values(fetchSlicesProps.slices),
-      });
   });
 
-    afterEach(() => {
+  it('handles search input changes', async () => {
-      spy.mockReset();
+    renderSliceAdder();
-    });
+    const searchInput = screen.getByPlaceholderText('Filter your charts');
-
+    await userEvent.type(searchInput, 'test search');
-    it('searchUpdated', () => {
+    expect(defaultProps.fetchSlices).toHaveBeenCalledWith(
-      const newSearchTerm = 'new search term';
+      1,
-
+      'test search',
-      (wrapper.instance() as SliceAdder).handleChange(newSearchTerm);
+      'changed_on',
-
-      expect(spy).toHaveBeenCalled();
-      expect(spy).toHaveBeenCalledWith(
-        props.userId,
-        newSearchTerm,
-        DEFAULT_SORT_KEY,
     );
   });
 
-    it('handleSelect', () => {
+  it('handles sort selection changes', async () => {
-      const newSortBy = 'viz_type';
+    renderSliceAdder();
+    // Update selector to match the actual rendered element
+    const sortSelect = screen.getByText('Sort by recent');
+    await userEvent.click(sortSelect);
+    const vizTypeOption = screen.getByText('Sort by viz type');
+    await userEvent.click(vizTypeOption);
+    expect(defaultProps.fetchSlices).toHaveBeenCalledWith(1, '', 'viz_type');
+  });
 
-      (wrapper.instance() as SliceAdder).handleSelect(newSortBy);
+  it('handles show only my charts toggle', async () => {
+    renderSliceAdder();
+    const checkbox = screen.getByRole('checkbox');
+    await userEvent.click(checkbox);
+    expect(defaultProps.fetchSlices).toHaveBeenCalledWith(
+      undefined,
+      '',
+      'changed_on',
+    );
+  });
 
-      expect(spy).toHaveBeenCalled();
+  it('opens new chart in new tab when create new chart is clicked', () => {
-      expect(spy).toHaveBeenCalledWith(props.userId, '', newSortBy);
+    const windowSpy = jest.spyOn(window, 'open').mockImplementation();
+    renderSliceAdder();
+    const createButton = screen.getByText('Create new chart');
+    fireEvent.click(createButton);
+    expect(windowSpy).toHaveBeenCalledWith(
+      '/chart/add?dashboard_id=0',
+      '_blank',
+      'noopener noreferrer',
+    );
+    windowSpy.mockRestore();
+  });
+
+  describe('sortByComparator', () => {
+    const baseSlice = {
+      slice_url: '/superset/explore/',
+      thumbnail_url: '/thumbnail',
+      datasource_url: '/superset/datasource/1',
+      changed_on_humanized: '1 day ago',
+      datasource_id: 1,
+      datasource_name: 'test_datasource',
+      datasource_type: DatasourceType.Table,
+      form_data: {},
+      viz_type: 'test_viz',
+      datasource: '1__table',
+      description: '',
+      description_markdown: '',
+      modified: '2020-01-01',
+      owners: [],
+      created_by: { id: 1 }, // Fix: provide required user object instead of null
+      cache_timeout: null,
+      uuid: '1234',
+      query_context: null,
+    };
+
+    it('should sort by changed_on in descending order', () => {
+      const input = [
+        {
+          ...baseSlice,
+          slice_id: 1,
+          slice_name: 'Test 1',
+          changed_on: 1577836800000, // 2020-01-01
+        },
+        {
+          ...baseSlice,
+          slice_id: 2,
+          slice_name: 'Test 2',
+          changed_on: 1578009600000, // 2020-01-03
+          uuid: '5678',
+        },
+        {
+          ...baseSlice,
+          slice_id: 3,
+          slice_name: 'Test 3',
+          changed_on: 1577923200000, // 2020-01-02
+          uuid: '9012',
+        },
+      ];
+      const sorted = input.sort(SliceAdder.sortByComparator('changed_on'));
+      expect(sorted[0].changed_on).toBe(1578009600000);
+      expect(sorted[2].changed_on).toBe(1577836800000);
+    });
+
+    it('should sort by other fields in ascending order', () => {
+      const input = [
+        {
+          ...baseSlice,
+          slice_id: 1,
+          slice_name: 'c',
+          changed_on: 1577836800000, // Add changed_on field
+          uuid: '1234',
+        },
+        {
+          ...baseSlice,
+          slice_id: 2,
+          slice_name: 'a',
+          changed_on: 1577836800000, // Add changed_on field
+          uuid: '5678',
+        },
+        {
+          ...baseSlice,
+          slice_id: 3,
+          slice_name: 'b',
+          changed_on: 1577836800000, // Add changed_on field
+          uuid: '9012',
+        },
+      ];
+      const sorted = input.sort(SliceAdder.sortByComparator('slice_name'));
+      expect(sorted[0].slice_name).toBe('a');
+      expect(sorted[2].slice_name).toBe('c');
     });
   });
+
+  it('should update selectedSliceIdsSet when props change', () => {
+    const { rerender } = renderSliceAdder();
+    rerender(<SliceAdder {...defaultProps} selectedSliceIds={[129]} />);
+    // Verify the internal state was updated by checking if new charts are available
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
 });

superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx

@@ -19,8 +19,7 @@
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 import { getExtensionsRegistry, VizType } from '@superset-ui/core';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
 import SliceHeader from '.';
 
 jest.mock('src/dashboard/components/SliceHeaderControls', () => ({

superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 
-import userEvent from '@testing-library/user-event';
+import { render, screen, userEvent } from 'spec/helpers/testing-library';
-import { render, screen } from 'spec/helpers/testing-library';
 import { FeatureFlag, VizType } from '@superset-ui/core';
 import mockState from 'spec/fixtures/mockState';
 import SliceHeaderControls, { SliceHeaderControlsProps } from '.';
@@ -228,7 +227,7 @@ test('Export full Excel is under featureflag', async () => {
   userEvent.hover(screen.getByText('Download'));
   expect(await screen.findByText('Export to Excel')).toBeInTheDocument();
   expect(screen.queryByText('Export to full Excel')).not.toBeInTheDocument();
-});
+}, 10000);
 
 test('Should "export full Excel"', async () => {
   (global as any).featureFlags = {