Chore: upgrade to msw v2

jest.config.js

@@ -34,6 +34,9 @@ module.exports = {
   testTimeout: 30000,
   resolver: `<rootDir>/public/test/jest-resolver.js`,
   setupFilesAfterEnv: ['./public/test/setupTests.ts'],
+  testEnvironmentOptions: {
+    customExportConditions: [''],
+  },
   globals: {
     __webpack_public_path__: '', // empty string
   },

package.json

@@ -183,7 +183,7 @@
     "jest-matcher-utils": "29.7.0",
     "lerna": "7.4.1",
     "mini-css-extract-plugin": "2.8.0",
-    "msw": "1.3.2",
+    "msw": "2.1.7",
     "mutationobserver-shim": "0.3.7",
     "ngtemplate-loader": "2.1.0",
     "node-notifier": "10.0.1",

packages/grafana-prometheus/src/metric_find_query.test.ts

@@ -1,6 +1,5 @@
 import { Observable, of } from 'rxjs';
 
-import 'whatwg-fetch'; // fetch polyfill needed backendSrv
 import { DataSourceInstanceSettings, TimeRange, toUtc } from '@grafana/data';
 import { BackendDataSourceResponse, BackendSrvRequest, FetchResponse, TemplateSrv } from '@grafana/runtime';
 

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

@@ -1,7 +1,6 @@
-import 'whatwg-fetch'; // fetch polyfill
 import { fireEvent, render as rtlRender, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { rest } from 'msw';
+import { HttpResponse, http } from 'msw';
 import { SetupServer, setupServer } from 'msw/node';
 import React from 'react';
 import { TestProvider } from 'test/helpers/TestProvider';
@@ -47,14 +46,11 @@ describe('NestedFolderPicker', () => {
   beforeAll(() => {
     window.HTMLElement.prototype.scrollIntoView = function () {};
     server = setupServer(
-      rest.get('/api/folders/:uid', (_, res, ctx) => {
-        return res(
-          ctx.status(200),
-          ctx.json({
-            title: folderA.item.title,
-            uid: folderA.item.uid,
-          })
-        );
+      http.get('/api/folders/:uid', () => {
+        return HttpResponse.json({
+          title: folderA.item.title,
+          uid: folderA.item.uid,
+        });
       })
     );
     server.listen();

public/app/core/specs/backend_srv.test.ts

@@ -1,4 +1,3 @@
-import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering
 import { Observable, of, lastValueFrom } from 'rxjs';
 import { fromFetch } from 'rxjs/fetch';
 import { delay } from 'rxjs/operators';

public/app/core/utils/fetch.test.ts

@@ -1,4 +1,3 @@
-import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering
 import {
   isContentTypeApplicationJson,
   parseBody,

public/app/features/alerting/unified/CloneRuleEditor.test.tsx

@@ -11,7 +11,6 @@ import { backendSrv } from 'app/core/services/backend_srv';
 import { DashboardSearchItem, DashboardSearchItemType } from 'app/features/search/types';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 import { RuleWithLocation } from 'app/types/unified-alerting';
-import 'whatwg-fetch';
 
 import {
   RulerAlertingRuleDTO,

public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.test.tsx

@@ -3,8 +3,6 @@ import { setupServer } from 'msw/node';
 import React from 'react';
 import { Provider } from 'react-redux';
 
-import 'whatwg-fetch';
-
 import { setBackendSrv } from '@grafana/runtime';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { configureStore } from 'app/store/configureStore';

public/app/features/alerting/unified/components/PluginBridge.mock.ts

@@ -1,20 +1,22 @@
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-
 // bit of setup to mock HTTP request responses
 import 'whatwg-fetch';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+
 import { SupportedPlugin } from '../types/pluginBridges';
 
 export const NON_EXISTING_PLUGIN = '__does_not_exist__';
 
 const server = setupServer(
-  rest.get(`/api/plugins/${NON_EXISTING_PLUGIN}/settings`, async (_req, res, ctx) => res(ctx.status(404))),
-  rest.get(`/api/plugins/${SupportedPlugin.Incident}/settings`, async (_req, res, ctx) => {
-    return res(
-      ctx.json({
-        enabled: true,
-      })
-    );
+  http.get(`/api/plugins/${NON_EXISTING_PLUGIN}/settings`, async () =>
+    HttpResponse.json(undefined, {
+      status: 404,
+    })
+  ),
+  http.get(`/api/plugins/${SupportedPlugin.Incident}/settings`, async () => {
+    return HttpResponse.json({
+      enabled: true,
+    });
   })
 );
 

public/app/features/alerting/unified/components/contact-points/__mocks__/grafanaManagedServer.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { SetupServer } from 'msw/node';
 
 import { AlertmanagerChoice, AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
@@ -14,15 +14,15 @@ import receiversMock from './receivers.mock.json';
 export default (server: SetupServer) => {
   server.use(
     // this endpoint is a grafana built-in alertmanager
-    rest.get('/api/alertmanager/grafana/config/api/v1/alerts', (_req, res, ctx) =>
-      res(ctx.json<AlertManagerCortexConfig>(alertmanagerMock))
+    http.get('/api/alertmanager/grafana/config/api/v1/alerts', () =>
+      HttpResponse.json<AlertManagerCortexConfig>(alertmanagerMock)
     ),
     // this endpoint is only available for the built-in alertmanager
-    rest.get('/api/alertmanager/grafana/config/api/v1/receivers', (_req, res, ctx) =>
-      res(ctx.json<ReceiversStateDTO[]>(receiversMock))
+    http.get('/api/alertmanager/grafana/config/api/v1/receivers', () =>
+      HttpResponse.json<ReceiversStateDTO[]>(receiversMock)
     ),
     // this endpoint will respond if the OnCall plugin is installed
-    rest.get('/api/plugins/grafana-oncall-app/settings', (_req, res, ctx) => res(ctx.status(404)))
+    http.get('/api/plugins/grafana-oncall-app/settings', () => HttpResponse.json(undefined, { status: 404 }))
   );
 
   // this endpoint is for rendering the "additional AMs to configure" warning
@@ -41,12 +41,18 @@ export const setupTestEndpointMock = (server: SetupServer) => {
   const mock = jest.fn();
 
   server.use(
-    rest.post('/api/alertmanager/grafana/config/api/v1/receivers/test', async (req, res, ctx) => {
-      const requestBody = await req.json();
-      mock(requestBody);
+    http.post(
+      '/api/alertmanager/grafana/config/api/v1/receivers/test',
+      async ({ request }) => {
+        const requestBody = await request.json();
+        mock(requestBody);
 
-      return res.once(ctx.status(200));
-    })
+        return HttpResponse.json();
+      },
+      {
+        once: true,
+      }
+    )
   );
 
   return mock;
@@ -56,12 +62,18 @@ export const setupSaveEndpointMock = (server: SetupServer) => {
   const mock = jest.fn();
 
   server.use(
-    rest.post('/api/alertmanager/grafana/config/api/v1/alerts', async (req, res, ctx) => {
-      const requestBody = await req.json();
-      mock(requestBody);
+    http.post(
+      '/api/alertmanager/grafana/config/api/v1/alerts',
+      async ({ request }) => {
+        const requestBody = await request.json();
+        mock(requestBody);
 
-      return res.once(ctx.status(200));
-    })
+        return HttpResponse.json();
+      },
+      {
+        once: true,
+      }
+    )
   );
 
   return mock;

public/app/features/alerting/unified/components/contact-points/__mocks__/mimirFlavoredServer.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { SetupServer } from 'msw/lib/node';
 
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
@@ -10,14 +10,14 @@ export const MIMIR_DATASOURCE_UID = 'mimir';
 
 export default (server: SetupServer) => {
   server.use(
-    rest.get(`/api/alertmanager/${MIMIR_DATASOURCE_UID}/config/api/v1/alerts`, (_req, res, ctx) =>
-      res(ctx.json<AlertManagerCortexConfig>(mimirAlertmanagerMock))
+    http.get(`/api/alertmanager/${MIMIR_DATASOURCE_UID}/config/api/v1/alerts`, () =>
+      HttpResponse.json(mimirAlertmanagerMock)
     ),
-    rest.get(`/api/datasources/proxy/uid/${MIMIR_DATASOURCE_UID}/api/v1/status/buildinfo`, (_req, res, ctx) =>
-      res(ctx.status(404))
+    http.get(`/api/datasources/proxy/uid/${MIMIR_DATASOURCE_UID}/api/v1/status/buildinfo`, () =>
+      HttpResponse.json<AlertManagerCortexConfig>(undefined, { status: 404 })
     ),
     // this endpoint will respond if the OnCall plugin is installed
-    rest.get('/api/plugins/grafana-oncall-app/settings', (_req, res, ctx) => res(ctx.status(404)))
+    http.get('/api/plugins/grafana-oncall-app/settings', () => HttpResponse.json(undefined, { status: 404 }))
   );
 
   return server;

public/app/features/alerting/unified/components/contact-points/__mocks__/vanillaAlertmanagerServer.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { SetupServer } from 'msw/lib/node';
 
 import { AlertmanagerStatus } from 'app/plugins/datasource/alertmanager/types';
@@ -10,11 +10,11 @@ export const VANILLA_ALERTMANAGER_DATASOURCE_UID = 'alertmanager';
 
 export default (server: SetupServer) => {
   server.use(
-    rest.get(`/api/alertmanager/${VANILLA_ALERTMANAGER_DATASOURCE_UID}/api/v2/status`, (_req, res, ctx) =>
-      res(ctx.json<AlertmanagerStatus>(vanillaAlertManagerConfig))
+    http.get(`/api/alertmanager/${VANILLA_ALERTMANAGER_DATASOURCE_UID}/api/v2/status`, () =>
+      HttpResponse.json<AlertmanagerStatus>(vanillaAlertManagerConfig)
     ),
     // this endpoint will respond if the OnCall plugin is installed
-    rest.get('/api/plugins/grafana-oncall-app/settings', (_req, res, ctx) => res(ctx.status(404)))
+    http.get('/api/plugins/grafana-oncall-app/settings', () => HttpResponse.json(undefined, { status: 404 }))
   );
 
   return server;

public/app/features/alerting/unified/components/receivers/PayloadEditor.test.tsx

@@ -6,8 +6,6 @@ import { Props } from 'react-virtualized-auto-sizer';
 
 import { configureStore } from 'app/store/configureStore';
 
-import 'whatwg-fetch';
-
 import { PayloadEditor, RESET_TO_DEFAULT } from './PayloadEditor';
 
 const DEFAULT_PAYLOAD = `[

public/app/features/alerting/unified/components/receivers/TemplatePreview.test.tsx

@@ -8,7 +8,6 @@ import { setBackendSrv } from '@grafana/runtime';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { configureStore } from 'app/store/configureStore';
 
-import 'whatwg-fetch';
 import { TemplatePreviewResponse } from '../../api/templateApi';
 import { mockPreviewTemplateResponse, mockPreviewTemplateResponseRejected } from '../../mocks/templatesApi';
 

public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.test.tsx

@@ -17,8 +17,6 @@ import { RuleFormValues } from '../../types/rule-form';
 import { Annotation } from '../../utils/constants';
 import { getDefaultFormValues } from '../../utils/rule-form';
 
-import 'whatwg-fetch';
-
 import AnnotationsStep from './AnnotationsStep';
 
 // To get anything displayed inside the Autosize component we need to mock it

public/app/features/alerting/unified/components/rule-viewer/v2/__mocks__/server.ts

@@ -1,7 +1,7 @@
-import { rest } from 'msw';
+import 'whatwg-fetch';
+import { http, HttpResponse } from 'msw';
 import { SetupServer, setupServer } from 'msw/node';
 
-import 'whatwg-fetch';
 import { AlertmanagersChoiceResponse } from 'app/features/alerting/unified/api/alertmanagerApi';
 import { mockAlertmanagerChoiceResponse } from 'app/features/alerting/unified/mocks/alertmanagerApi';
 import { AlertmanagerChoice } from 'app/plugins/datasource/alertmanager/types';
@@ -33,16 +33,15 @@ export function createMockGrafanaServer() {
 // a user must alsso have permissions for the folder (namespace) in which the alert rule is stored
 function mockFolderAccess(server: SetupServer, accessControl: Partial<Record<AccessControlAction, boolean>>) {
   server.use(
-    rest.get('/api/folders/:uid', (req, res, ctx) => {
-      const uid = req.params.uid;
-
-      return res(
-        ctx.json({
-          title: 'My Folder',
-          uid,
-          accessControl,
-        })
-      );
+    http.get('/api/folders/:uid', ({ request }) => {
+      const url = new URL(request.url);
+      const uid = url.searchParams.get('uid');
+
+      return HttpResponse.json({
+        title: 'My Folder',
+        uid,
+        accessControl,
+      });
     })
   );
 
@@ -51,8 +50,8 @@ function mockFolderAccess(server: SetupServer, accessControl: Partial<Record<Acc
 
 function mockGrafanaIncidentPluginSettings(server: SetupServer) {
   server.use(
-    rest.get('/api/plugins/grafana-incident-app/settings', (_, res, ctx) => {
-      return res(ctx.status(200));
+    http.get('/api/plugins/grafana-incident-app/settings', () => {
+      return HttpResponse.json();
     })
   );
 }

public/app/features/alerting/unified/components/rules/RulesGroup.test.tsx

@@ -111,6 +111,7 @@ describe('Rules group tests', () => {
     it('Should hide delete and edit group buttons', () => {
       // Act
       mockUseHasRuler(true, true);
+      mockFolderApi(server).folder('cpu-usage', mockFolder({ uid: 'cpu-usage' }));
       renderRulesGroup(namespace, group);
 
       // Assert