Merge remote-tracking branch 'upstream/master'

Co-authored-by: Erkka Tahvanainen <erkka.tahvanainen@confidently.fi>

.github/workflows/embedded-sdk-release.yml

@@ -31,7 +31,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version-file: './superset-embedded-sdk/.nvmrc'
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci
       - run: npm run ci:release

.github/workflows/embedded-sdk-test.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version-file: './superset-embedded-sdk/.nvmrc'
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci
       - run: npm test

.github/workflows/ephemeral-env.yml

@@ -190,8 +190,9 @@ jobs:
           ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
           ECR_REPOSITORY: superset-ci
           IMAGE_TAG: apache/superset:${{ needs.ephemeral-env-label.outputs.sha }}-ci
+          PR_NUMBER: ${{ github.event.inputs.issue_number || github.event.pull_request.number }}
         run: |
-          docker tag $IMAGE_TAG $ECR_REGISTRY/$ECR_REPOSITORY:pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-ci
+          docker tag $IMAGE_TAG $ECR_REGISTRY/$ECR_REPOSITORY:pr-$PR_NUMBER-ci
           docker push -a $ECR_REGISTRY/$ECR_REPOSITORY
 
   ephemeral-env-up:
@@ -222,11 +223,13 @@ jobs:
       - name: Check target image exists in ECR
         id: check-image
         continue-on-error: true
+        env:
+          PR_NUMBER: ${{ github.event.inputs.issue_number || github.event.pull_request.number }}
         run: |
           aws ecr describe-images \
           --registry-id $(echo "${{ steps.login-ecr.outputs.registry }}" | grep -Eo "^[0-9]+") \
           --repository-name superset-ci \
-          --image-ids imageTag=pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-ci
+          --image-ids imageTag=pr-$PR_NUMBER-ci
 
       - name: Fail on missing container image
         if: steps.check-image.outcome == 'failure'
@@ -236,7 +239,7 @@ jobs:
           script: |
             const errMsg = '@${{ github.event.comment.user.login }} Container image not yet published for this PR. Please try again when build is complete.';
             github.rest.issues.createComment({
-              issue_number: ${{ github.event.inputs.issue_number || github.event.issue.number }},
+              issue_number: ${{ github.event.inputs.issue_number || github.event.pull_request.number }},
               owner: context.repo.owner,
               repo: context.repo.repo,
               body: errMsg
@@ -249,7 +252,7 @@ jobs:
         with:
           task-definition: .github/workflows/ecs-task-definition.json
           container-name: superset-ci
-          image: ${{ steps.login-ecr.outputs.registry }}/superset-ci:pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-ci
+          image: ${{ steps.login-ecr.outputs.registry }}/superset-ci:pr-${{ github.event.inputs.issue_number || github.event.pull_request.number }}-ci
 
       - name: Update env vars in the Amazon ECS task definition
         run: |
@@ -258,29 +261,30 @@ jobs:
       - name: Describe ECS service
         id: describe-services
         run: |
-          echo "active=$(aws ecs describe-services --cluster superset-ci --services pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-service | jq '.services[] | select(.status == "ACTIVE") | any')" >> $GITHUB_OUTPUT
+          echo "active=$(aws ecs describe-services --cluster superset-ci --services pr-${{ github.event.inputs.issue_number || github.event.pull_request.number }}-service | jq '.services[] | select(.status == "ACTIVE") | any')" >> $GITHUB_OUTPUT
       - name: Create ECS service
         id: create-service
         if: steps.describe-services.outputs.active != 'true'
         env:
           ECR_SUBNETS: subnet-0e15a5034b4121710,subnet-0e8efef4a72224974
           ECR_SECURITY_GROUP: sg-092ff3a6ae0574d91
+          PR_NUMBER: ${{ github.event.inputs.issue_number || github.event.pull_request.number }}
         run: |
           aws ecs create-service \
           --cluster superset-ci \
-          --service-name pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-service \
+          --service-name pr-$PR_NUMBER-service \
           --task-definition superset-ci \
           --launch-type FARGATE \
           --desired-count 1 \
           --platform-version LATEST \
           --network-configuration "awsvpcConfiguration={subnets=[$ECR_SUBNETS],securityGroups=[$ECR_SECURITY_GROUP],assignPublicIp=ENABLED}" \
-          --tags key=pr,value=${{ github.event.inputs.issue_number || github.event.issue.number }} key=github_user,value=${{ github.actor }}
+          --tags key=pr,value=$PR_NUMBER key=github_user,value=${{ github.actor }}
       - name: Deploy Amazon ECS task definition
         id: deploy-task
         uses: aws-actions/amazon-ecs-deploy-task-definition@v2
         with:
           task-definition: ${{ steps.task-def.outputs.task-definition }}
-          service: pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-service
+          service: pr-${{ github.event.inputs.issue_number || github.event.pull_request.number }}-service
           cluster: superset-ci
           wait-for-service-stability: true
           wait-for-minutes: 10
@@ -288,7 +292,7 @@ jobs:
       - name: List tasks
         id: list-tasks
         run: |
-          echo "task=$(aws ecs list-tasks --cluster superset-ci --service-name pr-${{ github.event.inputs.issue_number || github.event.issue.number }}-service | jq '.taskArns | first')" >> $GITHUB_OUTPUT
+          echo "task=$(aws ecs list-tasks --cluster superset-ci --service-name pr-${{ github.event.inputs.issue_number || github.event.pull_request.number }}-service | jq '.taskArns | first')" >> $GITHUB_OUTPUT
       - name: Get network interface
         id: get-eni
         run: |

.github/workflows/release.yml

@@ -24,13 +24,7 @@ jobs:
     needs: config
     if: needs.config.outputs.has-secrets
     name: Bump version and publish package(s)
-
     runs-on: ubuntu-24.04
-
-    strategy:
-      matrix:
-        node-version: [20]
-
     steps:
       - uses: actions/checkout@v4
         with:
@@ -46,11 +40,11 @@ jobs:
           git fetch --prune --unshallow
           git tag -d `git tag | grep -E '^trigger-'`
 
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Install Node.js
         if: env.HAS_TAGS
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version-file: './superset-frontend/.nvmrc'
 
       - name: Cache npm
         if: env.HAS_TAGS

.github/workflows/superset-applitool-cypress.yml

@@ -26,7 +26,6 @@ jobs:
       fail-fast: false
       matrix:
         browser: ["chrome"]
-        node: [20]
     env:
       SUPERSET_ENV: development
       SUPERSET_CONFIG: tests.integration_tests.superset_test_config
@@ -66,7 +65,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node }}
+          node-version-file: './superset-frontend/.nvmrc'
       - name: Install npm dependencies
         uses: ./.github/actions/cached-dependencies
         with:

.github/workflows/superset-applitools-storybook.yml

@@ -28,9 +28,6 @@ jobs:
     needs: config
     if: needs.config.outputs.has-secrets
     runs-on: ubuntu-24.04
-    strategy:
-      matrix:
-        node: [20]
     steps:
       - name: "Checkout ${{ github.ref }} ( ${{ github.sha }} )"
         uses: actions/checkout@v4
@@ -41,7 +38,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node }}
+          node-version-file: './superset-frontend/.nvmrc'
       - name: Install eyes-storybook dependencies
         uses: ./.github/actions/cached-dependencies
         with:

.github/workflows/superset-docs-deploy.yml

@@ -35,10 +35,10 @@ jobs:
         with:
           persist-credentials: false
           submodules: recursive
-      - name: Set up Node.js 20
+      - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: './docs/.nvmrc'
       - name: Setup Python
         uses: ./.github/actions/setup-backend/
       - uses: actions/setup-java@v4

.github/workflows/superset-docs-verify.yml

@@ -60,10 +60,10 @@ jobs:
         with:
           persist-credentials: false
           submodules: recursive
-      - name: Set up Node.js 20
+      - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: './docs/.nvmrc'
       - name: yarn install
         run: |
           yarn install --check-cache

.github/workflows/superset-e2e.yml

@@ -109,7 +109,7 @@ jobs:
         if: steps.check.outputs.python || steps.check.outputs.frontend
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version-file: './superset-frontend/.nvmrc'
       - name: Install npm dependencies
         if: steps.check.outputs.python || steps.check.outputs.frontend
         uses: ./.github/actions/cached-dependencies

.github/workflows/superset-translations.yml

@@ -33,7 +33,7 @@ jobs:
         if: steps.check.outputs.frontend
         uses: actions/setup-node@v4
         with:
-          node-version:  '18'
+          node-version-file:  './superset-frontend/.nvmrc'
       - name: Install dependencies
         if: steps.check.outputs.frontend
         uses: ./.github/actions/cached-dependencies

.github/workflows/tech-debt.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: './superset-frontend/.nvmrc'
 
       - name: Install Dependencies
         run: npm install

.gitignore

@@ -21,6 +21,7 @@
 *.swp
 __pycache__
 
+.aider*
 .local
 .cache
 .bento*

Dockerfile

@@ -18,7 +18,7 @@
 ######################################################################
 # Node stage to deal with static asset construction
 ######################################################################
-ARG PY_VER=3.11-slim-bookworm
+ARG PY_VER=3.11.11-slim-bookworm
 
 # If BUILDPLATFORM is null, set it to 'amd64' (or leave as is otherwise).
 ARG BUILDPLATFORM=${BUILDPLATFORM:-amd64}

RESOURCES/STANDARD_ROLES.md

