upgrade msw to v2

apps/synapse-oauth-signin/package.json

@@ -62,7 +62,7 @@
     "markdown-it-synapse-math": "^3.0.5",
     "markdown-it-synapse-table": "^1.0.6",
     "memfs": "^3.5.3",
-    "msw": "^1.2.2",
+    "msw": "^2.2.2",
     "object-assign": "^4.1.1",
     "path-browserify": "^1.0.1",
     "pluralize": "^8.0.0",

apps/synapse-oauth-signin/src/mocks/handlers.ts

@@ -1,24 +1,24 @@
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw'
 import mockOauthClient from './MockOAuthClient'
 
 export const handlers = [
-  rest.get(
+  http.get(
     'https://repo-prod.prod.sagebase.org/repo/v1/userProfile',
-    (req, res, ctx) => {
+    ({ request, params }) => {
       return res(ctx.status(200), ctx.json({}))
     },
   ),
 
-  rest.get(
+  http.get(
     'https://repo-prod.prod.sagebase.org/auth/v1/oauth2/client/:id',
-    (req, res, ctx) => {
-      return res(ctx.status(200), ctx.json(mockOauthClient))
+    ({ request, params }) => {
+      return HttpResponse.json(mockOauthClient, { status: 200 })
     },
   ),
 
-  rest.post(
+  http.post(
     'https://repo-prod.prod.sagebase.org/auth/v1/oauth2/description',
-    (req, res, ctx) => {
+    ({ request, params }) => {
       return res(
         ctx.status(200),
         ctx.json({
@@ -32,9 +32,9 @@ export const handlers = [
     },
   ),
 
-  rest.post(
+  http.post(
     'https://repo-prod.prod.sagebase.org/auth/v1/login2',
-    (req, res, ctx) => {
+    ({ request, params }) => {
       return res(
         ctx.status(200),
         ctx.json({
@@ -45,9 +45,9 @@ export const handlers = [
     },
   ),
 
-  rest.post(
+  http.post(
     'https://repo-prod.prod.sagebase.org/auth/v1/oauth2/consentcheck',
-    (req, res, ctx) => {
+    ({ request, params }) => {
       return res(
         ctx.status(200),
         ctx.json({
@@ -57,9 +57,9 @@ export const handlers = [
     },
   ),
 
-  rest.post(
+  http.post(
     'https://repo-prod.prod.sagebase.org/auth/v1/oauth2/consent',
-    (req, res, ctx) => {
+    ({ request, params }) => {
       return res(
         ctx.status(200),
         ctx.json({

apps/synapse-oauth-signin/src/test/App.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import { server } from '../mocks/server'
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw'
 import React from 'react'
 import { SynapseClient, SynapseConstants } from 'synapse-react-client'
 import App from '../App'
@@ -75,9 +75,9 @@ describe('App integration tests', () => {
     document.cookie = `${ACCESS_TOKEN_COOKIE_KEY}=expired`
     // Backend should return with an invalid_token response
     server.use(
-      rest.get(
+      http.get(
         'https://repo-prod.prod.sagebase.org/repo/v1/userProfile',
-        (req, res, ctx) => {
+        ({ request, params }) => {
           return res(
             ctx.status(401),
             ctx.json({
@@ -204,9 +204,9 @@ describe('App integration tests', () => {
     // Consent has already been granted:
     const hasGrantedConsent = true
     server.use(
-      rest.post(
+      http.post(
         'https://repo-prod.prod.sagebase.org/auth/v1/oauth2/consentcheck',
-        (req, res, ctx) => {
+        ({ request, params }) => {
           return res(
             ctx.status(200),
             ctx.json({
@@ -252,10 +252,10 @@ describe('App integration tests', () => {
     const authenticationReciept = 'imv890vm0ewvmim3'
 
     server.use(
-      rest.post(
+      http.post(
         'https://repo-prod.prod.sagebase.org/auth/v1/oauth2/session2',
-        async (req, res, ctx) => {
-          const requestBody = await req.json()
+        async ({ request, params }) => {
+          const requestBody = await request.json()
           onOAuthSignIn(requestBody)
 
           return res(
@@ -271,17 +271,17 @@ describe('App integration tests', () => {
           )
         },
       ),
-      rest.post(
+      http.post(
         'https://repo-prod.prod.sagebase.org/auth/v1/2fa/token',
-        async (req, res, ctx) => {
-          const requestBody = await req.json()
+        async ({ request, params }) => {
+          const requestBody = await request.json()
           on2FASignIn(requestBody)
           const responseBody: LoginResponse = {
             accessToken: accessToken,
             authenticationReceipt: authenticationReciept,
             acceptsTermsOfUse: true,
           }
-          return res(ctx.status(201), ctx.json(responseBody))
+          return HttpResponse.json(responseBody, { status: 201 })
         },
       ),
     )

packages/synapse-react-client/jest.config.cjs

@@ -16,6 +16,7 @@ const shared = {
   transformIgnorePatterns: [
     `node_modules/(?!(?:.pnpm/)?(${esModules.join('|')}))`,
   ],
+  setupFiles: ['./jest.polyfills.js'],
   setupFilesAfterEnv: ['<rootDir>/test/setupTests.ts'],
   resetMocks: false,
 }
@@ -51,4 +52,5 @@ module.exports = {
     ],
   ],
   coverageReporters: ['text-summary', 'html'],
+  resolver: './jest.resolver.js'
 }

packages/synapse-react-client/jest.polyfills.js

@@ -0,0 +1,29 @@
+/**
+ * @note The block below contains polyfills for Node.js globals
+ * required for Jest to function when running JSDOM tests.
+ * These HAVE to be require's and HAVE to be in this exact
+ * order, since "undici" depends on the "TextEncoder" global API.
+ *
+ * Consider migrating to a more modern test runner if
+ * you don't want to deal with this.
+ */
+const { TextDecoder, TextEncoder, ReadableStream } = require('node:util')
+
+Object.defineProperties(globalThis, {
+  TextDecoder: { value: TextDecoder },
+  TextEncoder: { value: TextEncoder },
+  ReadableStream: { value: ReadableStream },
+})
+
+const { Blob, File } = require('node:buffer')
+const { fetch, Headers, FormData, Request, Response } = require('undici')
+
+Object.defineProperties(globalThis, {
+  fetch: { value: fetch, writable: true },
+  Blob: { value: Blob },
+  File: { value: File },
+  Headers: { value: Headers },
+  FormData: { value: FormData },
+  Request: { value: Request },
+  Response: { value: Response },
+})

packages/synapse-react-client/jest.resolver.js

@@ -0,0 +1,16 @@
+module.exports = (path, options) => {
+  // Jest + jsdom acts like a browser (i.e., it looks for "browser" imports
+  // under pkg.exports), but msw knows that you're operating in a Node
+  // environment:
+  //
+  // https://github.com/mswjs/msw/issues/1786#issuecomment-1782559851
+  //
+  // The MSW project's recommended workaround is to disable Jest's
+  // customExportConditions completely, so no packages use their browser's
+  // versions.  We'll instead clear export conditions only for MSW.
+  if (/^(msw|@mswjs\/interceptors)(\/|$)/.test(path)) {
+    return options.defaultResolver(path, { ...options, conditions: [] })
+  }
+
+  return options.defaultResolver(path, options)
+}

packages/synapse-react-client/package.json

@@ -217,7 +217,7 @@
     "jotai-devtools": "^0.6.2",
     "jsdom": "^21.1.2",
     "memfs": "^3.5.3",
-    "msw": "^1.2.2",
+    "msw": "^2.2.2",
     "msw-storybook-addon": "^1.10.0",
     "path-browserify": "^1.0.1",
     "postcss-normalize": "^10.0.1",
@@ -235,6 +235,7 @@
     "tsup": "^6.7.0",
     "type-fest": "^3.13.0",
     "typescript": "5.1.6",
+    "undici": "^6.6.2",
     "util": "^0.12.5",
     "vite": "^4.5.2",
     "vite-plugin-svgr": "^3.2.0",

packages/synapse-react-client/src/components/AccessRequirement/AddConditionsForUseButton/AddConditionsForUseButton.integration.test.tsx

@@ -28,14 +28,14 @@ const mockCallback = jest.fn()
 // Adding this mock service worker handler will make the component recognize the caller as an ACT member
 function setIsCurrentUserMemberOfACT(isActMember: boolean) {
   server.use(
-    rest.get(
+    http.get(
       `${getEndpoint(BackendDestinationEnum.REPO_ENDPOINT)}${USER_BUNDLE}`,
-      async (req, res, ctx) => {
+      async ({ request, params }) => {
         const result: UserBundle = {
           ...mockUserBundle,
           isACTMember: isActMember,
         }
-        return res(ctx.status(200), ctx.json(result))
+        return HttpResponse.json(result, { status: 200 })
       },
     ),
   )

packages/synapse-react-client/src/components/AccessRequirement/ImposeRestrictionDialog/ImposeRestrictionDialog.integration.test.tsx

@@ -28,13 +28,13 @@ function renderComponent() {
 
 const onApplyLock = jest.fn()
 server.use(
-  rest.post(
+  http.post(
     `${getEndpoint(
       BackendDestinationEnum.REPO_ENDPOINT,
     )}/repo/v1/entity/:id/lockAccessRequirement`,
-    async (req, res, ctx) => {
+    async ({ request, params }) => {
       onApplyLock()
-      return res(ctx.status(201), ctx.json(mockLockAccessRequirement))
+      return HttpResponse.json(mockLockAccessRequirement, { status: 201 })
     },
   ),
 )