test(ui): Add types to test mocks (#79255)

static/app/components/modals/widgetViewerModal.spec.tsx

@@ -26,7 +26,7 @@ jest.mock('echarts-for-react/lib/core', () => {
 
 const stubEl = (props: {children?: React.ReactNode}) => <div>{props.children}</div>;
 
-let eventsMetaMock;
+let eventsMetaMock: jest.Mock;
 
 const waitForMetaToHaveBeenCalled = async () => {
   await waitFor(() => {

static/app/components/quickTrace/index.spec.tsx

@@ -3,11 +3,12 @@ import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import QuickTrace from 'sentry/components/quickTrace';
 import type {Event} from 'sentry/types/event';
+import type {Organization} from 'sentry/types/organization';
 import type {QuickTraceEvent} from 'sentry/utils/performance/quickTrace/types';
 
 describe('Quick Trace', function () {
-  let location;
-  let organization;
+  let location: any;
+  let organization: Organization;
 
   const initialize = () => {
     const context = initializeOrg();

static/app/components/search/sources/apiSource.spec.tsx

@@ -15,13 +15,13 @@ import ConfigStore from 'sentry/stores/configStore';
 
 describe('ApiSource', function () {
   const {organization, router} = initializeOrg();
-  let orgsMock;
-  let projectsMock;
-  let teamsMock;
-  let membersMock;
-  let shortIdMock;
-  let eventIdMock;
-  let configState;
+  let orgsMock: jest.Mock;
+  let projectsMock: jest.Mock;
+  let teamsMock: jest.Mock;
+  let membersMock: jest.Mock;
+  let shortIdMock: jest.Mock;
+  let eventIdMock: jest.Mock;
+  let configState: ReturnType<typeof ConfigStore.getState>;
 
   const defaultProps: ComponentProps<typeof ApiSource> = {
     query: '',

static/app/stores/groupingStore.spec.tsx

@@ -2,7 +2,7 @@ import * as GroupActionCreators from 'sentry/actionCreators/group';
 import GroupingStore from 'sentry/stores/groupingStore';
 
 describe('Grouping Store', function () {
-  let trigger;
+  let trigger!: jest.SpyInstance;
 
   beforeAll(function () {
     MockApiClient.asyncDelay = 1;

static/app/utils/replays/playback/providers/replayPlayerEventsContext.spec.tsx

@@ -44,7 +44,7 @@ describe('replayPlayerEventsContext', () => {
       errors: [],
       replayRecord: ReplayRecordFixture(),
     });
-    const mockRRwebFrames = [];
+    const mockRRwebFrames: any[] = [];
     mockReplay!.getRRWebFrames = jest.fn().mockReturnValue(mockRRwebFrames);
 
     const {result} = renderHook(useReplayPlayerEvents, {

static/app/utils/replays/playback/providers/replayPlayerPluginsContextProvider.spec.tsx

@@ -39,7 +39,7 @@ describe('replayPlayerPluginsContext', () => {
 
   it('should return no plugins if you dont use the Provider', () => {
     const mockOrganization = OrganizationFixture();
-    const mockEvents = [];
+    const mockEvents: any[] = [];
 
     const {result} = renderHook(useReplayPlayerPlugins, {
       wrapper: ({children}: {children?: ReactNode}) => (
@@ -57,7 +57,7 @@ describe('replayPlayerPluginsContext', () => {
     const mockOrganizationWithCanvas = OrganizationFixture({
       features: ['session-replay-enable-canvas-replayer'],
     });
-    const mockEvents = [];
+    const mockEvents: any[] = [];
 
     const {result: noCanvasResult} = renderHook(useReplayPlayerPlugins, {
       wrapper: makeWrapper(mockOrganizationNoCanvas),

static/app/views/dashboards/dashboard.spec.tsx

@@ -59,7 +59,8 @@ describe('Dashboards > Dashboard', () => {
     ],
   };
 
-  let initialData, tagsMock;
+  let initialData: ReturnType<typeof initializeOrg>;
+  let tagsMock: jest.Mock;
 
   beforeEach(() => {
     initialData = initializeOrg({organization, router: {}, projects: []});

static/app/views/dashboards/manage/dashboardList.spec.tsx

@@ -14,10 +14,13 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import DashboardList from 'sentry/views/dashboards/manage/dashboardList';
-import {DisplayType} from 'sentry/views/dashboards/types';
+import {type DashboardListItem, DisplayType} from 'sentry/views/dashboards/types';
 
 describe('Dashboards - DashboardList', function () {
-  let dashboards, deleteMock, dashboardUpdateMock, createMock;
+  let dashboards: DashboardListItem[];
+  let deleteMock: jest.Mock;
+  let dashboardUpdateMock: jest.Mock;
+  let createMock: jest.Mock;
   const organization = OrganizationFixture({
     features: ['global-views', 'dashboards-basic', 'dashboards-edit', 'discover-query'],
   });

static/app/views/dashboards/widgetCard/index.spec.tsx

@@ -78,7 +78,7 @@ describe('Dashboards > WidgetCard', function () {
   };
 
   const api = new MockApiClient();
-  let eventsMock;
+  let eventsMock: jest.Mock;
 
   beforeEach(function () {
     MockApiClient.addMockResponse({

static/app/views/discover/savedQuery/index.spec.tsx

@@ -3,7 +3,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {openAddToDashboardModal} from 'sentry/actionCreators/modal';
-import type {NewQuery} from 'sentry/types/organization';
+import type {NewQuery, Organization, SavedQuery} from 'sentry/types/organization';
 import EventView from 'sentry/utils/discover/eventView';
 import {DisplayModes, SavedQueryDatasets} from 'sentry/utils/discover/types';
 import {WidgetType} from 'sentry/views/dashboards/types';
@@ -41,12 +41,12 @@ function mount(
 }
 
 describe('Discover > SaveQueryButtonGroup', function () {
-  let organization,
-    errorsView,
-    savedQuery,
-    errorsViewSaved,
-    errorsViewModified,
-    errorsQuery;
+  let organization: Organization;
+  let errorsView: EventView;
+  let savedQuery: SavedQuery;
+  let errorsViewSaved: EventView;
+  let errorsViewModified: EventView;
+  let errorsQuery: NewQuery;
   const location = {
     pathname: '/organization/eventsv2/',
     query: {},
@@ -272,7 +272,7 @@ describe('Discover > SaveQueryButtonGroup', function () {
   });
 
   describe('viewing a saved query', () => {
-    let mockUtils;
+    let mockUtils: jest.SpyInstance;
 
     beforeEach(() => {
       mockUtils = jest
@@ -362,7 +362,7 @@ describe('Discover > SaveQueryButtonGroup', function () {
   });
 
   describe('modifying a saved query', () => {
-    let mockUtils;
+    let mockUtils: jest.SpyInstance;
 
     it('renders the correct set of buttons', async () => {
       mount(

static/app/views/discover/savedQuery/utils.spec.tsx

@@ -20,7 +20,7 @@ describe('SavedQueries API helpers', () => {
   errorsView.id = '1'; // set id manually as errorsView.id is undefined
   const yAxis = ['count()', 'failure_count()'];
 
-  let mockCall;
+  let mockCall: jest.Mock;
 
   afterEach(() => {
     MockApiClient.clearMockResponses();

static/app/views/discover/table/cellAction.spec.tsx

@@ -107,7 +107,7 @@ describe('Discover -> CellAction', function () {
   });
 
   describe('per cell actions', function () {
-    let handleCellAction;
+    let handleCellAction!: jest.Mock;
 
     beforeEach(function () {
       handleCellAction = jest.fn();

static/app/views/discover/table/columnEditModal.spec.tsx

@@ -16,7 +16,7 @@ import type {QueryFieldValue} from 'sentry/utils/discover/fields';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import ColumnEditModal from 'sentry/views/discover/table/columnEditModal';
 
-const stubEl = styled(p => p.children);
+const stubEl = styled((p: any) => p.children);
 
 function mountModal(
   {
@@ -277,7 +277,7 @@ describe('Discover -> ColumnEditModal', function () {
   });
 
   describe('function & column selection', function () {
-    let onApply;
+    let onApply!: jest.Mock;
     beforeEach(function () {
       onApply = jest.fn();
     });
@@ -632,7 +632,7 @@ describe('Discover -> ColumnEditModal', function () {
   });
 
   describe('equation automatic update', function () {
-    let onApply;
+    let onApply!: jest.Mock;
     beforeEach(function () {
       onApply = jest.fn();
     });

static/app/views/discover/table/tableView.spec.tsx

@@ -7,12 +7,15 @@ import {act, render, screen, userEvent, within} from 'sentry-test/reactTestingLi
 import ProjectsStore from 'sentry/stores/projectsStore';
 import TagStore from 'sentry/stores/tagStore';
 import {browserHistory} from 'sentry/utils/browserHistory';
+import type {TableData} from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
 import {SavedQueryDatasets} from 'sentry/utils/discover/types';
 import TableView from 'sentry/views/discover/table/tableView';
 
 describe('TableView > CellActions', function () {
-  let initialData, rows, onChangeShowTags;
+  let initialData: ReturnType<typeof initializeOrg>;
+  let rows: any;
+  let onChangeShowTags: jest.Mock;
 
   const location = LocationFixture({
     pathname: '/organizations/org-slug/discover/results/',
@@ -37,7 +40,11 @@ describe('TableView > CellActions', function () {
   });
   const eventView = EventView.fromLocation(location);
 
-  function renderComponent(context, tableData, view) {
+  function renderComponent(
+    context: ReturnType<typeof initializeOrg>,
+    tableData: TableData,
+    view: EventView
+  ) {
     return render(
       <TableView
         organization={context.organization}
@@ -57,7 +64,7 @@ describe('TableView > CellActions', function () {
     );
   }
 
-  async function openContextMenu(cellIndex) {
+  async function openContextMenu(cellIndex: number) {
     const firstRow = screen.getAllByRole('row')[1];
     const emptyValueCell = within(firstRow).getAllByRole('cell')[cellIndex];
 

static/app/views/insights/browser/webVitals/components/tables/pagePerformanceTable.spec.tsx

@@ -22,7 +22,7 @@ describe('PagePerformanceTable', function () {
   const organization = OrganizationFixture();
   const router = RouterFixture();
 
-  let eventsMock;
+  let eventsMock: jest.Mock;
 
   beforeEach(function () {
     jest.mocked(useLocation).mockReturnValue(router.location);

static/app/views/insights/database/views/databaseLandingPage.spec.tsx

@@ -17,7 +17,8 @@ jest.mock('sentry/views/insights/common/queries/useOnboardingProject');
 describe('DatabaseLandingPage', function () {
   const organization = OrganizationFixture();
 
-  let spanListRequestMock, spanChartsRequestMock;
+  let spanListRequestMock: jest.Mock;
+  let spanChartsRequestMock: jest.Mock;
 
   jest.mocked(useProjects).mockReturnValue({
     projects: [ProjectFixture({hasInsightsDb: true})],

static/app/views/insights/http/components/httpSamplesPanel.spec.tsx

@@ -17,7 +17,7 @@ jest.mock('sentry/utils/usePageFilters');
 describe('HTTPSamplesPanel', () => {
   const organization = OrganizationFixture();
 
-  let eventsRequestMock;
+  let eventsRequestMock: jest.Mock;
 
   jest.mocked(usePageFilters).mockReturnValue({
     isReady: true,
@@ -95,7 +95,9 @@ describe('HTTPSamplesPanel', () => {
   });
 
   describe('Status panel', () => {
-    let eventsStatsRequestMock, samplesRequestMock, spanFieldTagsMock;
+    let eventsStatsRequestMock: jest.Mock;
+    let samplesRequestMock: jest.Mock;
+    let spanFieldTagsMock: jest.Mock;
 
     beforeEach(() => {
       jest.mocked(useLocation).mockReturnValue({
@@ -307,7 +309,9 @@ describe('HTTPSamplesPanel', () => {
   });
 
   describe('Duration panel', () => {
-    let chartRequestMock, samplesRequestMock, spanFieldTagsMock;
+    let chartRequestMock: jest.Mock;
+    let samplesRequestMock: jest.Mock;
+    let spanFieldTagsMock: jest.Mock;
 
     beforeEach(() => {
       jest.mocked(useLocation).mockReturnValue({

static/app/views/insights/mobile/screenload/views/screenLoadSpansPage.spec.tsx

@@ -4,6 +4,8 @@ import {ProjectFixture} from 'sentry-fixture/project';
 
 import {render, screen, waitFor, within} from 'sentry-test/reactTestingLibrary';
 
+import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import localStorage from 'sentry/utils/localStorage';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -17,7 +19,7 @@ jest.mock('sentry/utils/useLocation');
 jest.mock('sentry/utils/usePageFilters');
 jest.mock('sentry/utils/useProjects');
 
-function mockResponses(organization, project) {
+function mockResponses(organization: Organization, project: Project) {
   jest.mocked(useOnboardingProject).mockReturnValue(undefined);
 
   jest.mocked(useProjects).mockReturnValue({
@@ -109,9 +111,9 @@ function mockResponses(organization, project) {
 
 describe('Screen Summary', function () {
   describe('Cross Platform Project', function () {
-    let eventsMock;
-    let eventsStatsMock;
-    let organization;
+    let eventsMock: jest.Mock;
+    let eventsStatsMock: jest.Mock;
+    let organization: Organization;
     beforeEach(function () {
       const project = ProjectFixture({
         platform: 'react-native',
@@ -205,9 +207,9 @@ describe('Screen Summary', function () {
   });
 
   describe('Native Project', function () {
-    let eventsMock;
-    let eventsStatsMock;
-    let organization;
+    let eventsMock: jest.Mock;
+    let eventsStatsMock: jest.Mock;
+    let organization: Organization;
     beforeEach(function () {
       const project = ProjectFixture({platform: 'android', hasInsightsScreenLoad: true});
       organization = OrganizationFixture({features: ['insights-initial-modules']});

static/app/views/insights/mobile/screenload/views/screenloadLandingPage.spec.tsx

@@ -63,7 +63,7 @@ describe('PageloadModule', function () {
     },
   });
 
-  let eventsMock;
+  let eventsMock: jest.Mock;
   beforeEach(function () {
     localStorage.clear();
     browserHistory.push = jest.fn();

static/app/views/insights/queues/charts/latencyChart.spec.tsx

@@ -8,7 +8,7 @@ import {Referrer} from 'sentry/views/insights/queues/referrers';
 describe('latencyChart', () => {
   const organization = OrganizationFixture();
 
-  let eventsStatsMock;
+  let eventsStatsMock: jest.Mock;
 
   beforeEach(() => {
     eventsStatsMock = MockApiClient.addMockResponse({

static/app/views/insights/queues/components/messageSpanSamplesPanel.spec.tsx

@@ -12,7 +12,10 @@ jest.mock('sentry/utils/usePageFilters');
 describe('messageSpanSamplesPanel', () => {
   const organization = OrganizationFixture();
 
-  let eventsRequestMock, eventsStatsRequestMock, samplesRequestMock, spanFieldTagsMock;
+  let eventsRequestMock: jest.Mock;
+  let eventsStatsRequestMock: jest.Mock;
+  let samplesRequestMock: jest.Mock;
+  let spanFieldTagsMock: jest.Mock;
 
   jest.mocked(usePageFilters).mockReturnValue({
     isReady: true,

static/app/views/insights/queues/components/tables/queuesTable.spec.tsx

@@ -8,7 +8,7 @@ import {SpanIndexedField} from 'sentry/views/insights/types';
 describe('queuesTable', () => {
   const organization = OrganizationFixture();
 
-  let eventsMock;
+  let eventsMock: jest.Mock;
 
   const pageLinks =
     '<https://sentry.io/fake/previous>; rel="previous"; results="false"; cursor="0:0:1", ' +

static/app/views/insights/queues/components/tables/transactionsTable.spec.tsx

@@ -11,7 +11,7 @@ jest.mock('sentry/utils/useLocation');
 describe('transactionsTable', () => {
   const organization = OrganizationFixture();
 
-  let eventsMock;
+  let eventsMock: jest.Mock;
 
   const pageLinks =
     '<https://sentry.io/fake/previous>; rel="previous"; results="false"; cursor="0:0:1", ' +

static/app/views/insights/queues/views/destinationSummaryPage.spec.tsx

@@ -54,7 +54,9 @@ describe('destinationSummaryPage', () => {
     initiallyLoaded: false,
   });
 
-  let eventsMock, eventsStatsMock, spanFieldTagsMock;
+  let eventsMock: jest.Mock;
+  let eventsStatsMock: jest.Mock;
+  let spanFieldTagsMock: jest.Mock;
 
   beforeEach(() => {
     eventsMock = MockApiClient.addMockResponse({