Update msw to v2 (#646)

jest.config.client.js

@@ -26,5 +26,8 @@ module.exports = {
     '<rootDir>/packages/site-components',
     '<rootDir>/packages/sitemap-component',
     '<rootDir>/packages/store'
-  ]
+  ],
+  testEnvironmentOptions: {
+    customExportConditions: ['']
+  }
 };

packages/fromHttpRequest/package.json

@@ -40,6 +40,6 @@
   },
   "devDependencies": {
     "@types/node-fetch": "^2.6.2",
-    "msw": "^0.47.4"
+    "msw": "^2.0.0"
   }
 }

packages/fromHttpRequest/src/__tests__/fromHttpRequest.test.ts

@@ -1,5 +1,5 @@
 import { setupServer } from 'msw/node';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 
 import { fromHttpRequest, isErrorResponse } from '../fromHttpRequest.js';
 
@@ -12,24 +12,24 @@ interface Data {
   sid: string;
 }
 
-const successfulRequestHandler = rest.get(testUrl, (_req, res, ctx) => {
-  return res(ctx.status(200), ctx.json({ name: 'David', sid: 'some id' }));
+const successfulRequestHandler = http.get(testUrl, () => {
+  return HttpResponse.json({ name: 'David', sid: 'some id' });
 });
 
-const notOKHandler = rest.get(testUrl, (_req, res, ctx) => {
-  return res(ctx.status(404));
+const notOKHandler = http.get(testUrl, () => {
+  return new HttpResponse(null, { status: 404 });
 });
 
-const errorHandler = rest.get(testUrl, (_req, _res, _ctx) => {
+const errorHandler = http.get(testUrl, () => {
   throw new Error('Bad stuff happened');
 });
 
-const successfulTextContentTypeRequestHandler = rest.get(testUrl, (_req, res, ctx) => {
-  return res(ctx.status(200), ctx.text('David'));
+const successfulTextContentTypeRequestHandler = http.get(testUrl, () => {
+  return HttpResponse.text('David');
 });
 
-const successfulDefaultContentTypeRequestHandler = rest.get(testUrl, (_req, res, ctx) => {
-  return res(ctx.status(200), ctx.body(JSON.stringify({ name: 'David', sid: 'some id' })));
+const successfulDefaultContentTypeRequestHandler = http.get(testUrl, () => {
+  return HttpResponse.json({ name: 'David', sid: 'some id' });
 });
 
 const server = setupServer();

packages/sitemap-component/package.json

@@ -39,7 +39,7 @@
     "@types/styled-components": "^5.1.26",
     "@vanilla-extract/esbuild-plugin": "^2.0.2",
     "del-cli": "^4.0.1",
-    "msw": "^0.47.4",
+    "msw": "^2.0.0",
     "typescript": "^4.8.3"
   },
   "dependencies": {

packages/sitemap-component/src/__tests__/Sitemap.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { Sitemap } from '../index';
 import { setupServer } from 'msw/node';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 
 fetch.disableMocks();
 
@@ -25,8 +25,8 @@ const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  </urlset>   
 `;
 
-const xmlHandler = rest.get('https://mysite.com/sitemap.xml', (_req, res, ctx) => {
-  return res(ctx.status(200), ctx.text(sitemap));
+const xmlHandler = http.get('https://mysite.com/sitemap.xml', () => {
+  return HttpResponse.text(sitemap);
 });
 
 describe('GIVEN a Sitemap view', () => {

packages/source-figma/package.json

@@ -39,6 +39,6 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "msw": "^0.47.4"
+    "msw": "^2.0.0"
   }
 }

packages/source-figma/src/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import { Observable, take } from 'rxjs';
 import { setupServer } from 'msw/node';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { FigmaPage } from '../types/index.js';
 
 import Source from '../index.js';
@@ -89,57 +89,51 @@ const createExpectedResult = (patternId: string, data: Record<string, any>) => (
 
 const successHandlers = [
   // Projects
-  rest.get('https://myfigma.com/getproject/:project_id/*', (req, res, ctx) => {
-    const { project_id } = req.params;
+  http.get('https://myfigma.com/getproject/:project_id/*', info => {
+    const { project_id } = info.params;
     const fileId = project_id === '888' ? ['file888'] : ['file999'];
-    return res(ctx.status(200), ctx.json(createProjectsResponse(fileId)));
+    return HttpResponse.json(createProjectsResponse(fileId));
   }),
   // Files
-  rest.get('https://myfigma.com/getfile/:file_id', (req, res, ctx) => {
-    const { file_id } = req.params;
+  http.get('https://myfigma.com/getfile/:file_id', info => {
+    const { file_id } = info.params;
     const pattern =
       file_id === 'file888' ? 'jpmSaltPattern_888_pattern1' : 'jpmSaltPattern_999_pattern2';
-    return res(ctx.status(200), ctx.json(createProjectFilesResponse(pattern, '2:0')));
+    return HttpResponse.json(createProjectFilesResponse(pattern, '2:0'));
   }),
   // Thumbnails
-  rest.get('https://myfigma.com/generatethumb/:project_id', (req, res, ctx) => {
-    const { project_id } = req.params;
-    const url = new URL(req.url);
+  http.get('https://myfigma.com/generatethumb/:project_id', info => {
+    const { project_id } = info.params;
+    const url = new URL(info.request.url);
     const nodeId = url.searchParams.get('ids') as string;
-    return res(
-      ctx.status(200),
-      ctx.json({
-        images: { [nodeId]: `/thumbnail/${project_id}/${nodeId}` }
-      })
-    );
+    return HttpResponse.json({
+      images: { [nodeId]: `/thumbnail/${project_id}/${nodeId}` }
+    });
   })
 ];
 
 const multiHandlers = [
   // Projects
-  rest.get('https://myfigma.com/getproject/:project_id/*', (req, res, ctx) => {
-    const { project_id } = req.params;
+  http.get('https://myfigma.com/getproject/:project_id/*', info => {
+    const { project_id } = info.params;
     const fileIds = project_id === '888' ? ['file111', 'file222'] : [];
-    return res(ctx.status(200), ctx.json(createProjectsResponse(fileIds)));
+    return HttpResponse.json(createProjectsResponse(fileIds));
   }),
   // Files
-  rest.get('https://myfigma.com/getfile/:file_id', (req, res, ctx) => {
-    const { file_id } = req.params;
+  http.get('https://myfigma.com/getfile/:file_id', info => {
+    const { file_id } = info.params;
     const title = file_id.toString().replace('file', '');
     const pattern = `jpmSaltPattern_${title}_pattern1`;
-    return res(ctx.status(200), ctx.json(createProjectFilesResponse(pattern, '2:0')));
+    return HttpResponse.json(createProjectFilesResponse(pattern, '2:0'));
   }),
   // Thumbnails
-  rest.get('https://myfigma.com/generatethumb/:project_id', (req, res, ctx) => {
-    const { project_id } = req.params;
-    const url = new URL(req.url);
+  http.get('https://myfigma.com/generatethumb/:project_id', info => {
+    const { project_id } = info.params;
+    const url = new URL(info.request.url);
     const nodeId = url.searchParams.get('ids') as string;
-    return res(
-      ctx.status(200),
-      ctx.json({
-        images: { [nodeId]: `/thumbnail/${project_id}/${nodeId}` }
-      })
-    );
+    return HttpResponse.json({
+      images: { [nodeId]: `/thumbnail/${project_id}/${nodeId}` }
+    });
   })
 ];
 

packages/source-http/package.json

@@ -40,6 +40,6 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "msw": "^0.47.4"
+    "msw": "^2.0.0"
   }
 }

packages/source-http/src/__tests__/index.test.ts

@@ -1,11 +1,10 @@
 import { Observable, of, take } from 'rxjs';
 import { setupServer } from 'msw/node';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 
 import type { Page } from '@jpmorganchase/mosaic-types';
 
 import Source, { createHttpSource } from '../index.js';
-import { fromDynamicImport } from '../fromDynamicImport.js';
 import { createProxyAgent } from '../proxyAgent.js';
 
 jest.mock('../fromDynamicImport', () => ({
@@ -56,14 +55,14 @@ const configuredRequestsOptions = {
 };
 
 export const successHandlers = [
-  rest.get(options.endpoints[0], (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.json({ name: 'Alice' }));
+  http.get(options.endpoints[0], () => {
+    return HttpResponse.json({ name: 'Alice' });
   }),
-  rest.get(options.endpoints[1], (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.json({ name: 'Bob' }));
+  http.get(options.endpoints[1], () => {
+    return HttpResponse.json({ name: 'Bob' });
   }),
-  rest.get(options.endpoints[2], (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.json({ name: 'Eve' }));
+  http.get(options.endpoints[2], () => {
+    return HttpResponse.json({ name: 'Eve' });
   })
 ];
 
@@ -113,14 +112,14 @@ describe('GIVEN an HTTP Source ', () => {
     const server = setupServer();
     beforeAll(() => {
       server.use(
-        rest.get(options.endpoints[0], (_req, res, ctx) => {
-          return res(ctx.status(200), ctx.json({ name: 'Alice' }));
+        http.get(options.endpoints[0], () => {
+          return HttpResponse.json({ name: 'Alice' });
         }),
-        rest.get(options.endpoints[1], (_req, res, ctx) => {
-          return res(ctx.status(404));
+        http.get(options.endpoints[1], () => {
+          return new HttpResponse(null, { status: 404 });
         }),
-        rest.get(options.endpoints[2], (_req, res, ctx) => {
-          return res(ctx.status(500));
+        http.get(options.endpoints[2], () => {
+          return new HttpResponse(null, { status: 500 });
         })
       );
       server.listen({ onUnhandledRequest: 'warn' });
@@ -219,14 +218,14 @@ describe('GIVEN the createHttpSource function ', () => {
     const server = setupServer();
     beforeAll(() => {
       server.use(
-        rest.get(options.endpoints[0], (_req, res, ctx) => {
-          return res(ctx.status(200), ctx.json({ name: 'Alice' }));
+        http.get(options.endpoints[0], () => {
+          return HttpResponse.json({ name: 'Alice' });
         }),
-        rest.get(options.endpoints[1], (_req, res, ctx) => {
-          return res(ctx.status(404));
+        http.get(options.endpoints[1], () => {
+          return new HttpResponse(null, { status: 404 });
         }),
-        rest.get(options.endpoints[2], (_req, res, ctx) => {
-          return res(ctx.status(500));
+        http.get(options.endpoints[2], () => {
+          return new HttpResponse(null, { status: 500 });
         })
       );
       server.listen({ onUnhandledRequest: 'warn' });
@@ -285,8 +284,8 @@ describe('GIVEN the createHttpSource function ', () => {
     const server = setupServer();
     beforeAll(() => {
       server.use(
-        rest.get('*', (req, res, ctx) => {
-          return res(ctx.status(200), ctx.json({ name: `David ${req.url}` }));
+        http.get('*', info => {
+          return HttpResponse.json({ name: `David ${info.request.url}` });
         })
       );
       server.listen({ onUnhandledRequest: 'warn' });

packages/source-readme/package.json

@@ -37,6 +37,6 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "msw": "^0.47.4"
+    "msw": "^2.0.0"
   }
 }

packages/source-readme/src/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import { Observable, take } from 'rxjs';
 import { setupServer } from 'msw/node';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { ReadmePage } from '../types/index.js';
 
 import Source from '../index.js';
@@ -66,11 +66,11 @@ const createExpectedResult = (index: number) => ({
 });
 
 const successHandlers = [
-  rest.get('https://some/url/for/readme1.md', (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.text(createResponse(1)));
+  http.get('https://some/url/for/readme1.md', () => {
+    return HttpResponse.text(createResponse(1));
   }),
-  rest.get('https://some/url/for/readme2.md', (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.text(createResponse(2)));
+  http.get('https://some/url/for/readme2.md', () => {
+    return HttpResponse.text(createResponse(2));
   })
 ];
 

packages/source-storybook/package.json

@@ -40,6 +40,6 @@
     "zod": "^3.22.3"
   },
   "devDependencies": {
-    "msw": "^0.47.4"
+    "msw": "^2.0.0"
   }
 }

packages/source-storybook/src/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import { Observable, take } from 'rxjs';
 import { setupServer } from 'msw/node';
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { StorybookPage } from '../types/index.js';
 
 import Source, { StorybookSourceOptions } from '../index.js';
@@ -108,20 +108,20 @@ const createExpectedResult = (index: number) => ({
 });
 
 const successHandlers = [
-  rest.get(options.stories[0].storiesUrl, (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(createStoriesResponse(1)));
+  http.get(options.stories[0].storiesUrl!, () => {
+    return HttpResponse.json(createStoriesResponse(1));
   }),
-  rest.get(options.stories[1].storiesUrl, (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(createIndexResponse(2)));
+  http.get(options.stories[1].storiesUrl!, () => {
+    return HttpResponse.json(createIndexResponse(2));
   }),
-  rest.get(options.stories[2].storiesUrl, (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(createStoriesResponse(3)));
+  http.get(options.stories[2].storiesUrl!, () => {
+    return HttpResponse.json(createStoriesResponse(3));
   }),
-  rest.get(options.stories[3].storiesUrl, (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(createIndexResponse(4)));
+  http.get(options.stories[3].storiesUrl!, () => {
+    return HttpResponse.json(createIndexResponse(4));
   }),
-  rest.get(options.stories[4].storiesUrl, (_req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(createStoriesResponse(5)));
+  http.get(options.stories[4].storiesUrl!, () => {
+    return HttpResponse.json(createIndexResponse(5));
   })
 ];
 

scripts/jest/client/jest.setup.js

@@ -25,3 +25,5 @@ global.cancelIdleCallback = function cancelIdleCallback(callbackID) {
 };
 
 require('jest-fetch-mock').enableMocks();
+
+global.TextEncoder = require('util').TextEncoder;