chore(fe): replace deprecate aliased Jest matchers with corresponding substituents

superset-frontend/.eslintrc.js

@@ -280,7 +280,6 @@ module.exports = {
         'theme-colors/no-literal-colors': 0,
         'translation-vars/no-template-vars': 0,
         'no-restricted-imports': 0,
-        'jest/no-alias-methods': 0,
         'react/no-void-elements': 0,
       },
     },
@@ -371,7 +370,6 @@ module.exports = {
     'react-prefer-function-component/react-prefer-function-component': 1,
     'prettier/prettier': 'error',
     // disabling some things that come with the eslint 7->8 upgrade. Will address these in a separate PR
-    'jest/no-alias-methods': 0,
     'react/no-unknown-property': 0,
     'react/no-void-elements': 0,
     'react/function-component-definition': [

superset-frontend/packages/superset-ui-core/src/hooks/useChangeEffect/useChangeEffect.test.ts

@@ -24,8 +24,8 @@ test('call callback the first time with undefined and value', () => {
   renderHook(props => useChangeEffect(props.value, props.callback), {
     initialProps: { value: 'value', callback },
   });
-  expect(callback).toBeCalledTimes(1);
-  expect(callback).nthCalledWith(1, undefined, 'value');
+  expect(callback).toHaveBeenCalledTimes(1);
+  expect(callback).toHaveBeenNthCalledWith(1, undefined, 'value');
 });
 
 test('do not call callback 2 times if the value do not change', () => {
@@ -37,7 +37,7 @@ test('do not call callback 2 times if the value do not change', () => {
     },
   );
   hook.rerender({ value: 'value', callback });
-  expect(callback).toBeCalledTimes(1);
+  expect(callback).toHaveBeenCalledTimes(1);
 });
 
 test('call callback whenever the value changes', () => {
@@ -49,6 +49,6 @@ test('call callback whenever the value changes', () => {
     },
   );
   hook.rerender({ value: 'value-2', callback });
-  expect(callback).toBeCalledTimes(2);
-  expect(callback).nthCalledWith(2, 'value', 'value-2');
+  expect(callback).toHaveBeenCalledTimes(2);
+  expect(callback).toHaveBeenNthCalledWith(2, 'value', 'value-2');
 });

superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidMount/useComponentDidMount.test.ts

@@ -22,7 +22,7 @@ import { useComponentDidMount } from './useComponentDidMount';
 test('the effect should only be executed on the first render', () => {
   const effect = jest.fn();
   const hook = renderHook(() => useComponentDidMount(effect));
-  expect(effect).toBeCalledTimes(1);
+  expect(effect).toHaveBeenCalledTimes(1);
   hook.rerender();
-  expect(effect).toBeCalledTimes(1);
+  expect(effect).toHaveBeenCalledTimes(1);
 });

superset-frontend/packages/superset-ui-core/src/hooks/useComponentDidUpdate/useComponentDidUpdate.test.ts

@@ -24,8 +24,8 @@ test('the effect should not be executed on the first render', () => {
   const hook = renderHook(props => useComponentDidUpdate(props.effect), {
     initialProps: { effect },
   });
-  expect(effect).toBeCalledTimes(0);
+  expect(effect).toHaveBeenCalledTimes(0);
   const changedEffect = jest.fn();
   hook.rerender({ effect: changedEffect });
-  expect(changedEffect).toBeCalledTimes(1);
+  expect(changedEffect).toHaveBeenCalledTimes(1);
 });

superset-frontend/packages/superset-ui-core/test/color/LabelsColorMapSingleton.test.ts

@@ -192,7 +192,7 @@ describe('LabelsColorMap', () => {
       labelsColorMap.updateColorMap(categoricalNamespace, 'testColors');
       const colorMap = labelsColorMap.getColorMap();
       expect(Object.fromEntries(colorMap)).not.toEqual({});
-      expect(getAnalogousColorsSpy).not.toBeCalled();
+      expect(getAnalogousColorsSpy).not.toHaveBeenCalled();
     });
 
     it('should use analagous colors', () => {
@@ -207,7 +207,7 @@ describe('LabelsColorMap', () => {
       labelsColorMap.updateColorMap(categoricalNamespace, 'testColors');
       const colorMap = labelsColorMap.getColorMap();
       expect(Object.fromEntries(colorMap)).not.toEqual({});
-      expect(getAnalogousColorsSpy).toBeCalled();
+      expect(getAnalogousColorsSpy).toHaveBeenCalled();
     });
   });
 

superset-frontend/packages/superset-ui-core/test/models/Registry.test.ts

@@ -396,45 +396,45 @@ describe('Registry', () => {
 
     it('calls the listener when a value is registered', () => {
       registry.registerValue('foo', 'bar');
-      expect(listener).toBeCalledWith(['foo']);
+      expect(listener).toHaveBeenCalledWith(['foo']);
     });
 
     it('calls the listener when a loader is registered', () => {
       registry.registerLoader('foo', () => 'bar');
-      expect(listener).toBeCalledWith(['foo']);
+      expect(listener).toHaveBeenCalledWith(['foo']);
     });
 
     it('calls the listener when a value is overridden', () => {
       registry.registerValue('foo', 'bar');
       listener.mockClear();
       registry.registerValue('foo', 'baz');
-      expect(listener).toBeCalledWith(['foo']);
+      expect(listener).toHaveBeenCalledWith(['foo']);
     });
 
     it('calls the listener when a value is removed', () => {
       registry.registerValue('foo', 'bar');
       listener.mockClear();
       registry.remove('foo');
-      expect(listener).toBeCalledWith(['foo']);
+      expect(listener).toHaveBeenCalledWith(['foo']);
     });
 
     it('does not call the listener when a value is not actually removed', () => {
       registry.remove('foo');
-      expect(listener).not.toBeCalled();
+      expect(listener).not.toHaveBeenCalled();
     });
 
     it('calls the listener when registry is cleared', () => {
       registry.registerValue('foo', 'bar');
       registry.registerLoader('fluz', () => 'baz');
       listener.mockClear();
       registry.clear();
-      expect(listener).toBeCalledWith(['foo', 'fluz']);
+      expect(listener).toHaveBeenCalledWith(['foo', 'fluz']);
     });
 
     it('removes listeners correctly', () => {
       registry.removeListener(listener);
       registry.registerValue('foo', 'bar');
-      expect(listener).not.toBeCalled();
+      expect(listener).not.toHaveBeenCalled();
     });
 
     describe('with a broken listener', () => {
@@ -456,10 +456,10 @@ describe('Registry', () => {
         registry.addListener(lastListener);
         registry.registerValue('foo', 'bar');
 
-        expect(listener).toBeCalledWith(['foo']);
-        expect(errorListener).toBeCalledWith(['foo']);
-        expect(lastListener).toBeCalledWith(['foo']);
-        expect(console.error).toBeCalled();
+        expect(listener).toHaveBeenCalledWith(['foo']);
+        expect(errorListener).toHaveBeenCalledWith(['foo']);
+        expect(lastListener).toHaveBeenCalledWith(['foo']);
+        expect(console.error).toHaveBeenCalled();
       });
     });
   });

superset-frontend/packages/superset-ui-core/test/query/buildQueryContext.test.ts

@@ -138,7 +138,7 @@ describe('buildQueryContext', () => {
       },
       () => [{}],
     );
-    expect(spyNormalizeTimeColumn).toBeCalled();
+    expect(spyNormalizeTimeColumn).toHaveBeenCalled();
     spyNormalizeTimeColumn.mockRestore();
   });
 });

