chore(fe): uplift FE packages to latest version (#30357)

Signed-off-by: hainenber <dotronghai96@gmail.com>

superset-frontend/jest.config.js

@@ -56,7 +56,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   snapshotSerializers: ['@emotion/jest/enzyme-serializer'],
   transformIgnorePatterns: [
-    'node_modules/(?!d3-(interpolate|color|time)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|nanoid|@rjsf/*.|sinon|echarts|zrender)',
+    'node_modules/(?!d3-(interpolate|color|time)|remark-gfm|markdown-table|micromark-*.|decode-named-character-reference|character-entities|mdast-util-*.|unist-util-*.|ccount|escape-string-regexp|nanoid|@rjsf/*.|sinon|echarts|zrender|fetch-mock)',
   ],
   globals: {
     __DEV__: true,

superset-frontend/package.json

@@ -244,10 +244,10 @@
     "@storybook/react-webpack5": "8.1.11",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^8.20.1",
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^5.1.3",
-    "@testing-library/user-event": "^12.7.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^12.8.3",
     "@types/classnames": "^2.2.10",
     "@types/dom-to-image": "^2.6.7",
     "@types/enzyme": "^3.10.18",
@@ -340,7 +340,7 @@
     "react-resizable": "^3.0.5",
     "react-test-renderer": "^16.14.0",
     "redux-mock-store": "^1.5.4",
-    "sinon": "^18.0.1",
+    "sinon": "^18.0.0",
     "source-map": "^0.7.4",
     "source-map-support": "^0.5.21",
     "speed-measure-webpack-plugin": "^1.5.0",

superset-frontend/packages/superset-ui-chart-controls/package.json

@@ -35,10 +35,10 @@
     "@emotion/react": "^11.4.1",
     "@superset-ui/core": "*",
     "@testing-library/dom": "^8.20.1",
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/jest-dom": "*",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@testing-library/user-event": "^12.7.0",
+    "@testing-library/react-hooks": "*",
+    "@testing-library/user-event": "*",
     "ace-builds": "^1.4.14",
     "antd": "4.10.3",
     "brace": "^0.11.1",

superset-frontend/packages/superset-ui-core/package.json

@@ -25,21 +25,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@testing-library/react-hooks": "^5.1.3",
-    "@types/d3-format": "^1.3.0",
-    "@types/d3-interpolate": "^3.0.4",
-    "@types/d3-scale": "^2.1.1",
-    "@types/d3-time": "^3.0.3",
-    "@types/d3-time-format": "^4.0.3",
-    "@types/enzyme": "^3.10.18",
-    "@types/fetch-mock": "^7.3.8",
     "@types/json-bigint": "^1.0.4",
-    "@types/lodash": "^4.17.7",
-    "@types/math-expression-evaluator": "^1.3.3",
-    "@types/node": "^22.5.4",
-    "@types/prop-types": "^15.7.13",
-    "@types/rison": "0.0.9",
-    "@types/seedrandom": "^3.0.8",
     "@vx/responsive": "^0.0.199",
     "csstype": "^3.1.3",
     "d3-format": "^1.3.2",
@@ -49,7 +35,7 @@
     "d3-time-format": "^4.1.0",
     "fetch-retry": "^6.0.0",
     "jed": "^1.1.1",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.21",
     "math-expression-evaluator": "^1.3.8",
     "pretty-ms": "^7.0.0",
     "react-error-boundary": "^1.2.5",
@@ -65,8 +51,21 @@
   },
   "devDependencies": {
     "@emotion/styled": "^11.3.0",
-    "fetch-mock": "^6.5.2",
-    "jest-mock-console": "^1.0.0",
+    "@types/d3-format": "^1.3.0",
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-scale": "^2.1.1",
+    "@types/d3-time": "^3.0.3",
+    "@types/d3-time-format": "^4.0.3",
+    "@types/enzyme": "^3.10.18",
+    "@types/fetch-mock": "^7.3.8",
+    "@types/lodash": "^4.17.7",
+    "@types/math-expression-evaluator": "^1.3.3",
+    "@types/node": "^22.5.4",
+    "@types/prop-types": "^15.7.2",
+    "@types/rison": "0.0.9",
+    "@types/seedrandom": "^3.0.8",
+    "fetch-mock": "^11.1.4",
+    "jest-mock-console": "^2.0.0",
     "resize-observer-polyfill": "1.5.1",
     "timezone-mock": "1.3.6"
   },
@@ -75,9 +74,10 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@testing-library/dom": "^8.20.1",
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/jest-dom": "*",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^12.7.0",
+    "@testing-library/react-hooks": "*",
+    "@testing-library/user-event": "*",
     "@types/react": "*",
     "@types/react-loadable": "*",
     "@types/tinycolor2": "*",

superset-frontend/packages/superset-ui-core/test/chart/clients/ChartClient.test.ts

@@ -49,7 +49,7 @@ describe('ChartClient', () => {
     chartClient = new ChartClient();
   });
 
-  afterEach(fetchMock.restore);
+  afterEach(() => fetchMock.restore());
 
   describe('new ChartClient(config)', () => {
     it('creates a client without argument', () => {

superset-frontend/packages/superset-ui-core/test/connection/SupersetClient.test.ts

@@ -22,13 +22,11 @@ import { SupersetClient, SupersetClientClass } from '@superset-ui/core';
 import { LOGIN_GLOB } from './fixtures/constants';
 
 describe('SupersetClient', () => {
-  beforeAll(() => {
-    fetchMock.get(LOGIN_GLOB, { result: '' });
-  });
+  beforeAll(() => fetchMock.get(LOGIN_GLOB, { result: '' }));
 
-  afterAll(fetchMock.restore);
+  afterAll(() => fetchMock.restore());
 
-  afterEach(SupersetClient.reset);
+  afterEach(() => SupersetClient.reset());
 
   it('exposes reset, configure, init, get, post, postForm, isAuthenticated, and reAuthenticate methods', () => {
     expect(typeof SupersetClient.configure).toBe('function');

superset-frontend/packages/superset-ui-core/test/connection/SupersetClientClass.test.ts

@@ -21,11 +21,12 @@ import { SupersetClientClass, ClientConfig, CallApi } from '@superset-ui/core';
 import { LOGIN_GLOB } from './fixtures/constants';
 
 describe('SupersetClientClass', () => {
-  beforeAll(() => {
+  beforeEach(() => {
+    fetchMock.reset();
     fetchMock.get(LOGIN_GLOB, { result: '' });
   });
 
-  afterAll(fetchMock.restore);
+  afterAll(() => fetchMock.restore());
 
   describe('new SupersetClientClass()', () => {
     it('fallback protocol to https when setting only host', () => {
@@ -78,11 +79,10 @@ describe('SupersetClientClass', () => {
   });
 
   describe('.init()', () => {
-    afterEach(() => {
-      fetchMock.reset();
-      // reset
-      fetchMock.get(LOGIN_GLOB, { result: 1234 }, { overwriteRoutes: true });
-    });
+    beforeEach(() =>
+      fetchMock.get(LOGIN_GLOB, { result: 1234 }, { overwriteRoutes: true }),
+    );
+    afterEach(() => fetchMock.reset());
 
     it('calls api/v1/security/csrf_token/ when init() is called if no CSRF token is passed', async () => {
       expect.assertions(1);
@@ -165,7 +165,7 @@ describe('SupersetClientClass', () => {
   });
 
   describe('.isAuthenticated()', () => {
-    afterEach(fetchMock.reset);
+    afterEach(() => fetchMock.reset());
 
     it('returns true if there is a token and false if not', async () => {
       expect.assertions(2);
@@ -254,7 +254,8 @@ describe('SupersetClientClass', () => {
   });
 
   describe('requests', () => {
-    afterEach(fetchMock.reset);
+    afterEach(() => fetchMock.restore());
+
     const protocol = 'https:';
     const host = 'host';
     const mockGetEndpoint = '/get/url';
@@ -272,13 +273,15 @@ describe('SupersetClientClass', () => {
     const mockTextJsonResponse = '{ "value": 9223372036854775807 }';
     const mockPayload = { json: () => Promise.resolve('payload') };
 
-    fetchMock.get(mockGetUrl, mockPayload);
-    fetchMock.post(mockPostUrl, mockPayload);
-    fetchMock.put(mockPutUrl, mockPayload);
-    fetchMock.delete(mockDeleteUrl, mockPayload);
-    fetchMock.delete(mockRequestUrl, mockPayload);
-    fetchMock.get(mockTextUrl, mockTextJsonResponse);
-    fetchMock.post(mockTextUrl, mockTextJsonResponse);
+    beforeEach(() => {
+      fetchMock.get(mockGetUrl, mockPayload);
+      fetchMock.post(mockPostUrl, mockPayload);
+      fetchMock.put(mockPutUrl, mockPayload);
+      fetchMock.delete(mockDeleteUrl, mockPayload);
+      fetchMock.delete(mockRequestUrl, mockPayload);
+      fetchMock.get(mockTextUrl, mockTextJsonResponse);
+      fetchMock.post(mockTextUrl, mockTextJsonResponse);
+    });
 
     it('checks for authentication before every get and post request', async () => {
       expect.assertions(6);
@@ -623,6 +626,8 @@ describe('SupersetClientClass', () => {
     let createElement: any;
 
     beforeEach(async () => {
+      fetchMock.get(LOGIN_GLOB, { result: 1234 }, { overwriteRoutes: true });
+
       client = new SupersetClientClass({ protocol, host });
       authSpy = jest.spyOn(SupersetClientClass.prototype, 'ensureAuth');
       await client.init();

superset-frontend/packages/superset-ui-core/test/connection/callApi/callApi.test.ts

@@ -29,43 +29,41 @@ const corruptObject = new BadObject();
 /* @ts-expect-error */
 BadObject.prototype.toString = undefined;
 
+const mockGetUrl = '/mock/get/url';
+const mockPostUrl = '/mock/post/url';
+const mockPutUrl = '/mock/put/url';
+const mockPatchUrl = '/mock/patch/url';
+const mockCacheUrl = '/mock/cache/url';
+const mockNotFound = '/mock/notfound';
+const mockErrorUrl = '/mock/error/url';
+const mock503 = '/mock/503';
+
+const mockGetPayload = { get: 'payload' };
+const mockPostPayload = { post: 'payload' };
+const mockPutPayload = { post: 'payload' };
+const mockPatchPayload = { post: 'payload' };
+const mockCachePayload = {
+  status: 200,
+  body: 'BODY',
+  headers: { Etag: 'etag' },
+};
+const mockErrorPayload = { status: 500, statusText: 'Internal error' };
+
 describe('callApi()', () => {
-  beforeAll(() => {
-    fetchMock.get(LOGIN_GLOB, { result: '1234' });
+  beforeAll(() => fetchMock.get(LOGIN_GLOB, { result: '1234' }));
+
+  beforeEach(() => {
+    fetchMock.get(mockGetUrl, mockGetPayload);
+    fetchMock.post(mockPostUrl, mockPostPayload);
+    fetchMock.put(mockPutUrl, mockPutPayload);
+    fetchMock.patch(mockPatchUrl, mockPatchPayload);
+    fetchMock.get(mockCacheUrl, mockCachePayload);
+    fetchMock.get(mockNotFound, { status: 404 });
+    fetchMock.get(mock503, { status: 503 });
+    fetchMock.get(mockErrorUrl, () => Promise.reject(mockErrorPayload));
   });
 
-  afterAll(fetchMock.restore);
-
-  const mockGetUrl = '/mock/get/url';
-  const mockPostUrl = '/mock/post/url';
-  const mockPutUrl = '/mock/put/url';
-  const mockPatchUrl = '/mock/patch/url';
-  const mockCacheUrl = '/mock/cache/url';
-  const mockNotFound = '/mock/notfound';
-  const mockErrorUrl = '/mock/error/url';
-  const mock503 = '/mock/503';
-
-  const mockGetPayload = { get: 'payload' };
-  const mockPostPayload = { post: 'payload' };
-  const mockPutPayload = { post: 'payload' };
-  const mockPatchPayload = { post: 'payload' };
-  const mockCachePayload = {
-    status: 200,
-    body: 'BODY',
-    headers: { Etag: 'etag' },
-  };
-  const mockErrorPayload = { status: 500, statusText: 'Internal error' };
-
-  fetchMock.get(mockGetUrl, mockGetPayload);
-  fetchMock.post(mockPostUrl, mockPostPayload);
-  fetchMock.put(mockPutUrl, mockPutPayload);
-  fetchMock.patch(mockPatchUrl, mockPatchPayload);
-  fetchMock.get(mockCacheUrl, mockCachePayload);
-  fetchMock.get(mockNotFound, { status: 404 });
-  fetchMock.get(mock503, { status: 503 });
-  fetchMock.get(mockErrorUrl, () => Promise.reject(mockErrorPayload));
-
-  afterEach(fetchMock.reset);
+  afterEach(() => fetchMock.reset());
 
   describe('request config', () => {
     it('calls the right url with the specified method', async () => {
@@ -401,7 +399,7 @@ describe('callApi()', () => {
       Object.defineProperty(constants, 'CACHE_AVAILABLE', { value: false });
 
       const firstResponse = await callApi({ url: mockCacheUrl, method: 'GET' });
-      const calls = fetchMock.calls(mockCacheUrl);
+      let calls = fetchMock.calls(mockCacheUrl);
       expect(calls).toHaveLength(1);
       const firstBody = await firstResponse.text();
       expect(firstBody).toEqual('BODY');
@@ -410,6 +408,7 @@ describe('callApi()', () => {
         url: mockCacheUrl,
         method: 'GET',
       });
+      calls = fetchMock.calls(mockCacheUrl);
       const fetchParams = calls[1][1] as RequestInit;
       expect(calls).toHaveLength(2);
       // second call should not have If-None-Match header
@@ -425,11 +424,12 @@ describe('callApi()', () => {
       expect.assertions(3);
       // first call sets the cache
       await callApi({ url: mockCacheUrl, method: 'GET' });
-      const calls = fetchMock.calls(mockCacheUrl);
+      let calls = fetchMock.calls(mockCacheUrl);
       expect(calls).toHaveLength(1);
 
       // second call sends the Etag in the If-None-Match header
       await callApi({ url: mockCacheUrl, method: 'GET' });
+      calls = fetchMock.calls(mockCacheUrl);
       const fetchParams = calls[1][1] as RequestInit;
       const headers = { 'If-None-Match': 'etag' };
       expect(calls).toHaveLength(2);
@@ -442,8 +442,7 @@ describe('callApi()', () => {
       expect.assertions(3);
       // first call sets the cache
       await callApi({ url: mockCacheUrl, method: 'GET' });
-      const calls = fetchMock.calls(mockCacheUrl);
-      expect(calls).toHaveLength(1);
+      expect(fetchMock.calls(mockCacheUrl)).toHaveLength(1);
       // second call reuses the cached payload on a 304
       const mockCachedPayload = { status: 304 };
       fetchMock.get(mockCacheUrl, mockCachedPayload, { overwriteRoutes: true });
@@ -452,7 +451,7 @@ describe('callApi()', () => {
         url: mockCacheUrl,
         method: 'GET',
       });
-      expect(calls).toHaveLength(2);
+      expect(fetchMock.calls(mockCacheUrl)).toHaveLength(2);
       const secondBody = await secondResponse.text();
       expect(secondBody).toEqual('BODY');
     });
@@ -641,6 +640,7 @@ describe('callApi()', () => {
   it('should ignore "null" postPayload string', async () => {
     expect.assertions(1);
     fetchMock.post('/post-null-postpayload', {});
+    fetchMock.post('/post-formdata', {});
     await callApi({
       url: '/post-formdata',
       method: 'POST',

superset-frontend/packages/superset-ui-core/test/connection/callApi/callApiAndParseWithTimeout.test.ts

@@ -27,16 +27,15 @@ import * as rejectAfterTimeout from '../../../src/connection/callApi/rejectAfter
 
 import { LOGIN_GLOB } from '../fixtures/constants';
 
+const mockGetUrl = '/mock/get/url';
+const mockGetPayload = { get: 'payload' };
+
 describe('callApiAndParseWithTimeout()', () => {
-  beforeAll(() => {
-    fetchMock.get(LOGIN_GLOB, { result: '1234' });
-  });
+  beforeAll(() => fetchMock.get(LOGIN_GLOB, { result: '1234' }));
 
-  afterAll(fetchMock.restore);
+  beforeEach(() => fetchMock.get(mockGetUrl, mockGetPayload));
 
-  const mockGetUrl = '/mock/get/url';
-  const mockGetPayload = { get: 'payload' };
-  fetchMock.get(mockGetUrl, mockGetPayload);
+  afterAll(() => fetchMock.restore());
 
   afterEach(() => {
     fetchMock.reset();

superset-frontend/packages/superset-ui-core/test/connection/callApi/parseResponse.test.ts

@@ -27,7 +27,7 @@ describe('parseResponse()', () => {
     fetchMock.get(LOGIN_GLOB, { result: '1234' });
   });
 
-  afterAll(fetchMock.restore);
+  afterAll(() => fetchMock.restore());
 
   const mockGetUrl = '/mock/get/url';
   const mockPostUrl = '/mock/post/url';
@@ -38,12 +38,14 @@ describe('parseResponse()', () => {
   const mockPostPayload = { post: 'payload' };
   const mockErrorPayload = { status: 500, statusText: 'Internal error' };
 
-  fetchMock.get(mockGetUrl, mockGetPayload);
-  fetchMock.post(mockPostUrl, mockPostPayload);
-  fetchMock.get(mockErrorUrl, () => Promise.reject(mockErrorPayload));
-  fetchMock.get(mockNoParseUrl, new Response('test response'));
+  beforeEach(() => {
+    fetchMock.get(mockGetUrl, mockGetPayload);
+    fetchMock.post(mockPostUrl, mockPostPayload);
+    fetchMock.get(mockErrorUrl, () => Promise.reject(mockErrorPayload));
+    fetchMock.get(mockNoParseUrl, new Response('test response'));
+  });
 
-  afterEach(fetchMock.reset);
+  afterEach(() => fetchMock.reset());
 
   it('returns a Promise', () => {
     const apiPromise = callApi({ url: mockGetUrl, method: 'GET' });

superset-frontend/packages/superset-ui-core/test/query/api/legacy/getDatasourceMetadata.test.ts

@@ -22,9 +22,9 @@ import { getDatasourceMetadata } from '../../../../src/query/api/legacy';
 import setupClientForTest from '../setupClientForTest';
 
 describe('getFormData()', () => {
-  beforeAll(setupClientForTest);
+  beforeAll(() => setupClientForTest());
 
-  afterEach(fetchMock.restore);
+  afterEach(() => fetchMock.restore());
 
   it('returns datasource metadata for given datasource key', () => {
     const mockData = {

superset-frontend/packages/superset-ui-core/test/query/api/legacy/getFormData.test.ts

@@ -22,9 +22,9 @@ import { getFormData } from '../../../../src/query/api/legacy';
 import setupClientForTest from '../setupClientForTest';
 
 describe('getFormData()', () => {
-  beforeAll(setupClientForTest);
+  beforeAll(() => setupClientForTest());
 
-  afterEach(fetchMock.restore);
+  afterEach(() => fetchMock.restore());
 
   const mockData = {
     datasource: '1__table',

superset-frontend/packages/superset-ui-core/test/query/api/setupClientForTest.ts

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+// eslint-disable-next-line import/no-extraneous-dependencies -- The below fetch-mock import shouldn't be considered as direct dependency
 import fetchMock from 'fetch-mock';
 import { SupersetClient } from '@superset-ui/core';
 

superset-frontend/packages/superset-ui-core/test/query/api/v1/getChartData.test.ts

@@ -21,8 +21,8 @@ import { buildQueryContext, ApiV1 } from '@superset-ui/core';
 import setupClientForTest from '../setupClientForTest';
 
 describe('API v1 > getChartData()', () => {
-  beforeAll(setupClientForTest);
-  afterEach(fetchMock.restore);
+  beforeAll(() => setupClientForTest());
+  afterEach(() => fetchMock.restore());
 
   it('returns a promise of ChartDataResponse', async () => {
     const response = {

superset-frontend/packages/superset-ui-core/test/query/api/v1/makeApi.test.ts

@@ -22,8 +22,8 @@ import { makeApi, SupersetApiError } from '../../../../src/query';
 import setupClientForTest from '../setupClientForTest';
 
 describe('makeApi()', () => {
-  beforeAll(setupClientForTest);
-  afterEach(fetchMock.restore);
+  beforeAll(() => setupClientForTest());
+  afterEach(() => fetchMock.restore());
 
   it('should expose method and endpoint', () => {
     const api = makeApi({

superset-frontend/packages/superset-ui-core/test/time-comparison/fetchTimeRange.test.ts

@@ -25,7 +25,7 @@ import {
   formatTimeRangeComparison,
 } from '../../src/time-comparison/fetchTimeRange';
 
-afterEach(fetchMock.restore);
+afterEach(() => fetchMock.restore());
 
 test('generates proper time range string', () => {
   expect(
@@ -56,7 +56,7 @@ test('generates a readable time range', () => {
 });
 
 test('returns a formatted time range from response', async () => {
-  fetchMock.get("glob:*/api/v1/time_range/?q='Last+day'", {
+  fetchMock.get('glob:*/api/v1/time_range/?q=%27Last+day%27', {
     result: [
       {
         since: '2021-04-13T00:00:00',
@@ -73,7 +73,7 @@ test('returns a formatted time range from response', async () => {
 });
 
 test('returns a formatted time range from empty response', async () => {
-  fetchMock.get("glob:*/api/v1/time_range/?q='Last+day'", {
+  fetchMock.get('glob:*/api/v1/time_range/?q=%27Last+day%27', {
     result: [],
   });
 
@@ -84,7 +84,7 @@ test('returns a formatted time range from empty response', async () => {
 });
 
 test('returns a formatted error message from response', async () => {
-  fetchMock.getOnce("glob:*/api/v1/time_range/?q='Last+day'", {
+  fetchMock.get('glob:*/api/v1/time_range/?q=%27Last+day%27', {
     throws: new Response(JSON.stringify({ message: 'Network error' })),
   });
   let timeRange = await fetchTimeRange('Last day');
@@ -92,8 +92,8 @@ test('returns a formatted error message from response', async () => {
     error: 'Network error',
   });
 
-  fetchMock.getOnce(
-    "glob:*/api/v1/time_range/?q='Last+day'",
+  fetchMock.get(
+    'glob:*/api/v1/time_range/?q=%27Last+day%27',
     {
       throws: new Error('Internal Server Error'),
     },
@@ -104,8 +104,8 @@ test('returns a formatted error message from response', async () => {
     error: 'Internal Server Error',
   });
 
-  fetchMock.getOnce(
-    "glob:*/api/v1/time_range/?q='Last+day'",
+  fetchMock.get(
+    'glob:*/api/v1/time_range/?q=%27Last+day%27',
     {
       throws: new Response(JSON.stringify({ statusText: 'Network error' }), {
         statusText: 'Network error',
@@ -117,11 +117,11 @@ test('returns a formatted error message from response', async () => {
   expect(timeRange).toEqual({
     error: 'Network error',
   });
-});
+}, 10000);
 
 test('fetchTimeRange with shift', async () => {
   fetchMock.getOnce(
-    "glob:*/api/v1/time_range/?q=!((timeRange:'Last+day'),(shift%3A'last%20month'%2CtimeRange%3A'Last%20day'))",
+    'glob:*/api/v1/time_range/?q=!((timeRange:%27Last+day%27),(shift%3A%27last%20month%27%2CtimeRange%3A%27Last%20day%27))',
     {
       result: [
         {

superset-frontend/plugins/legacy-plugin-chart-partition/package.json

@@ -30,7 +30,7 @@
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/jest-dom": "*",
     "@testing-library/react": "^12.1.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

superset-frontend/plugins/plugin-chart-table/package.json

@@ -40,10 +40,10 @@
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
     "@testing-library/dom": "^8.20.1",
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/jest-dom": "*",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@testing-library/user-event": "^12.7.0",
+    "@testing-library/react-hooks": "*",
+    "@testing-library/user-event": "*",
     "@types/classnames": "*",
     "@types/react": "*",
     "match-sorter": "^6.3.3",

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { ReactNode, ReactElement } from 'react';
 import {
   render,

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

@@ -24,7 +24,7 @@ import * as uiCore from '@superset-ui/core';
 import { Provider } from 'react-redux';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { render, screen, act } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import * as utils from 'src/utils/common';
 import ShareSqlLabQuery from 'src/SqlLab/components/ShareSqlLabQuery';

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

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

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

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

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

@@ -18,7 +18,7 @@
  */
 
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import {
   ErrorLevel,
   ErrorSource,

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

@@ -17,8 +17,8 @@
  * under the License.
  */
 
+import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import {
   ErrorLevel,
   ErrorTypeEnum,

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Preset } from '@superset-ui/core';
-import userEvent, { specialChars } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import chartQueries from 'spec/fixtures/mockChartQueries';
 import { dashboardLayout } from 'spec/fixtures/mockDashboardLayout';
@@ -287,7 +287,7 @@ test('validates the column', async () => {
 test.skip('validates the default value', async () => {
   defaultRender(noTemporalColumnsState());
   expect(await screen.findByText('birth_names')).toBeInTheDocument();
-  userEvent.type(screen.getByRole('combobox'), `Column A${specialChars.enter}`);
+  userEvent.type(screen.getByRole('combobox'), `Column A{Enter}`);
   userEvent.click(getCheckbox(DEFAULT_VALUE_REGEX));
   await waitFor(() => {
     expect(

superset-frontend/src/explore/components/controls/DateFilterControl/tests/CurrentCalendarFrame.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect'; // For advanced DOM assertions
+import '@testing-library/jest-dom'; // For advanced DOM assertions
 import { CurrentCalendarFrame } from '../components/CurrentCalendarFrame';
 import { CurrentWeek } from '../types';
 

superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.test.tsx

@@ -18,7 +18,7 @@
  */
 
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';

superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/OAuth2ClientField.test.tsx

@@ -18,7 +18,7 @@
  */
 
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 import { DatabaseObject } from 'src/features/databases/types';
 import { OAuth2ClientField } from './OAuth2ClientField';

superset-frontend/src/features/databases/DatabaseModal/index.test.tsx

@@ -1409,6 +1409,8 @@ describe('DatabaseModal', () => {
         const importDbButton = screen.getByTestId(
           'import-database-btn',
         ) as HTMLInputElement;
+        importDbButton.type = 'file';
+        importDbButton.files = {} as FileList;
         expect(importDbButton).toBeVisible();
 
         const testFile = new File([new ArrayBuffer(1)], 'model_export.zip');

superset-frontend/src/features/databases/UploadDataModel/UploadDataModal.test.tsx

@@ -616,7 +616,7 @@ test('CSV, form post', async () => {
   const inputElement = document.querySelector('input[type="file"]');
 
   if (inputElement) {
-    userEvent.upload(inputElement, file);
+    userEvent.upload(inputElement as HTMLElement, file);
   }
 
   const selectDatabase = screen.getByRole('combobox', {
@@ -673,7 +673,7 @@ test('Excel, form post', async () => {
   const inputElement = document.querySelector('input[type="file"]');
 
   if (inputElement) {
-    userEvent.upload(inputElement, file);
+    userEvent.upload(inputElement as HTMLElement, file);
   }
 
   const selectDatabase = screen.getByRole('combobox', {
@@ -734,7 +734,7 @@ test('Columnar, form post', async () => {
   const inputElement = document.querySelector('input[type="file"]');
 
   if (inputElement) {
-    userEvent.upload(inputElement, file);
+    userEvent.upload(inputElement as HTMLElement, file);
   }
 
   const selectDatabase = screen.getByRole('combobox', {