@@ -43,8 +43,8 @@ under the License.
 | can this form post on ResetPasswordView          |:heavy_check_mark:|O|O|O|
 | can this form get on ResetMyPasswordView         |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can this form post on ResetMyPasswordView        |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
-| can this form get on UserInfoEditView            |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
+| can this form get on UserInfoEditView            |:heavy_check_mark:|O|O|O|
-| can this form post on UserInfoEditView           |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
+| can this form post on UserInfoEditView           |:heavy_check_mark:|O|O|O|
 | can show on UserDBModelView                      |:heavy_check_mark:|O|O|O|
 | can edit on UserDBModelView                      |:heavy_check_mark:|O|O|O|
 | can delete on UserDBModelView                    |:heavy_check_mark:|O|O|O|
@@ -65,7 +65,6 @@ under the License.
 | can get on MenuApi                               |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can list on AsyncEventsRestApi                   |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can invalidate on CacheRestApi                   |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
-| can function names on Database                   |:heavy_check_mark:|O|O|O|
 | can csv upload on Database                       |:heavy_check_mark:|O|O|O|
 | can excel upload on Database                     |:heavy_check_mark:|O|O|O|
 | can query form data on Api                       |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
@@ -76,7 +75,6 @@ under the License.
 | can get on Datasource                            |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can my queries on SqlLab                         |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|
 | can log on Superset                              |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
-| can schemas access for csv upload on Superset    |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can import dashboards on Superset                |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can schemas on Superset                          |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can sqllab history on Superset                   |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|
@@ -118,8 +116,6 @@ under the License.
 | menu access on Data                              |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | menu access on Databases                         |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | menu access on Datasets                          |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
-| menu access on Upload a CSV                      |:heavy_check_mark:|:heavy_check_mark:|O|O|
-| menu access on Upload Excel                      |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | menu access on Charts                            |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | menu access on Dashboards                        |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | menu access on SQL Lab                           |:heavy_check_mark:|O|O|:heavy_check_mark:|
@@ -129,13 +125,6 @@ under the License.
 | all datasource access on all_datasource_access   |:heavy_check_mark:|:heavy_check_mark:|O|O|
 | all database access on all_database_access       |:heavy_check_mark:|:heavy_check_mark:|O|O|
 | all query access on all_query_access             |:heavy_check_mark:|O|O|O|
-| can edit on UserOAuthModelView                   |:heavy_check_mark:|O|O|O|
-| can list on UserOAuthModelView                   |:heavy_check_mark:|O|O|O|
-| can show on UserOAuthModelView                   |:heavy_check_mark:|O|O|O|
-| can userinfo on UserOAuthModelView               |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
-| can add on UserOAuthModelView                    |:heavy_check_mark:|O|O|O|
-| can delete on UserOAuthModelView                 |:heavy_check_mark:|O|O|O|
-| userinfoedit on UserOAuthModelView               |:heavy_check_mark:|O|O|O|
 | can write on DynamicPlugin                       |:heavy_check_mark:|O|O|O|
 | can edit on DynamicPlugin                        |:heavy_check_mark:|O|O|O|
 | can list on DynamicPlugin                        |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
@@ -192,7 +181,6 @@ under the License.
 | can share chart on Superset                      |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can this form get on ColumnarToDatabaseView      |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can this form post on ColumnarToDatabaseView     |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
-| menu access on Upload a Columnar file            |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can export on Chart                              |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can write on DashboardFilterStateRestApi         |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|
 | can read on DashboardFilterStateRestApi          |:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|O|

UPDATING.md