superset-frontend/packages/superset-ui-core/test/translation/TranslatorSingleton.test.ts

@@ -80,7 +80,7 @@ describe('TranslatorSingleton', () => {
     expect(t('second')).toEqual('second');
     resetTranslation();
     expect(t('second')).toEqual('second');
-    expect(console.warn).toBeCalledTimes(2);
+    expect(console.warn).toHaveBeenCalledTimes(2);
     restoreConsole();
   });
 });

superset-frontend/packages/superset-ui-switchboard/src/switchboard.test.ts

@@ -294,7 +294,7 @@ describe('comms', () => {
       });
       port2.start();
 
-      await expect(ours.get('someMethod')).rejects.toThrowError(
+      await expect(ours.get('someMethod')).rejects.toThrow(
         'Unexpected response message',
       );
     });

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

@@ -127,7 +127,7 @@ describe('ShareSqlLabQuery', () => {
       const storeQuerySpy = jest.spyOn(utils, 'storeQuery');
       userEvent.click(button);
       expect(storeQuerySpy.mock.calls).toHaveLength(1);
-      expect(storeQuerySpy).toBeCalledWith(expected);
+      expect(storeQuerySpy).toHaveBeenCalledWith(expected);
       storeQuerySpy.mockRestore();
     });
 
@@ -142,7 +142,7 @@ describe('ShareSqlLabQuery', () => {
       const storeQuerySpy = jest.spyOn(utils, 'storeQuery');
       userEvent.click(button);
       expect(storeQuerySpy.mock.calls).toHaveLength(1);
-      expect(storeQuerySpy).toBeCalledWith(expected);
+      expect(storeQuerySpy).toHaveBeenCalledWith(expected);
       storeQuerySpy.mockRestore();
     });
   });

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

