Chore: Upgrade Jest to latest (#25591)

* Chore: Upgrade Jest to latest

Signed-off-by: Arve Knudsen <arve.knudsen@gmail.com>

* Chore: reduces strict null errors

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

package.json

@@ -83,7 +83,7 @@
     "@types/file-saver": "2.0.1",
     "@types/hoist-non-react-statics": "3.3.0",
     "@types/is-hotkey": "0.1.1",
-    "@types/jest": "24.0.13",
+    "@types/jest": "26.0.0",
     "@types/jquery": "3.3.32",
     "@types/lodash": "4.14.149",
     "@types/lru-cache": "^5.1.0",
@@ -116,7 +116,7 @@
     "autoprefixer": "9.7.4",
     "axios": "0.19.2",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "24.8.0",
+    "babel-jest": "26.0.1",
     "babel-loader": "8.0.6",
     "babel-plugin-angularjs-annotate": "0.10.0",
     "clean-webpack-plugin": "3.0.0",
@@ -156,9 +156,9 @@
     "html-webpack-harddisk-plugin": "1.0.1",
     "html-webpack-plugin": "3.2.0",
     "husky": "4.2.1",
-    "jest": "24.8.0",
-    "jest-canvas-mock": "2.1.2",
-    "jest-date-mock": "1.0.7",
+    "jest": "26.0.0",
+    "jest-canvas-mock": "2.2.0",
+    "jest-date-mock": "1.0.8",
     "lerna": "^3.20.2",
     "lint-staged": "10.0.7",
     "load-grunt-tasks": "5.1.0",
@@ -185,7 +185,7 @@
     "sinon": "8.1.1",
     "style-loader": "1.1.3",
     "terser-webpack-plugin": "2.3.5",
-    "ts-jest": "24.1.0",
+    "ts-jest": "26.1.0",
     "ts-node": "8.8.1",
     "tslib": "1.10.0",
     "typescript": "3.7.5",

public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { QueryOperationRow } from './QueryOperationRow';
-import { shallow, mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 
 describe('QueryOperationRow', () => {
@@ -17,6 +17,7 @@ describe('QueryOperationRow', () => {
   describe('callbacks', () => {
     it('should not call onOpen when component is shallowed', async () => {
       const onOpenSpy = jest.fn();
+      // @ts-ignore strict null error, you shouldn't use promise like approach with act but I don't know what the intention is here
       await act(async () => {
         shallow(
           <QueryOperationRow onOpen={onOpenSpy}>
@@ -38,10 +39,13 @@ describe('QueryOperationRow', () => {
       const titleEl = wrapper.find({ 'aria-label': 'Query operation row title' });
       expect(titleEl).toHaveLength(1);
 
+      // @ts-ignore strict null error, you shouldn't use promise like approach with act but I don't know what the intention is here
       await act(async () => {
         // open
         titleEl.first().simulate('click');
       });
+
+      // @ts-ignore strict null error, you shouldn't use promise like approach with act but I don't know what the intention is here
       await act(async () => {
         // close
         titleEl.first().simulate('click');

public/app/core/components/Select/MetricSelect.test.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { MetricSelect } from './MetricSelect';
 import { LegacyForms } from '@grafana/ui';
+import { expect } from '../../../../test/lib/common';
+
 const { Select } = LegacyForms;
 
 describe('MetricSelect', () => {
@@ -32,16 +34,15 @@ describe('MetricSelect', () => {
         variables: [],
       };
       const wrapper = shallow(<MetricSelect {...props} />);
-      wrapper
-        .find(Select)
-        .props()
-        .onChange({ value: 'foo' });
-      expect(
-        wrapper
-          .find(Select)
-          .props()
-          .noOptionsMessage()
-      ).toEqual('No options found');
+      const select = wrapper.find(Select);
+
+      select.props().onChange({ value: 'foo' });
+
+      expect(select.props().noOptionsMessage).toBeDefined();
+
+      // @ts-ignore typescript doesn't understand that noOptionsMessage can't be undefined here
+      const noOptionsMessage = select.props().noOptionsMessage();
+      expect(noOptionsMessage).toEqual('No options found');
       expect(spyOnChange).toHaveBeenCalledWith('foo');
     });
   });

public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.test.tsx

@@ -14,7 +14,7 @@ describe('searchForTags', () => {
       title: 'some title',
       tooltip: 'some tooltip',
       type: 'dashboards',
-      url: undefined,
+      url: '/d/6ieouugGk/DashLinks',
     };
     const backendSrv: any = {
       search: jest.fn(args => []),
@@ -46,7 +46,7 @@ describe('resolveLinks', () => {
       title: 'some title',
       tooltip: 'some tooltip',
       type: 'dashboards',
-      url: undefined,
+      url: '/d/6ieouugGk/DashLinks',
     };
     const searchHits: DashboardSearchHit[] = [
       {

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -153,6 +153,8 @@ describe('DashboardPage', () => {
     });
 
     it('Should update model state normal state', () => {
+      expect(ctx.dashboard).toBeDefined();
+      // @ts-ignore typescript doesn't understand that dashboard must be defined to reach the row below
       expect(ctx.dashboard.panelInEdit).toBeUndefined();
     });
 

public/app/features/dashboard/panel_editor/QueryEditorRow.test.ts

@@ -53,7 +53,11 @@ describe('filterPanelDataToQuery', () => {
     } as unknown) as PanelData;
 
     const panelData = filterPanelDataToQuery(withError, 'B');
+    expect(panelData).toBeDefined();
+
+    // @ts-ignore typescript doesn't understand that panelData can't be undefined here
     expect(panelData.state).toBe(LoadingState.Error);
+    // @ts-ignore typescript doesn't understand that panelData can't be undefined here
     expect(panelData.error).toBe(withError.error);
   });
 });

public/app/features/dashboard/state/PanelQueryRunner.test.ts

@@ -1,7 +1,14 @@
 import { PanelQueryRunner } from './PanelQueryRunner';
 // Importing this way to be able to spy on grafana/data
 import * as grafanaData from '@grafana/data';
-import { DataConfigSource, DataQueryRequest, GrafanaTheme, PanelData, ScopedVars } from '@grafana/data';
+import {
+  DataConfigSource,
+  DataQueryRequest,
+  DataTransformerConfig,
+  GrafanaTheme,
+  PanelData,
+  ScopedVars,
+} from '@grafana/data';
 import { DashboardModel } from './index';
 import { setEchoSrv } from '@grafana/runtime';
 import { Echo } from '../../../core/services/echo/Echo';
@@ -244,7 +251,7 @@ describe('PanelQueryRunner', () => {
     {
       getFieldOverrideOptions: () => undefined,
       // @ts-ignore
-      getTransformations: () => [{}],
+      getTransformations: () => [({} as unknown) as DataTransformerConfig],
     }
   );
 
@@ -288,7 +295,7 @@ describe('PanelQueryRunner', () => {
         theme: {} as GrafanaTheme,
       }),
       // @ts-ignore
-      getTransformations: () => [{}],
+      getTransformations: () => [({} as unknown) as DataTransformerConfig],
     }
   );
 });

public/app/features/explore/TraceView/TraceView.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { TraceView } from './TraceView';
 import { TracePageHeader, TraceTimelineViewer } from '@jaegertracing/jaeger-ui-components';
-import { TraceData, SpanData } from '@grafana/data';
+import { SpanData, TraceData } from '@grafana/data';
 
 function renderTraceView() {
   const wrapper = shallow(<TraceView trace={response} />);
@@ -98,7 +98,7 @@ describe('TraceView', () => {
     header.props().onSearchValueChange('HTTP POST - api_prom_push');
 
     const timeline = wrapper.find(TraceTimelineViewer);
-    expect(timeline.props().findMatchesIDs.has('1ed38015486087ca')).toBeTruthy();
+    expect(timeline.props().findMatchesIDs?.has('1ed38015486087ca')).toBeTruthy();
   });
 
   it('change viewRange', () => {

public/app/features/explore/TraceView/useDetailState.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react-hooks';
 import { Log } from '@grafana/data';
 import { useDetailState } from './useDetailState';
 
@@ -19,38 +19,38 @@ describe('useDetailState', () => {
     const { result } = renderHook(() => useDetailState());
     act(() => result.current.toggleDetail('span1'));
     act(() => result.current.detailLogsToggle('span1'));
-    expect(result.current.detailStates.get('span1').logs.isOpen).toBe(true);
+    expect(result.current.detailStates.get('span1')?.logs.isOpen).toBe(true);
 
     const log = { timestamp: 1 } as Log;
     act(() => result.current.detailLogItemToggle('span1', log));
-    expect(result.current.detailStates.get('span1').logs.openedItems.has(log)).toBe(true);
+    expect(result.current.detailStates.get('span1')?.logs.openedItems.has(log)).toBe(true);
   });
 
   it('toggles warnings', async () => {
     const { result } = renderHook(() => useDetailState());
     act(() => result.current.toggleDetail('span1'));
     act(() => result.current.detailWarningsToggle('span1'));
-    expect(result.current.detailStates.get('span1').isWarningsOpen).toBe(true);
+    expect(result.current.detailStates.get('span1')?.isWarningsOpen).toBe(true);
   });
 
   it('toggles references', async () => {
     const { result } = renderHook(() => useDetailState());
     act(() => result.current.toggleDetail('span1'));
     act(() => result.current.detailReferencesToggle('span1'));
-    expect(result.current.detailStates.get('span1').isReferencesOpen).toBe(true);
+    expect(result.current.detailStates.get('span1')?.isReferencesOpen).toBe(true);
   });
 
   it('toggles processes', async () => {
     const { result } = renderHook(() => useDetailState());
     act(() => result.current.toggleDetail('span1'));
     act(() => result.current.detailProcessToggle('span1'));
-    expect(result.current.detailStates.get('span1').isProcessOpen).toBe(true);
+    expect(result.current.detailStates.get('span1')?.isProcessOpen).toBe(true);
   });
 
   it('toggles tags', async () => {
     const { result } = renderHook(() => useDetailState());
     act(() => result.current.toggleDetail('span1'));
     act(() => result.current.detailTagsToggle('span1'));
-    expect(result.current.detailStates.get('span1').isTagsOpen).toBe(true);
+    expect(result.current.detailStates.get('span1')?.isTagsOpen).toBe(true);
   });
 });

public/app/features/explore/TraceView/useSearch.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react-hooks';
 import { useSearch } from './useSearch';
 import { Span } from '@grafana/data';
 
@@ -6,7 +6,7 @@ describe('useSearch', () => {
   it('returns matching span IDs', async () => {
     const { result } = renderHook(() =>
       useSearch([
-        {
+        ({
           spanID: 'span1',
           operationName: 'operation1',
           process: {
@@ -15,9 +15,9 @@ describe('useSearch', () => {
           },
           tags: [],
           logs: [],
-        } as Span,
+        } as unknown) as Span,
 
-        {
+        ({
           spanID: 'span2',
           operationName: 'operation2',
           process: {
@@ -26,13 +26,13 @@ describe('useSearch', () => {
           },
           tags: [],
           logs: [],
-        } as Span,
+        } as unknown) as Span,
       ])
     );
 
     act(() => result.current.setSearch('service1'));
-    expect(result.current.spanFindMatches.size).toBe(1);
-    expect(result.current.spanFindMatches.has('span1')).toBe(true);
+    expect(result.current.spanFindMatches?.size).toBe(1);
+    expect(result.current.spanFindMatches?.has('span1')).toBe(true);
   });
 
   it('works without spans', async () => {