@@ -46,6 +46,7 @@ assists people when migrating to a new version.
 - [25166](https://github.com/apache/superset/pull/25166) Changed the default configuration of `UPLOAD_FOLDER` from `/app/static/uploads/` to `/static/uploads/`. It also removed the unused `IMG_UPLOAD_FOLDER` and `IMG_UPLOAD_URL` configuration options.
 - [30284](https://github.com/apache/superset/pull/30284) Deprecated GLOBAL_ASYNC_QUERIES_REDIS_CONFIG in favor of the new GLOBAL_ASYNC_QUERIES_CACHE_BACKEND configuration. To leverage Redis Sentinel, set CACHE_TYPE to RedisSentinelCache, or use RedisCache for standalone Redis
 - [31961](https://github.com/apache/superset/pull/31961) Upgraded React from version 16.13.1 to 17.0.2. If you are using custom frontend extensions or plugins, you may need to update them to be compatible with React 17.
+- [31260](https://github.com/apache/superset/pull/31260) Docker images now use `uv pip install` instead of `pip install` to manage the python envrionment. Most docker-based deployments will be affected, whether you derive one of the published images, or have custom bootstrap script that install python libraries (drivers)
 
 ### Potential Downtime
 

docs/docs/installation/docker-compose.mdx

@@ -43,7 +43,6 @@ Note that there are 3 major ways we support to run `docker compose`:
   `export TAG=4.0.0-dev` or `export TAG=3.0.0-dev`, with `latest-dev` being the default.
   That's because The `dev` builds happen to package the `psycopg2-binary` required to connect
   to the Postgres database launched as part of the `docker compose` builds.
-``
 
 More on these two approaches after setting up the requirements for either.
 

docs/docs/installation/kubernetes.mdx

@@ -160,7 +160,7 @@ The following example installs the drivers for BigQuery and Elasticsearch, allow
 ```yaml
 bootstrapScript: |
   #!/bin/bash
-  pip install .[postgres] \
+  uv pip install .[postgres] \
     .[bigquery] \
     .[elasticsearch] &&\
   if [ ! -f ~/bootstrap ]; then echo "Running Superset with uid {{ .Values.runAsUser }}" > ~/bootstrap; fi

pyproject.toml

@@ -87,7 +87,6 @@ dependencies = [
     "redis>=4.6.0, <5.0",
     "selenium>=4.14.0, <5.0",
     "shillelagh[gsheetsapi]>=1.2.18, <2.0",
-    "shortid",
     "sshtunnel>=0.4.0, <0.5",
     "simplejson>=3.15.0",
     "slack_sdk>=3.19.0, <4",

requirements/base.txt

@@ -329,8 +329,6 @@ selenium==4.27.1
     # via apache-superset (pyproject.toml)
 shillelagh==1.2.18
     # via apache-superset (pyproject.toml)
-shortid==0.1.2
-    # via apache-superset (pyproject.toml)
 simplejson==3.19.3
     # via apache-superset (pyproject.toml)
 six==1.16.0

requirements/development.txt

@@ -738,10 +738,6 @@ shillelagh==1.2.18
     # via
     #   -c requirements/base.txt
     #   apache-superset
-shortid==0.1.2
-    # via
-    #   -c requirements/base.txt
-    #   apache-superset
 simplejson==3.19.3
     # via
     #   -c requirements/base.txt

superset-embedded-sdk/.nvmrc

@@ -0,0 +1 @@
+v20.16.0

superset-frontend/.eslintrc.js

@@ -74,7 +74,7 @@ module.exports = {
     'file-progress',
     'lodash',
     'theme-colors',
-    'translation-vars',
+    'i18n-strings',
     'react-prefer-function-component',
     'prettier',
   ],
@@ -284,7 +284,7 @@ module.exports = {
       ],
       rules: {
         'theme-colors/no-literal-colors': 0,
-        'translation-vars/no-template-vars': 0,
+        'i18n-strings/no-template-vars': 0,
         'no-restricted-imports': 0,
         'react/no-void-elements': 0,
       },
@@ -292,7 +292,7 @@ module.exports = {
   ],
   rules: {
     'theme-colors/no-literal-colors': 'error',
-    'translation-vars/no-template-vars': ['error', true],
+    'i18n-strings/no-template-vars': ['error', true],
     camelcase: [
       'error',
       {
@@ -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/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts

@@ -161,7 +161,7 @@ describe('Horizontal FilterBar', () => {
     cy.getBySel('filter-control-name')
       .contains('test_12')
       .should('not.be.visible');
-    cy.get('.ant-popover-inner-content').scrollTo('bottom');
+    cy.get('.antd5-popover-inner').scrollTo('bottom');
     cy.getBySel('filter-control-name').contains('test_12').should('be.visible');
   });
 
@@ -226,7 +226,7 @@ describe('Horizontal FilterBar', () => {
     cy.getBySel('slice-header').within(() => {
       cy.get('.filter-counts').trigger('mouseover');
     });
-    cy.get('.filterStatusPopover').contains('test_9').click();
+    cy.getBySel('filter-status-popover').contains('test_9').click();
     cy.getBySel('dropdown-content').should('be.visible');
     cy.get('.ant-select-focused').should('be.visible');
   });

superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts

@@ -456,19 +456,19 @@ export function applyAdvancedTimeRangeFilterOnDashboard(
   endRange?: string,
 ) {
   cy.get('.control-label').contains('RANGE TYPE').should('be.visible');
-  cy.get('.ant-popover-content .ant-select-selector')
+  cy.get('.antd5-popover-content .ant-select-selector')
     .should('be.visible')
     .click();
   cy.get(`[label="Advanced"]`).should('be.visible').click();
   cy.get('.section-title').contains('Advanced Time Range').should('be.visible');
   if (startRange) {
-    cy.get('.ant-popover-inner-content')
+    cy.get('.antd5-popover-inner-content')
       .find('[class^=ant-input]')
       .first()
       .type(`${startRange}`);
   }
   if (endRange) {
-    cy.get('.ant-popover-inner-content')
+    cy.get('.antd5-popover-inner-content')
       .find('[class^=ant-input]')
       .last()
       .type(`${endRange}`);

superset-frontend/cypress-base/cypress/support/directories.ts

@@ -555,7 +555,7 @@ export const exploreView = {
     timeSection: {
       timeRangeFilter: dataTestLocator('time-range-trigger'),
       timeRangeFilterModal: {
-        container: '.ant-popover-content',
+        container: '.antd5-popover-content',
         footer: '.footer',
         cancelButton: dataTestLocator('cancel-button'),
         configureLastTimeRange: {

superset-frontend/eslint-rules/eslint-plugin-i18n-strings/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "eslint-plugin-translation-vars",
+  "name": "eslint-plugin-i18n-strings",
   "version": "1.0.0",
   "description": "Warns about translation variables",
   "main": "index.js",

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"
@@ -139,6 +139,7 @@
     "dom-to-pdf": "^0.3.2",
     "echarts": "^5.6.0",
     "emotion-rgba": "0.0.12",
+    "eslint-plugin-i18n-strings": "file:eslint-rules/eslint-plugin-i18n-strings",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "fuse.js": "^7.0.0",
@@ -253,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",
@@ -301,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",
@@ -321,8 +323,7 @@
     "eslint-plugin-react-prefer-function-component": "^3.3.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.4.0",
-    "eslint-plugin-theme-colors": "file:tools/eslint-plugin-theme-colors",
+    "eslint-plugin-theme-colors": "file:eslint-rules/eslint-plugin-theme-colors",
-    "eslint-plugin-translation-vars": "file:tools/eslint-plugin-translation-vars",
     "exports-loader": "^5.0.0",
     "fetch-mock": "^7.7.3",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
@@ -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-chart-controls/src/components/SQLPopover.tsx

@@ -17,9 +17,9 @@
  * under the License.
  */
 import { useEffect, useState } from 'react';
-import { Popover } from 'antd';
+import { Popover } from 'antd-v5';
 import type ReactAce from 'react-ace';
-import type { PopoverProps } from 'antd/lib/popover';
+import type { PopoverProps } from 'antd-v5/lib/popover';
 import { CalculatorOutlined } from '@ant-design/icons';
 import { css, styled, useTheme, t } from '@superset-ui/core';
 
@@ -72,7 +72,7 @@ export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => {
         />
       }
       placement="bottomLeft"
-      arrowPointAtCenter
+      arrow={{ pointAtCenter: true }}
       title={t('SQL expression')}
       {...props}
     >

superset-frontend/packages/superset-ui-core/src/query/getMetricLabel.ts

@@ -19,17 +19,23 @@
 
 import { QueryFormMetric, isSavedMetric, isAdhocMetricSimple } from './types';
 
-export default function getMetricLabel(metric: QueryFormMetric): string {
+export default function getMetricLabel(
+  metric: QueryFormMetric,
+  index?: number,
+  queryFormMetrics?: QueryFormMetric[],
+  verboseMap?: Record<string, string>,
+): string {
+  let label = '';
   if (isSavedMetric(metric)) {
-    return metric;
+    label = metric;
-  }
+  } else if (metric.label) {
-  if (metric.label) {
+    ({ label } = metric);
-    return metric.label;
+  } else if (isAdhocMetricSimple(metric)) {
-  }
+    label = `${metric.aggregate}(${
-  if (isAdhocMetricSimple(metric)) {
-    return `${metric.aggregate}(${
       metric.column.columnName || metric.column.column_name
     })`;
+  } else {
+    label = metric.sqlExpression;
   }
-  return metric.sqlExpression;
+  return verboseMap?.[label] || label;
 }

superset-frontend/packages/superset-ui-core/test/chart-composition/legend/WithLegend.test.tsx

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import { mount, shallow } from 'enzyme';
 import { triggerResizeObserver } from 'resize-observer-polyfill';
 import { promiseTimeout, WithLegend } from '@superset-ui/core';
+import { render } from '@testing-library/react';
 
 let renderChart = jest.fn();
 let renderLegend = jest.fn();
@@ -32,18 +32,18 @@ describe.skip('WithLegend', () => {
   });
 
   it('sets className', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <WithLegend
         className="test-class"
         renderChart={renderChart}
         renderLegend={renderLegend}
       />,
     );
-    expect(wrapper.hasClass('test-class')).toEqual(true);
+    expect(container.querySelectorAll('.test-class')).toHaveLength(1);
   });
 
   it('renders when renderLegend is not set', () => {
-    const wrapper = mount(
+    const { container } = render(
       <WithLegend
         debounceTime={1}
         width={500}
@@ -56,13 +56,13 @@ describe.skip('WithLegend', () => {
     // Have to delay more than debounceTime (1ms)
     return promiseTimeout(() => {
       expect(renderChart).toHaveBeenCalledTimes(1);
-      expect(wrapper.render().find('div.chart')).toHaveLength(1);
+      expect(container.querySelectorAll('div.chart')).toHaveLength(1);
-      expect(wrapper.render().find('div.legend')).toHaveLength(0);
+      expect(container.querySelectorAll('div.legend')).toHaveLength(0);
     }, 100);
   });
 
   it('renders', () => {
-    const wrapper = mount(
+    const { container } = render(
       <WithLegend
         debounceTime={1}
         width={500}
@@ -77,13 +77,13 @@ describe.skip('WithLegend', () => {
     return promiseTimeout(() => {
       expect(renderChart).toHaveBeenCalledTimes(1);
       expect(renderLegend).toHaveBeenCalledTimes(1);
-      expect(wrapper.render().find('div.chart')).toHaveLength(1);
+      expect(container.querySelectorAll('div.chart')).toHaveLength(1);
-      expect(wrapper.render().find('div.legend')).toHaveLength(1);
+      expect(container.querySelectorAll('div.legend')).toHaveLength(1);
     }, 100);
   });
 
   it('renders without width or height', () => {
-    const wrapper = mount(
+    const { container } = render(
       <WithLegend
         debounceTime={1}
         renderChart={renderChart}
@@ -96,13 +96,13 @@ describe.skip('WithLegend', () => {
     return promiseTimeout(() => {
       expect(renderChart).toHaveBeenCalledTimes(1);
       expect(renderLegend).toHaveBeenCalledTimes(1);
-      expect(wrapper.render().find('div.chart')).toHaveLength(1);
+      expect(container.querySelectorAll('div.chart')).toHaveLength(1);
-      expect(wrapper.render().find('div.legend')).toHaveLength(1);
+      expect(container.querySelectorAll('div.legend')).toHaveLength(1);
     }, 100);
   });
 
   it('renders legend on the left', () => {
-    const wrapper = mount(
+    const { container } = render(
       <WithLegend
         debounceTime={1}
         position="left"
@@ -116,13 +116,13 @@ describe.skip('WithLegend', () => {
     return promiseTimeout(() => {
       expect(renderChart).toHaveBeenCalledTimes(1);
       expect(renderLegend).toHaveBeenCalledTimes(1);
-      expect(wrapper.render().find('div.chart')).toHaveLength(1);
+      expect(container.querySelectorAll('div.chart')).toHaveLength(1);
-      expect(wrapper.render().find('div.legend')).toHaveLength(1);
+      expect(container.querySelectorAll('div.legend')).toHaveLength(1);
     }, 100);
   });
 
   it('renders legend on the right', () => {
-    const wrapper = mount(
+    const { container } = render(
       <WithLegend
         debounceTime={1}
         position="right"
@@ -136,13 +136,13 @@ describe.skip('WithLegend', () => {
     return promiseTimeout(() => {
       expect(renderChart).toHaveBeenCalledTimes(1);
       expect(renderLegend).toHaveBeenCalledTimes(1);
-      expect(wrapper.render().find('div.chart')).toHaveLength(1);
+      expect(container.querySelectorAll('div.chart')).toHaveLength(1);
-      expect(wrapper.render().find('div.legend')).toHaveLength(1);
+      expect(container.querySelectorAll('div.legend')).toHaveLength(1);
     }, 100);
   });
 
   it('renders legend on the top', () => {
-    const wrapper = mount(
+    const { container } = render(
       <WithLegend
         debounceTime={1}
         position="top"
@@ -156,13 +156,13 @@ describe.skip('WithLegend', () => {
     return promiseTimeout(() => {
       expect(renderChart).toHaveBeenCalledTimes(1);
       expect(renderLegend).toHaveBeenCalledTimes(1);
-      expect(wrapper.render().find('div.chart')).toHaveLength(1);
+      expect(container.querySelectorAll('div.chart')).toHaveLength(1);
-      expect(wrapper.render().find('div.legend')).toHaveLength(1);
+      expect(container.querySelectorAll('div.legend')).toHaveLength(1);
     }, 100);
   });
 
   it('renders legend on the bottom', () => {
-    const wrapper = mount(
+    const { container } = render(
       <WithLegend
         debounceTime={1}
         position="bottom"
@@ -176,13 +176,13 @@ describe.skip('WithLegend', () => {
     return promiseTimeout(() => {
       expect(renderChart).toHaveBeenCalledTimes(1);
       expect(renderLegend).toHaveBeenCalledTimes(1);
-      expect(wrapper.render().find('div.chart')).toHaveLength(1);
+      expect(container.querySelectorAll('div.chart')).toHaveLength(1);
-      expect(wrapper.render().find('div.legend')).toHaveLength(1);
+      expect(container.querySelectorAll('div.legend')).toHaveLength(1);
     }, 100);
   });
 
   it('renders legend with justifyContent set', () => {
-    const wrapper = mount(
+    const { container } = render(
       <WithLegend
         debounceTime={1}
         position="right"
@@ -197,8 +197,8 @@ describe.skip('WithLegend', () => {
     return promiseTimeout(() => {
       expect(renderChart).toHaveBeenCalledTimes(1);
       expect(renderLegend).toHaveBeenCalledTimes(1);
-      expect(wrapper.render().find('div.chart')).toHaveLength(1);
+      expect(container.querySelectorAll('div.chart')).toHaveLength(1);
-      expect(wrapper.render().find('div.legend')).toHaveLength(1);
+      expect(container.querySelectorAll('div.legend')).toHaveLength(1);
     }, 100);
   });
 });

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 => {
+      setup({ loadDatasource: false });
-        expect.assertions(1);
+      await act(async () => {
-        setup({ loadDatasource: false });
+        await new Promise(resolve => setTimeout(resolve, 0));
-        setTimeout(() => {
+      });
-          expect(mockLoadDatasource.mock.calls).toHaveLength(0);
+      expect(mockLoadDatasource).not.toHaveBeenCalled();
-          done(undefined);
+    });
-        }, 0);
-      }));
 
-    it('calls method on mount if loadDatasource is true', () =>
+    it('calls method on mount if loadDatasource is true', async () => {
-      new Promise(done => {
+      setup({ loadDatasource: true });
-        expect.assertions(2);
+      await act(async () => {
-        setup({ loadDatasource: true });
+        await new Promise(resolve => setTimeout(resolve, 0));
-        setTimeout(() => {
+      });
-          expect(mockLoadDatasource.mock.calls).toHaveLength(1);
+      expect(mockLoadDatasource).toHaveBeenCalledTimes(1);
-          expect(mockLoadDatasource.mock.calls[0][0]).toEqual(
+      expect(mockLoadDatasource.mock.calls[0]).toEqual([
-            props.formData.datasource,
+        props.formData.datasource,
-          );
+        undefined,
-          done(undefined);
+      ]);
-        }, 0);
+    });
-      }));
 
-    it('should pass datasourceRequestOptions to ChartClient.loadDatasource', () =>
+    it('should pass datasourceRequestOptions to ChartClient.loadDatasource', async () => {
-      new Promise(done => {
+      const options = { host: 'override' };
-        expect.assertions(2);
+      setup({ loadDatasource: true, datasourceRequestOptions: options });
-        const options = { host: 'override' };
+      await act(async () => {
-        setup({ loadDatasource: true, datasourceRequestOptions: options });
+        await new Promise(resolve => setTimeout(resolve, 0));
-        setTimeout(() => {
+      });
-          expect(mockLoadDatasource.mock.calls).toHaveLength(1);
+      expect(mockLoadDatasource).toHaveBeenCalledTimes(1);
-          expect(mockLoadDatasource.mock.calls[0][1]).toEqual(options);
+      expect(mockLoadDatasource.mock.calls[0][1]).toEqual(options);
-          done(undefined);
+    });
-        }, 0);
-      }));
 
-    it('calls ChartClient.loadDatasource if loadDatasource is true and formData or sliceId change', () =>
+    it('calls ChartClient.loadDatasource if loadDatasource is true and formData or sliceId change', async () => {
-      new Promise(done => {
+      const { rerender } = setup({ loadDatasource: true });
-        expect.assertions(3);
+      const newDatasource = 'test';
-        const newDatasource = 'test';
-        const wrapper = setup({ loadDatasource: true });
-        wrapper.setProps({
-          formData: { datasource: newDatasource },
-          sliceId: undefined,
-        });
 
-        setTimeout(() => {
+      await act(async () => {
-          expect(mockLoadDatasource.mock.calls).toHaveLength(2);
+        await new Promise(resolve => setTimeout(resolve, 0));
-          expect(mockLoadDatasource.mock.calls[0][0]).toEqual(
+      });
-            props.formData.datasource,
+
-          );
+      await act(async () => {
-          expect(mockLoadDatasource.mock.calls[1][0]).toEqual(newDatasource);
+        rerender(
-          done(undefined);
+          <ChartDataProvider
-        }, 0);
+            {...props}
-      }));
+            formData={{ ...props.formData, datasource: newDatasource }}
+            loadDatasource
+          />,
+        );
+        await new Promise(resolve => setTimeout(resolve, 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 => {
+      setup();
-        expect.assertions(2);
+      await act(async () => {
-        setup();
+        await new Promise(resolve => setTimeout(resolve, 0));
-        setTimeout(() => {
+      });
-          expect(mockLoadQueryData.mock.calls).toHaveLength(1);
+      expect(mockLoadQueryData).toHaveBeenCalledTimes(1);
-          expect(mockLoadQueryData.mock.calls[0][0]).toEqual(props.formData);
+      expect(mockLoadQueryData.mock.calls[0]).toEqual([
-          done(undefined);
+        props.formData,
-        }, 0);
+        undefined,
-      }));
+      ]);
+    });
 
-    it('should pass queryDataRequestOptions to ChartClient.loadQueryData', () =>
+    it('should pass queryDataRequestOptions to ChartClient.loadQueryData', async () => {
-      new Promise(done => {
+      const options = { host: 'override' };
-        expect.assertions(2);
+      setup({ queryRequestOptions: options });
-        const options = { host: 'override' };
+      await act(async () => {
-        setup({ queryRequestOptions: options });
+        await new Promise(resolve => setTimeout(resolve, 0));
-        setTimeout(() => {
+      });
-          expect(mockLoadQueryData.mock.calls).toHaveLength(1);
+      expect(mockLoadQueryData).toHaveBeenCalledTimes(1);
-          expect(mockLoadQueryData.mock.calls[0][1]).toEqual(options);
+      expect(mockLoadQueryData).toHaveBeenCalledWith(
-          done(undefined);
+        expect.anything(),
-        }, 0);
+        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 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({
-            payload: {
-              formData: props.formData,
-              datasource: props.formData.datasource,
-              queriesData: [props.formData],
-            },
-          });
-          done(undefined);
-        }, 0);
-      }));
 
-    it('calls children({ error }) upon request error', () =>
+      const payloadElement = await screen.findByRole('contentinfo');
-      new Promise(done => {
+      const actualPayload = JSON.parse(payloadElement.textContent || '');
-        expect.assertions(2);
-        const children = jest.fn<ReactNode, unknown[]>();
-        mockLoadFormData = jest.fn(() => Promise.reject(new Error('error')));
 
-        setup({ children });
+      expect(actualPayload).toEqual({
+        formData: props.formData,
+        datasource: props.formData.datasource,
+        queriesData: [props.formData],
+      });
+    });
 
-        setTimeout(() => {
+    it('shows error message upon request error', async () => {
-          expect(children.mock.calls).toHaveLength(2); // loading + error
+      const errorMessage = 'error';
-          expect(children.mock.calls[1][0]).toEqual({
+      mockLoadFormData.mockRejectedValue(new Error(errorMessage));
-            error: new Error('error'),
-          });
-          done(undefined);
-        }, 0);
-      }));
 
-    it('calls children({ error }) upon JS error', () =>
+      setup();
-      new Promise(done => {
-        expect.assertions(2);
-        const children = jest.fn<ReactNode, unknown[]>();
 
-        mockLoadFormData = jest.fn(() => {
+      const errorElement = await screen.findByRole('alert');
-          throw new Error('non-async error');
+      expect(errorElement).toHaveAttribute('role', 'alert');
-        });
+      expect(errorElement).toHaveTextContent(errorMessage);
+    });
 
-        setup({ children });
+    it('shows error message upon JS error', async () => {
+      mockLoadFormData.mockImplementation(() => {
+        throw new Error('non-async error');
+      });
 
-        setTimeout(() => {
+      setup();
-          expect(children.mock.calls).toHaveLength(2); // loading + error
+
-          expect(children.mock.calls[1][0]).toEqual({
+      const errorElement = await screen.findByRole('alert');
-            error: new Error('non-async error'),
+      expect(errorElement).toHaveAttribute('role', 'alert');
-          });
+      expect(errorElement).toHaveTextContent('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]);
-        setup({ onLoaded, loadDatasource: true });
+      mockLoadDatasource.mockResolvedValue(props.formData.datasource);
 
-        setTimeout(() => {
+      setup({ onLoaded, loadDatasource: true });
-          expect(onLoaded.mock.calls).toHaveLength(1);
-          expect(onLoaded.mock.calls[0][0]).toEqual({
-            formData: props.formData,
-            datasource: props.formData.datasource,
-            queriesData: [props.formData],
-          });
-          done(undefined);
-        }, 0);
-      }));
 
-    it('calls onError(error) upon request 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(() => Promise.reject(new Error('error')));
 
-        setup({ onError });
+      expect(onLoaded).toHaveBeenCalledTimes(1);
-        setTimeout(() => {
+      expect(onLoaded).toHaveBeenCalledWith({
-          expect(onError.mock.calls).toHaveLength(1);
+        formData: props.formData,
-          expect(onError.mock.calls[0][0]).toEqual(new Error('error'));
+        datasource: props.formData.datasource,
-          done(undefined);
+        queriesData: [props.formData],
-        }, 0);
+      });
-      }));
+    });
 
-    it('calls onError(error) upon JS 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(() => {
+      setup({ onError });
-          throw new Error('non-async error');
-        });
 
-        setup({ onError });
+      await act(async () => {
-        setTimeout(() => {
+        await new Promise(resolve => setTimeout(resolve, 0));
-          expect(onError.mock.calls).toHaveLength(1);
+      });
-          expect(onError.mock.calls[0][0]).toEqual(
+
-            new Error('non-async error'),
+      expect(onError).toHaveBeenCalledTimes(1);
-          );
+      expect(onError).toHaveBeenCalledWith(new Error('error'));
-          done(undefined);
+    });
-        }, 0);
+
-      }));
+    it('calls onError upon JS error', async () => {
+      const onError = jest.fn();
+      mockLoadFormData.mockImplementation(() => {
+        throw new Error('non-async error');
+      });
+
+      setup({ onError });
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+
+      expect(onError).toHaveBeenCalledTimes(1);
+      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);
-        expect(CustomFallbackComponent).toHaveBeenCalledTimes(1);
-      });
     });
-    it('call onErrorBoundary', () => {
+    it('call onErrorBoundary', async () => {
       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);
+      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(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,15 +206,123 @@ 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 = () => {
+    const wrapper = document.createElement('div');
+    wrapper.style.width = '300px';
+    wrapper.style.height = '300px';
+    wrapper.style.position = 'relative';
+    wrapper.style.display = 'block';
+    return wrapper;
+  };
+
+  // Update dimension tests to wait for resize observer
+  // First, increase the timeout for all tests
+  jest.setTimeout(20000);
+
+  // Update the waitForDimensions helper to include a retry mechanism
+  // Update waitForDimensions to avoid await in loop
+  const waitForDimensions = async (
+    container: HTMLElement,
+    expectedWidth: number,
+    expectedHeight: number,
+  ) => {
+    const maxAttempts = 5;
+    const interval = 100;
+
+    return new Promise<void>((resolve, reject) => {
+      let attempts = 0;
+
+      const checkDimension = () => {
+        const testComponent = container.querySelector('.test-component');
+        const dimensionEl = container.querySelector('.dimension');
+
+        if (!testComponent || !dimensionEl) {
+          if (attempts >= maxAttempts) {
+            reject(new Error('Elements not found'));
+            return;
+          }
+          attempts += 1;
+          setTimeout(checkDimension, interval);
+          return;
+        }
+
+        if (dimensionEl.textContent !== `${expectedWidth}x${expectedHeight}`) {
+          if (attempts >= maxAttempts) {
+            reject(new Error('Dimension mismatch'));
+            return;
+          }
+          attempts += 1;
+          setTimeout(checkDimension, interval);
+          return;
+        }
+
+        resolve();
+      };
+
+      checkDimension();
+    });
+  };
+
+  // Update the resize observer trigger to ensure it's called after component mount
+  it.skip('works when width and height are percent', async () => {
+    const { container } = renderWithTheme(
+      <SuperChart
+        chartType={ChartKeys.DILIGENT}
+        queriesData={[DEFAULT_QUERY_DATA]}
+        debounceTime={1}
+        width="100%"
+        height="100%"
+      />,
+    );
+
+    // Wait for initial render
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    triggerResizeObserver([
+      {
+        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('passes the props with multiple queries to renderer correctly', async () => {
+    const { container } = renderWithTheme(
       <SuperChart
         chartType={ChartKeys.DILIGENT}
         queriesData={DEFAULT_QUERIES_DATA}
@@ -215,42 +332,25 @@ describe.skip('SuperChart', () => {
       />,
     );
 
-    return promiseTimeout(() => {
+    await promiseTimeout(() => {
-      const renderedWrapper = wrapper.render();
+      const testComponent = container.querySelector('.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 and single query to renderer correctly (backward compatibility)', () => {
-    const wrapper = mount(
-      <SuperChart
-        chartType={ChartKeys.DILIGENT}
-        queriesData={DEFAULT_QUERIES_DATA}
-        width={101}
-        height={118}
-        formData={{ abc: 1 }}
-      />,
-    );
-
-    return promiseTimeout(() => {
-      const renderedWrapper = wrapper.render();
-      expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-      expectDimension(renderedWrapper, 101, 118);
     });
   });
 
   describe('supports NoResultsComponent', () => {
     it('renders NoResultsComponent when queriesData is missing', () => {
-      const wrapper = mount(
+      renderWithTheme(
         <SuperChart chartType={ChartKeys.DILIGENT} width="200" height="200" />,
       );
 
-      expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
+      expect(screen.getByText('No Results')).toBeInTheDocument();
     });
 
     it('renders NoResultsComponent when queriesData data is null', () => {
-      const wrapper = mount(
+      renderWithTheme(
         <SuperChart
           chartType={ChartKeys.DILIGENT}
           queriesData={[{ data: null }]}
@@ -259,116 +359,12 @@ describe.skip('SuperChart', () => {
         />,
       );
 
-      expect(wrapper.find(NoResultsComponent)).toHaveLength(1);
+      expect(screen.getByText('No Results')).toBeInTheDocument();
     });
   });
 
   describe('supports dynamic width and/or height', () => {
-    it('works with width and height that are numbers', () => {
+    // Add MyWrapper component definition
-      const wrapper = mount(
-        <SuperChart
-          chartType={ChartKeys.DILIGENT}
-          queriesData={[DEFAULT_QUERY_DATA]}
-          width={100}
-          height={100}
-        />,
-      );
-
-      return promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 100, 100);
-      });
-    });
-    it('works when width and height are percent', () => {
-      const wrapper = mount(
-        <SuperChart
-          chartType={ChartKeys.DILIGENT}
-          queriesData={[DEFAULT_QUERY_DATA]}
-          debounceTime={1}
-          width="100%"
-          height="100%"
-        />,
-      );
-      triggerResizeObserver();
-
-      return promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
-        expect(renderedWrapper.find('div.test-component')).toHaveLength(1);
-        expectDimension(renderedWrapper, 300, 300);
-      }, 100);
-    });
-    it('works when only width is percent', () => {
-      const wrapper = mount(
-        <SuperChart
-          chartType={ChartKeys.DILIGENT}
-          queriesData={[DEFAULT_QUERY_DATA]}
-          debounceTime={1}
-          width="50%"
-          height="125"
-        />,
-      );
-      // @ts-ignore
-      triggerResizeObserver([{ contentRect: { height: 125, width: 150 } }]);
-
-      return promiseTimeout(() => {
-        const renderedWrapper = wrapper.render();
-        const boundingBox = renderedWrapper
-          .find('div.test-component')
-          .parent()
-          .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(
-        <SuperChart
-          chartType={ChartKeys.DILIGENT}
-          queriesData={[DEFAULT_QUERY_DATA]}
-          debounceTime={1}
-          width="50"
-          height="25%"
-        />,
-      );
-      // @ts-ignore
-      triggerResizeObserver([{ contentRect: { height: 75, width: 50 } }]);
-
-      return promiseTimeout(() => {
-        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', () => {
     function MyWrapper({ width, height, children }: WrapperProps) {
       return (
         <div>
@@ -380,50 +376,81 @@ 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();
-        <SuperChart
+      document.body.appendChild(wrapper);
-          chartType={ChartKeys.DILIGENT}
+
-          queriesData={[DEFAULT_QUERY_DATA]}
+      const { container } = renderWithTheme(
-          debounceTime={1}
+        <div style={{ width: '100%', height: '100%', position: 'absolute' }}>
-          width="100%"
+          <SuperChart
-          height="100%"
+            chartType={ChartKeys.DILIGENT}
-          Wrapper={MyWrapper}
+            queriesData={[DEFAULT_QUERY_DATA]}
-        />,
+            debounceTime={1}
+            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', () => {
+
-      // Suppress warning
+    it('eventually renders after Chart is loaded', async () => {
-      const wrapper = styledMount(
+      const { container } = renderWithTheme(
         <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/packages/superset-ui-core/test/chart/components/reactify.test.tsx

@@ -17,10 +17,11 @@
  * under the License.
  */
 
+import '@testing-library/jest-dom';
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { mount } from 'enzyme';
 import { reactify } from '@superset-ui/core';
+import { render, screen } from '@testing-library/react';
 import { RenderFuncType } from '../../../src/chart/components/reactify';
 
 describe('reactify(renderFn)', () => {
@@ -78,14 +79,18 @@ describe('reactify(renderFn)', () => {
 
   it('returns a React component class', () =>
     new Promise(done => {
-      const wrapper = mount(<TestComponent />);
+      render(<TestComponent />);
 
       expect(renderFn).toHaveBeenCalledTimes(1);
-      expect(wrapper.html()).toEqual('<div id="test"><b>abc</b></div>');
+      expect(screen.getByText('abc')).toBeInTheDocument();
+      expect(screen.getByText('abc').parentNode).toHaveAttribute('id', 'test');
       setTimeout(() => {
         expect(renderFn).toHaveBeenCalledTimes(2);
-        expect(wrapper.html()).toEqual('<div id="test"><b>def</b></div>');
+        expect(screen.getByText('def')).toBeInTheDocument();
-        wrapper.unmount();
+        expect(screen.getByText('def').parentNode).toHaveAttribute(
+          'id',
+          'test',
+        );
         done(undefined);
       }, 20);
     }));
@@ -119,8 +124,9 @@ describe('reactify(renderFn)', () => {
   describe('defaultProps', () => {
     it('has defaultProps if renderFn.defaultProps is defined', () => {
       expect(TheChart.defaultProps).toBe(renderFn.defaultProps);
-      const wrapper = mount(<TheChart id="test" />);
+      render(<TheChart id="test" />);
-      expect(wrapper.html()).toEqual('<div id="test"><b>ghi</b></div>');
+      expect(screen.getByText('ghi')).toBeInTheDocument();
+      expect(screen.getByText('ghi').parentNode).toHaveAttribute('id', 'test');
     });
     it('does not have defaultProps if renderFn.defaultProps is not defined', () => {
       const AnotherChart = reactify(() => {});
@@ -136,9 +142,9 @@ describe('reactify(renderFn)', () => {
   });
   it('calls willUnmount hook when it is provided', () =>
     new Promise(done => {
-      const wrapper = mount(<AnotherTestComponent />);
+      const { unmount } = render(<AnotherTestComponent />);
       setTimeout(() => {
-        wrapper.unmount();
+        unmount();
         expect(willUnmountCb).toHaveBeenCalledTimes(1);
         done(undefined);
       }, 20);

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -27,6 +27,7 @@ import {
   ensureIsArray,
   GenericDataType,
   getCustomFormatter,
+  getMetricLabel,
   getNumberFormatter,
   getXAxisLabel,
   isDefined,
@@ -291,12 +292,20 @@ export default function transformProps(
   const showValueIndexesB = extractShowValueIndexes(rawSeriesB, {
     stack,
   });
+
+  const metricsLabels = metrics
+    .map(metric => getMetricLabel(metric, undefined, undefined, verboseMap))
+    .filter((label): label is string => label !== undefined);
+  const metricsLabelsB = metricsB.map((metric: QueryFormMetric) =>
+    getMetricLabel(metric, undefined, undefined, verboseMap),
+  );
+
   const { totalStackedValues, thresholdValues } = extractDataTotalValues(
     rebasedDataA,
     {
       stack,
       percentageThreshold,
-      xAxisCol: xAxisLabel,
+      metricsLabels,
     },
   );
   const {
@@ -305,7 +314,7 @@ export default function transformProps(
   } = extractDataTotalValues(rebasedDataB, {
     stack: Boolean(stackB),
     percentageThreshold,
-    xAxisCol: xAxisLabel,
+    metricsLabels: metricsLabelsB,
   });
 
   annotationLayers

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -215,14 +215,18 @@ export default function transformProps(
   ) {
     xAxisLabel = verboseMap[xAxisLabel];
   }
+  const metricsLabels = metrics
+    .map(metric => getMetricLabel(metric, undefined, undefined, verboseMap))
+    .filter((label): label is string => label !== undefined);
   const isHorizontal = orientation === OrientationType.Horizontal;
+
   const { totalStackedValues, thresholdValues } = extractDataTotalValues(
     rebasedData,
     {
       stack,
       percentageThreshold,
-      xAxisCol: xAxisLabel,
       legendState,
+      metricsLabels,
     },
   );
   const extraMetricLabels = extractExtraMetrics(chartProps.rawFormData).map(
@@ -296,7 +300,6 @@ export default function transformProps(
     const entryName = String(entry.name || '');
     const seriesName = inverted[entryName] || entryName;
     const colorScaleKey = getOriginalSeries(seriesName, array);
-
     const transformedSeries = transformSeries(
       entry,
       colorScale,

superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx

@@ -230,7 +230,7 @@ const tooltipPercentageControl: ControlSetItem = {
     type: 'CheckboxControl',
     label: t('Show percentage'),
     renderTrigger: true,
-    default: true,
+    default: false,
     description: t('Whether to display the percentage value in the tooltip'),
     visibility: ({ controls, form_data }: ControlPanelsContainerProps) =>
       Boolean(controls?.rich_tooltip?.value) &&

superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts

@@ -60,8 +60,8 @@ export function extractDataTotalValues(
   opts: {
     stack: StackType;
     percentageThreshold: number;
-    xAxisCol: string;
     legendState?: LegendState;
+    metricsLabels: string[];
   },
 ): {
   totalStackedValues: number[];
@@ -69,11 +69,11 @@ export function extractDataTotalValues(
 } {
   const totalStackedValues: number[] = [];
   const thresholdValues: number[] = [];
-  const { stack, percentageThreshold, xAxisCol, legendState } = opts;
+  const { stack, percentageThreshold, legendState, metricsLabels } = opts;
   if (stack) {
     data.forEach(datum => {
       const values = Object.keys(datum).reduce((prev, curr) => {
-        if (curr === xAxisCol) {
+        if (!metricsLabels.includes(curr)) {
           return prev;
         }
         if (legendState && !legendState[curr]) {

superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts

@@ -36,15 +36,25 @@ describe('EchartsTimeseries transformProps', () => {
     colorScheme: 'bnbColors',
     datasource: '3__table',
     granularity_sqla: 'ds',
-    metric: 'sum__num',
+    metrics: ['sum__num'],
     groupby: ['foo', 'bar'],
     viz_type: 'my_viz',
   };
   const queriesData = [
     {
       data: [
-        { 'San Francisco': 1, 'New York': 2, __timestamp: 599616000000 },
+        {
-        { 'San Francisco': 3, 'New York': 4, __timestamp: 599916000000 },
+          'San Francisco': 1,
+          'New York': 2,
+          __timestamp: 599616000000,
+          sum__num: 4,
+        },
+        {
+          'San Francisco': 3,
+          'New York': 4,
+          __timestamp: 599916000000,
+          sum__num: 8,
+        },
       ],
     },
   ];
@@ -64,7 +74,7 @@ describe('EchartsTimeseries transformProps', () => {
         height: 600,
         echartOptions: expect.objectContaining({
           legend: expect.objectContaining({
-            data: ['San Francisco', 'New York'],
+            data: ['sum__num', 'San Francisco', 'New York'],
           }),
           series: expect.arrayContaining([
             expect.objectContaining({
@@ -101,7 +111,7 @@ describe('EchartsTimeseries transformProps', () => {
         height: 600,
         echartOptions: expect.objectContaining({
           legend: expect.objectContaining({
-            data: ['San Francisco', 'New York'],
+            data: ['sum__num', 'San Francisco', 'New York'],
           }),
           series: expect.arrayContaining([
             expect.objectContaining({
@@ -146,7 +156,7 @@ describe('EchartsTimeseries transformProps', () => {
         height: 600,
         echartOptions: expect.objectContaining({
           legend: expect.objectContaining({
-            data: ['San Francisco', 'New York', 'My Formula'],
+            data: ['sum__num', 'San Francisco', 'New York', 'My Formula'],
           }),
           series: expect.arrayContaining([
             expect.objectContaining({
@@ -274,7 +284,7 @@ describe('EchartsTimeseries transformProps', () => {
       expect.objectContaining({
         echartOptions: expect.objectContaining({
           legend: expect.objectContaining({
-            data: ['San Francisco', 'New York', 'My Line'],
+            data: ['sum__num', 'San Francisco', 'New York', 'My Line'],
           }),
           series: expect.arrayContaining([
             expect.objectContaining({
@@ -420,7 +430,7 @@ describe('Does transformProps transform series correctly', () => {
     colorScheme: 'bnbColors',
     datasource: '3__table',
     granularity_sqla: 'ds',
-    metric: 'sum__num',
+    metrics: ['sum__num'],
     groupby: ['foo', 'bar'],
     showValue: true,
     stack: true,
@@ -435,24 +445,28 @@ describe('Does transformProps transform series correctly', () => {
           'New York': 2,
           Boston: 1,
           __timestamp: 599616000000,
+          sum__num: 4,
         },
         {
           'San Francisco': 3,
           'New York': 4,
           Boston: 1,
           __timestamp: 599916000000,
+          sum__num: 8,
         },
         {
           'San Francisco': 5,
           'New York': 8,
           Boston: 6,
           __timestamp: 600216000000,
+          sum__num: 19,
         },
         {
           'San Francisco': 2,
           'New York': 7,
           Boston: 2,
           __timestamp: 600516000000,
+          sum__num: 11,
         },
       ],
     },
@@ -468,7 +482,7 @@ describe('Does transformProps transform series correctly', () => {
   const totalStackedValues = queriesData[0].data.reduce(
     (totals, currentStack) => {
       const total = Object.keys(currentStack).reduce((stackSum, key) => {
-        if (key === '__timestamp') return stackSum;
+        if (key === '__timestamp' || key === 'sum__num') return stackSum;
         return stackSum + currentStack[key as keyof typeof currentStack];
       }, 0);
       totals.push(total);
@@ -561,7 +575,6 @@ describe('Does transformProps transform series correctly', () => {
     const expectedThresholds = totalStackedValues.map(
       total => ((formData.percentageThreshold || 0) / 100) * total,
     );
-
     transformedSeries.forEach((series, seriesIndex) => {
       expect(series.label.show).toBe(true);
       series.data.forEach((value, dataIndex) => {
@@ -576,7 +589,6 @@ describe('Does transformProps transform series correctly', () => {
       });
     });
   });
-
   it('should not apply percentage threshold when showValue is true and stack is false', () => {
     const updatedChartPropsConfig = {
       ...chartPropsConfig,

superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts

@@ -29,6 +29,7 @@ import {
   calculateLowerLogTick,
   dedupSeries,
   extractGroupbyLabel,
+  extractDataTotalValues,
   extractSeries,
   extractShowValueIndexes,
   extractTooltipKeys,
@@ -1085,6 +1086,123 @@ const forecastValue = [
   },
 ];
 
+describe('extractDataTotalValues', () => {
+  it('test_extractDataTotalValues_withStack', () => {
+    const data: DataRecord[] = [
+      { metric1: 10, metric2: 20, xAxisCol: '2021-01-01' },
+      { metric1: 15, metric2: 25, xAxisCol: '2021-01-02' },
+    ];
+    const metricsLabels = ['metric1', 'metric2'];
+    const opts = {
+      stack: true,
+      percentageThreshold: 10,
+      metricsLabels,
+    };
+    const result = extractDataTotalValues(data, opts);
+    expect(result.totalStackedValues).toEqual([30, 40]);
+    expect(result.thresholdValues).toEqual([3, 4]);
+  });
+
+  it('should calculate total and threshold values with stack option enabled', () => {
+    const data: DataRecord[] = [
+      { metric1: 10, metric2: 20, xAxisCol: '2021-01-01' },
+      { metric1: 15, metric2: 25, xAxisCol: '2021-01-02' },
+    ];
+    const metricsLabels = ['metric1', 'metric2'];
+    const opts = {
+      stack: true,
+      percentageThreshold: 10,
+      metricsLabels,
+    };
+    const result = extractDataTotalValues(data, opts);
+    expect(result.totalStackedValues).toEqual([30, 40]);
+    expect(result.thresholdValues).toEqual([3, 4]);
+  });
+
+  it('should handle empty data array', () => {
+    const data: DataRecord[] = [];
+    const metricsLabels: string[] = [];
+    const opts = {
+      stack: true,
+      percentageThreshold: 10,
+      metricsLabels,
+    };
+    const result = extractDataTotalValues(data, opts);
+    expect(result.totalStackedValues).toEqual([]);
+    expect(result.thresholdValues).toEqual([]);
+  });
+
+  it('should calculate total and threshold values with stack option disabled', () => {
+    const data: DataRecord[] = [
+      { metric1: 10, metric2: 20, xAxisCol: '2021-01-01' },
+      { metric1: 15, metric2: 25, xAxisCol: '2021-01-02' },
+    ];
+    const metricsLabels = ['metric1', 'metric2'];
+    const opts = {
+      stack: false,
+      percentageThreshold: 10,
+      metricsLabels,
+    };
+    const result = extractDataTotalValues(data, opts);
+    expect(result.totalStackedValues).toEqual([]);
+    expect(result.thresholdValues).toEqual([]);
+  });
+
+  it('should handle data with null or undefined values', () => {
+    const data: DataRecord[] = [
+      { my_x_axis: 'abc', x: 1, y: 0, z: 2 },
+      { my_x_axis: 'foo', x: null, y: 10, z: 5 },
+      { my_x_axis: null, x: 4, y: 3, z: 7 },
+    ];
+    const metricsLabels = ['x', 'y', 'z'];
+    const opts = {
+      stack: true,
+      percentageThreshold: 10,
+      metricsLabels,
+    };
+    const result = extractDataTotalValues(data, opts);
+    expect(result.totalStackedValues).toEqual([3, 15, 14]);
+    expect(result.thresholdValues).toEqual([
+      0.30000000000000004, 1.5, 1.4000000000000001,
+    ]);
+  });
+
+  it('should handle different percentage thresholds', () => {
+    const data: DataRecord[] = [
+      { metric1: 10, metric2: 20, xAxisCol: '2021-01-01' },
+      { metric1: 15, metric2: 25, xAxisCol: '2021-01-02' },
+    ];
+    const metricsLabels = ['metric1', 'metric2'];
+    const opts = {
+      stack: true,
+      percentageThreshold: 50,
+      metricsLabels,
+    };
+    const result = extractDataTotalValues(data, opts);
+    expect(result.totalStackedValues).toEqual([30, 40]);
+    expect(result.thresholdValues).toEqual([15, 20]);
+  });
+  it('should not add datum not in metrics to the total value when stacked', () => {
+    const data: DataRecord[] = [
+      { xAxisCol: 'foo', xAxisSort: 10, val: 345 },
+      { xAxisCol: 'bar', xAxisSort: 20, val: 2432 },
+      { xAxisCol: 'baz', xAxisSort: 30, val: 4543 },
+    ];
+    const metricsLabels = ['val'];
+    const opts = {
+      stack: true,
+      percentageThreshold: 50,
+      metricsLabels,
+    };
+
+    const result = extractDataTotalValues(data, opts);
+
+    // Assuming extractDataTotalValues returns the total value
+    // without including the 'xAxisCol' category
+    expect(result.totalStackedValues).toEqual([345, 2432, 4543]); // 10 + 20, excluding the 'xAxisCol' category
+  });
+});
+
 test('extractTooltipKeys with rich tooltip', () => {
   const result = extractTooltipKeys(forecastValue, 1, true, false);
   expect(result).toEqual(['foo', 'bar']);

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/handlebarTemplate.tsx

@@ -101,6 +101,7 @@ export const handlebarsTemplateControlSetItem: ControlSetItem = {
 </ul>`,
     isInt: false,
     renderTrigger: true,
+    valueKey: null,
 
     validators: [validateNonEmpty],
     mapStateToProps: ({ controls }) => ({

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/style.tsx

@@ -75,6 +75,7 @@ export const styleControlSetItem: ControlSetItem = {
     description: t('CSS applied to the chart'),
     isInt: false,
     renderTrigger: true,
+    valueKey: null,
 
     validators: [],
     mapStateToProps: ({ controls }) => ({

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/GlobalStyles.tsx

@@ -39,14 +39,18 @@ export const GlobalStyles = () => (
       .echarts-tooltip[style*='visibility: hidden'] {
         display: none !important;
       }
+
       // Ant Design is applying inline z-index styles causing troubles
       // TODO: Remove z-indexes when Ant Design is fully upgraded to v5
       // Prefer vanilla Ant Design z-indexes that should work out of the box
-      .ant-popover,
+      .antd5-dropdown,
+      .ant-dropdown,
       .ant-select-dropdown,
       .antd5-modal-wrap,
       .antd5-modal-mask,
-      .antd5-picker-dropdown {
+      .antd5-picker-dropdown,
+      .ant-popover,
+      .antd5-popover {
         z-index: ${theme.zIndex.max} !important;
       }
 

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',
 };
-test('is valid', () => {
+
-  expect(isValidElement(<QueryTable displayLimit={100} />)).toBe(true);
+describe('QueryTable', () => {
-});
+  test('is valid', () => {
-test('is valid with props', () => {
+    expect(isValidElement(<QueryTable displayLimit={100} />)).toBe(true);
-  expect(isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
-});
-test('renders a proper table', () => {
-  const mockStore = configureStore([thunk]);
-  const store = mockStore({
-    user,
   });
 
-  const { container } = render(
+  test('is valid with props', () => {
-    <Provider store={store}>
+    expect(isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
-      <QueryTable {...mockedProps} />
+  });
-    </Provider>,
-  );
 
-  expect(screen.getByTestId('listview-table')).toBeVisible(); // Presence of TableCollection
+  test('renders a proper table', () => {
-  expect(screen.getByRole('table')).toBeVisible();
+    const mockStore = configureStore([thunk]);
-  expect(container.querySelector('.table-condensed')).toBeVisible(); // Presence of TableView signature class
+    const { container } = render(<QueryTable {...mockedProps} />, {
-  expect(container.querySelectorAll('table > thead > tr')).toHaveLength(1);
+      store: mockStore({ user }),
-  expect(container.querySelectorAll('table > tbody > tr')).toHaveLength(2);
+    });
+
+    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(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,8 +164,10 @@ describe('ResultSet', () => {
         },
       }),
     );
-    const table = getByTestId('table-container');
+    await waitFor(() => {
-    expect(table).toBeInTheDocument();
+      const table = getByTestId('table-container');
+      expect(table).toBeInTheDocument();
+    });
   });
 
   test('should render success query', async () => {
@@ -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');
+      expect(downloadButton).toBeInTheDocument();
+    });
+
     const downloadButton = getByTestId('export-csv-button');
-    fireEvent.click(downloadButton);
+    await waitFor(() => fireEvent.click(downloadButton));
+
     const warningModal = await findByRole('dialog');
-    expect(
+    await waitFor(() => {
-      within(warningModal).getByText(`Download is on the way`),
+      expect(
-    ).toBeInTheDocument();
+        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/SaveDatasetModal/index.tsx

@@ -96,32 +96,36 @@ interface SaveDatasetModalProps {
 }
 
 const Styles = styled.div`
+  ${({ theme }) => `
   .sdm-body {
-    margin: 0 8px;
+    margin: 0 ${theme.gridUnit * 2}px;
   }
   .sdm-input {
-    margin-left: 45px;
+    margin-left: ${theme.gridUnit * 10}px;
     width: 401px;
   }
   .sdm-autocomplete {
     width: 401px;
     align-self: center;
+    margin-left: ${theme.gridUnit}px;
   }
   .sdm-radio {
-    display: block;
     height: 30px;
     margin: 10px 0px;
     line-height: 30px;
   }
+  .sdm-radio span {
+    display: inline-flex;
+    padding-right: 0px;
+  }
   .sdm-overwrite-msg {
-    margin: 7px;
+    margin: ${theme.gridUnit * 2}px;
   }
   .sdm-overwrite-container {
     flex: 1 1 auto;
     display: flex;
-  }
+  `}
 `;
-
 const updateDataset = async (
   dbId: number,
   datasetId: number,

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

@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render } from 'spec/helpers/testing-library';
+import { render, waitFor, within } 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';
+import userEvent from '@testing-library/user-event';
 
 const mockedProps = {
   queryEditorId: defaultQueryEditor.id,
@@ -49,12 +49,14 @@ const mockState = {
     tables: [
       {
         ...table,
+        id: 't3',
         name: 'table3',
         dataPreviewQueryId: '2g2_iRFMl',
         queryEditorId: defaultQueryEditor.id,
       },
       {
         ...table,
+        id: 't4',
         name: 'table4',
         dataPreviewQueryId: 'erWdqEWPm',
         queryEditorId: defaultQueryEditor.id,
@@ -149,3 +151,22 @@ test('should render tabs for table metadata view', () => {
     expect(tabs[index + 2]).toHaveTextContent(`${schema}.${name}`);
   });
 });
+
+test('should remove tab', async () => {
+  const { getAllByRole } = await render(<SouthPane {...mockedProps} />, {
+    useRedux: true,
+    initialState: mockState,
+  });
+
+  const tabs = getAllByRole('tab');
+  const totalTabs = mockState.sqlLab.tables.length + 2;
+  expect(tabs).toHaveLength(totalTabs);
+  const removeButton = within(tabs[2].parentElement as HTMLElement).getByRole(
+    'button',
+    {
+      name: /remove/,
+    },
+  );
+  userEvent.click(removeButton);
+  await waitFor(() => expect(getAllByRole('tab')).toHaveLength(totalTabs - 1));
+});

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

@@ -136,7 +136,7 @@ const SouthPane = ({
         dispatch(removeTables([table]));
       }
     },
-    [dispatch, queryEditorId],
+    [dispatch, pinnedTables],
   );
 
   return offline ? (

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/SqlEditor/index.tsx

@@ -873,7 +873,9 @@ const SqlEditor: FC<Props> = ({
                 dropdownRender={() => renderDropdown()}
                 trigger={['click']}
               >
-                <Icons.MoreHoriz iconColor={theme.colors.grayscale.base} />
+                <Button buttonSize="xsmall" type="link" showMarginRight={false}>
+                  <Icons.MoreHoriz iconColor={theme.colors.grayscale.base} />
+                </Button>
               </Dropdown>
             </div>
           </>

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/SqlLab/components/TablePreview/index.tsx

@@ -30,7 +30,7 @@ import {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import Icons from 'src/components/Icons';
 import type { SqlLabRootState } from 'src/SqlLab/types';
-import { Skeleton, AntdBreadcrumb as Breadcrumb } from 'src/components';
+import { Skeleton, AntdBreadcrumb as Breadcrumb, Button } from 'src/components';
 import { Dropdown } from 'src/components/Dropdown';
 import FilterableTable from 'src/components/FilterableTable';
 import Tabs from 'src/components/Tabs';
@@ -324,11 +324,13 @@ const TablePreview: FC<Props> = ({ dbId, catalog, schema, tableName }) => {
           )}
           trigger={['click']}
         >
-          <Icons.DownSquareOutlined
+          <Button buttonSize="xsmall" type="link">
-            iconSize="m"
+            <Icons.DownSquareOutlined
-            style={{ marginTop: 2, marginLeft: 4 }}
+              iconSize="m"
-            aria-label={t('Table actions')}
+              style={{ marginTop: 2, marginLeft: 4 }}
-          />
+              aria-label={t('Table actions')}
+            />
+          </Button>
         </Dropdown>
       </Title>
       {isMetadataRefreshing ? (

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 () => {
-  const { container } = render(<Card />);
+  // Wait for any pending effects to complete
-  expect(container).toBeInTheDocument();
+  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();
-  defaultColumns.forEach(column => {
-    expect(screen.getByText(column.column_name)).toBeInTheDocument();
-  });
 
-  const searchbox = screen.getAllByPlaceholderText('Search columns')[1];
+  // Wait for all columns to be visible
+  await waitFor(
+    () => {
+      defaultColumns.forEach(column => {
+        expect(screen.getByText(column.column_name)).toBeInTheDocument();
+      });
+    },
+    { timeout: 10000 },
+  );
+
+  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();
 
+  // Wait for menu items to be loaded
+  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);
-  defaultColumns
-    .filter(column => !excludedColNames.includes(column.column_name))
-    .forEach(column => {
-      expect(screen.getByText(column.column_name)).toBeInTheDocument();
-    });
-});
 
 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,93 +16,108 @@
  * 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 '.';
 
-function renderCollapse(props?: CollapseProps) {
+describe('Collapse', () => {
-  return render(
+  beforeAll(() => {
-    <Collapse {...props}>
+    jest.setTimeout(30000);
-      <Collapse.Panel header="Header 1" key="1">
-        Content 1
-      </Collapse.Panel>
-      <Collapse.Panel header="Header 2" key="2">
-        Content 2
-      </Collapse.Panel>
-    </Collapse>,
-  );
-}
-
-test('renders collapsed with default props', () => {
-  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();
-});
-
-test('renders with one item expanded by default', () => {
-  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();
-});
-
-test('expands on click', () => {
-  renderCollapse();
-
-  expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-  expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-
-  userEvent.click(screen.getAllByRole('button')[0]);
-
-  expect(screen.getByText('Content 1')).toBeInTheDocument();
-  expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-});
-
-test('collapses on click', () => {
-  renderCollapse({ defaultActiveKey: ['1'] });
-
-  expect(screen.getByText('Content 1')).toBeInTheDocument();
-  expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-
-  userEvent.click(screen.getAllByRole('button')[0]);
-
-  expect(screen.getByText('Content 1').parentNode).toHaveClass(
-    'ant-collapse-content-hidden',
-  );
-  expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-});
-
-test('renders with custom properties', () => {
-  renderCollapse({
-    light: true,
-    bigger: true,
-    bold: true,
-    animateArrows: true,
   });
 
-  const header = document.getElementsByClassName('ant-collapse-header')[0];
+  afterEach(async () => {
-  const arrow =
+    cleanup();
-    document.getElementsByClassName('ant-collapse-arrow')[0].children[0];
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
 
-  const headerStyle = window.getComputedStyle(header);
+  function renderCollapse(props?: CollapseProps) {
-  const arrowStyle = window.getComputedStyle(arrow);
+    return render(
+      <Collapse {...props}>
+        <Collapse.Panel header="Header 1" key="1">
+          Content 1
+        </Collapse.Panel>
+        <Collapse.Panel header="Header 2" key="2">
+          Content 2
+        </Collapse.Panel>
+      </Collapse>,
+    );
+  }
 
-  expect(headerStyle.fontWeight).toBe(
+  test('renders collapsed with default props', async () => {
-    supersetTheme.typography.weights.bold.toString(),
+    const { unmount } = renderCollapse();
-  );
+    const headers = screen.getAllByRole('button');
-  expect(headerStyle.fontSize).toBe(`${supersetTheme.gridUnit * 4}px`);
+
-  expect(headerStyle.color).toBe(
+    expect(headers[0]).toHaveTextContent('Header 1');
-    hexToRgb(supersetTheme.colors.grayscale.light4),
+    expect(headers[1]).toHaveTextContent('Header 2');
-  );
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-  expect(arrowStyle.transition).toBe('transform 0.24s');
+    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+
+    unmount();
+  });
+
+  test('renders with one item expanded by default', async () => {
+    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 without waitFor', async () => {
+    const { unmount } = renderCollapse();
+
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+
+    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();
+    });
+
+    unmount();
+  });
+
+  // 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();
+
+    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();
+  });
 });

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/Datasource/utils.js

@@ -121,7 +121,7 @@ export function updateColumns(prevCols, newCols, addSuccessToast) {
 
 export async function fetchSyncedColumns(datasource) {
   const params = {
-    datasource_type: datasource.type,
+    datasource_type: datasource.type || datasource.datasource_type,
     database_name:
       datasource.database?.database_name || datasource.database?.name,
     catalog_name: datasource.catalog,

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/DropdownContainer/index.tsx

@@ -137,7 +137,6 @@ const DropdownContainer = forwardRef(
     const { current } = ref;
     const [itemsWidth, setItemsWidth] = useState<number[]>([]);
     const [popoverVisible, setPopoverVisible] = useState(false);
-
     // We use React.useState to be able to mock the state in Jest
     const [overflowingIndex, setOverflowingIndex] = useState<number>(-1);
 
@@ -181,11 +180,13 @@ const DropdownContainer = forwardRef(
     );
 
     useLayoutEffect(() => {
+      if (popoverVisible) {
+        return;
+      }
       const container = current?.children.item(0);
       if (container) {
         const { children } = container;
         const childrenArray = Array.from(children);
-
         // If items length change, add all items to the container
         // and recalculate the widths
         if (itemsWidth.length !== items.length) {
@@ -341,11 +342,7 @@ const DropdownContainer = forwardRef(
           <>
             <Global
               styles={css`
-                .ant-popover-inner-content {
+                .antd5-popover-inner {
-                  max-height: ${MAX_HEIGHT}px;
-                  overflow: ${showOverflow ? 'auto' : 'visible'};
-                  padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 4}px;
-
                   // Some OS versions only show the scroll when hovering.
                   // These settings will make the scroll always visible.
                   ::-webkit-scrollbar {
@@ -365,11 +362,16 @@ const DropdownContainer = forwardRef(
                 }
               `}
             />
+
             <Popover
+              overlayInnerStyle={{
+                maxHeight: `${MAX_HEIGHT}px`,
+                overflow: showOverflow ? 'auto' : 'visible',
+              }}
               content={popoverContent}
               trigger="click"
-              visible={popoverVisible}
+              open={popoverVisible}
-              onVisibleChange={visible => setPopoverVisible(visible)}
+              onOpenChange={visible => setPopoverVisible(visible)}
               placement="bottom"
               forceRender={forceRender}
             >

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}>
-    <Provider store={mockStore}>
+    <OAuth2RedirectMessage {...defaultProps} {...overrides} />;
-      <OAuth2RedirectMessage {...defaultProps} {...overrides} />;
+  </Provider>
-    </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', () => {