@@ -28,7 +28,7 @@ test('Should send correct props to ReactCronPicker', () => {
     myCustomProp: 'myCustomProp',
   };
   render(<CronPicker {...(props as any)} />);
-  expect(spy).toBeCalledWith(
+  expect(spy).toHaveBeenCalledWith(
     expect.objectContaining({
       className: expect.any(String),
       locale: expect.anything(),

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

@@ -219,9 +219,9 @@ test('Refresh should work', async () => {
   await waitFor(() => {
     expect(fetchMock.calls(databaseApiRoute).length).toBe(1);
     expect(fetchMock.calls(schemaApiRoute).length).toBe(1);
-    expect(props.handleError).toBeCalledTimes(0);
-    expect(props.onDbChange).toBeCalledTimes(0);
-    expect(props.onSchemaChange).toBeCalledTimes(0);
+    expect(props.handleError).toHaveBeenCalledTimes(0);
+    expect(props.onDbChange).toHaveBeenCalledTimes(0);
+    expect(props.onSchemaChange).toHaveBeenCalledTimes(0);
   });
 
   // click schema reload
@@ -230,9 +230,9 @@ test('Refresh should work', async () => {
   await waitFor(() => {
     expect(fetchMock.calls(databaseApiRoute).length).toBe(1);
     expect(fetchMock.calls(schemaApiRoute).length).toBe(2);
-    expect(props.handleError).toBeCalledTimes(0);
-    expect(props.onDbChange).toBeCalledTimes(0);
-    expect(props.onSchemaChange).toBeCalledTimes(0);
+    expect(props.handleError).toHaveBeenCalledTimes(0);
+    expect(props.onDbChange).toHaveBeenCalledTimes(0);
+    expect(props.onSchemaChange).toHaveBeenCalledTimes(0);
   });
 });
 

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

@@ -45,8 +45,8 @@ test('Calling "onHide"', () => {
   };
   const modal = <DeleteModal {...props} />;
   render(modal);
-  expect(props.onHide).toBeCalledTimes(0);
-  expect(props.onConfirm).toBeCalledTimes(0);
+  expect(props.onHide).toHaveBeenCalledTimes(0);
+  expect(props.onConfirm).toHaveBeenCalledTimes(0);
 
   // type "del" in the input
   userEvent.type(screen.getByTestId('delete-modal-input'), 'del');
@@ -55,8 +55,8 @@ test('Calling "onHide"', () => {
   // close the modal
   expect(screen.getByText('×')).toBeVisible();
   userEvent.click(screen.getByText('×'));
-  expect(props.onHide).toBeCalledTimes(1);
-  expect(props.onConfirm).toBeCalledTimes(0);
+  expect(props.onHide).toHaveBeenCalledTimes(1);
+  expect(props.onConfirm).toHaveBeenCalledTimes(0);
 
   // confirm input has been cleared
   expect(screen.getByTestId('delete-modal-input')).toHaveValue('');
@@ -71,19 +71,19 @@ test('Calling "onConfirm" only after typing "delete" in the input', () => {
     open: true,
   };
   render(<DeleteModal {...props} />);
-  expect(props.onHide).toBeCalledTimes(0);
-  expect(props.onConfirm).toBeCalledTimes(0);
+  expect(props.onHide).toHaveBeenCalledTimes(0);
+  expect(props.onConfirm).toHaveBeenCalledTimes(0);
   expect(screen.getByTestId('delete-modal-input')).toBeVisible();
-  expect(props.onConfirm).toBeCalledTimes(0);
+  expect(props.onConfirm).toHaveBeenCalledTimes(0);
 
   // do not execute "onConfirm" if you have not typed "delete"
   userEvent.click(screen.getByText('Delete'));
-  expect(props.onConfirm).toBeCalledTimes(0);
+  expect(props.onConfirm).toHaveBeenCalledTimes(0);
 
   // execute "onConfirm" if you have typed "delete"
   userEvent.type(screen.getByTestId('delete-modal-input'), 'delete');
   userEvent.click(screen.getByText('Delete'));
-  expect(props.onConfirm).toBeCalledTimes(1);
+  expect(props.onConfirm).toHaveBeenCalledTimes(1);
 
   // confirm input has been cleared
   expect(screen.getByTestId('delete-modal-input')).toHaveValue('');

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

@@ -37,20 +37,20 @@ test('render right content', async () => {
     screen.getByRole('img', { name: 'favorite-selected' }),
   ).toBeInTheDocument();
 
-  expect(props.saveFaveStar).toBeCalledTimes(0);
+  expect(props.saveFaveStar).toHaveBeenCalledTimes(0);
   userEvent.click(screen.getByRole('button'));
-  expect(props.saveFaveStar).toBeCalledTimes(1);
-  expect(props.saveFaveStar).toBeCalledWith(props.itemId, true);
+  expect(props.saveFaveStar).toHaveBeenCalledTimes(1);
+  expect(props.saveFaveStar).toHaveBeenCalledWith(props.itemId, true);
 
   rerender(<FaveStar {...props} />);
   expect(
     await findByRole('img', { name: 'favorite-unselected' }),
   ).toBeInTheDocument();
 
-  expect(props.saveFaveStar).toBeCalledTimes(1);
+  expect(props.saveFaveStar).toHaveBeenCalledTimes(1);
   userEvent.click(screen.getByRole('button'));
-  expect(props.saveFaveStar).toBeCalledTimes(2);
-  expect(props.saveFaveStar).toBeCalledWith(props.itemId, false);
+  expect(props.saveFaveStar).toHaveBeenCalledTimes(2);
+  expect(props.saveFaveStar).toHaveBeenCalledWith(props.itemId, false);
 });
 
 test('render content on tooltip', async () => {
@@ -87,9 +87,9 @@ test('Call fetchFaveStar on first render and on itemId change', async () => {
   expect(
     await findByRole('img', { name: 'favorite-unselected' }),
   ).toBeInTheDocument();
-  expect(props.fetchFaveStar).toBeCalledTimes(1);
-  expect(props.fetchFaveStar).toBeCalledWith(props.itemId);
+  expect(props.fetchFaveStar).toHaveBeenCalledTimes(1);
+  expect(props.fetchFaveStar).toHaveBeenCalledWith(props.itemId);
 
   rerender(<FaveStar {...{ ...props, itemId: 2 }} />);
-  expect(props.fetchFaveStar).toBeCalledTimes(2);
+  expect(props.fetchFaveStar).toHaveBeenCalledTimes(2);
 });

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

@@ -61,7 +61,7 @@ test('redirects to first page when page index is invalid', async () => {
   });
   await waitFor(() => {
     expect(window.location.search).toEqual('?pageIndex=0');
-    expect(fetchData).toBeCalledTimes(2);
+    expect(fetchData).toHaveBeenCalledTimes(2);
     expect(fetchData).toHaveBeenCalledWith(
       expect.objectContaining({ pageIndex: 9 }),
     );

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

@@ -24,15 +24,15 @@ import { Ellipsis } from './Ellipsis';
 test('Ellipsis - click when the button is enabled', () => {
   const click = jest.fn();
   render(<Ellipsis onClick={click} />);
-  expect(click).toBeCalledTimes(0);
+  expect(click).toHaveBeenCalledTimes(0);
   userEvent.click(screen.getByRole('button'));
-  expect(click).toBeCalledTimes(1);
+  expect(click).toHaveBeenCalledTimes(1);
 });
 
 test('Ellipsis - click when the button is disabled', () => {
   const click = jest.fn();
   render(<Ellipsis onClick={click} disabled />);
-  expect(click).toBeCalledTimes(0);
+  expect(click).toHaveBeenCalledTimes(0);
   userEvent.click(screen.getByRole('button'));
-  expect(click).toBeCalledTimes(0);
+  expect(click).toHaveBeenCalledTimes(0);
 });

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

@@ -28,9 +28,9 @@ test('Item - click when the item is not active', () => {
       <div data-test="test" />
     </Item>,
   );
-  expect(click).toBeCalledTimes(0);
+  expect(click).toHaveBeenCalledTimes(0);
   userEvent.click(screen.getByRole('button'));
-  expect(click).toBeCalledTimes(1);
+  expect(click).toHaveBeenCalledTimes(1);
   expect(screen.getByTestId('test')).toBeInTheDocument();
 });
 
@@ -41,8 +41,8 @@ test('Item - click when the item is active', () => {
       <div data-test="test" />
     </Item>,
   );
-  expect(click).toBeCalledTimes(0);
+  expect(click).toHaveBeenCalledTimes(0);
   userEvent.click(screen.getByRole('button'));
-  expect(click).toBeCalledTimes(0);
+  expect(click).toHaveBeenCalledTimes(0);
   expect(screen.getByTestId('test')).toBeInTheDocument();
 });

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

@@ -24,15 +24,15 @@ import { Next } from './Next';
 test('Next - click when the button is enabled', () => {
   const click = jest.fn();
   render(<Next onClick={click} />);
-  expect(click).toBeCalledTimes(0);
+  expect(click).toHaveBeenCalledTimes(0);
   userEvent.click(screen.getByRole('button'));
-  expect(click).toBeCalledTimes(1);
+  expect(click).toHaveBeenCalledTimes(1);
 });
 
 test('Next - click when the button is disabled', () => {
   const click = jest.fn();
   render(<Next onClick={click} disabled />);
-  expect(click).toBeCalledTimes(0);
+  expect(click).toHaveBeenCalledTimes(0);
   userEvent.click(screen.getByRole('button'));
-  expect(click).toBeCalledTimes(0);
+  expect(click).toHaveBeenCalledTimes(0);
 });