feat(SetupServerApi): allow using custom interceptors (#2464)

Co-authored-by: Artem Zakharchenko <[email protected]>

Author: tastypackets

CONTRIBUTING.md

@@ -193,6 +193,8 @@ test('returns a mocked response', async ({ loadExample, fetch }) => {
 
 ##### Running all browser tests
 
+Make sure Playwright chromium has been installed before running browser tests.
+
 ```sh
 pnpm test:browser
 ```

src/native/index.ts

@@ -15,7 +15,7 @@ export function setupServer(
   // Provision request interception via patching the `XMLHttpRequest` class only
   // in React Native. There is no `http`/`https` modules in that environment.
   return new SetupServerCommonApi(
-    [FetchInterceptor, XMLHttpRequestInterceptor],
+    [new FetchInterceptor(), new XMLHttpRequestInterceptor()],
     handlers,
   )
 }

src/node/SetupServerApi.ts

@@ -1,4 +1,5 @@
 import { AsyncLocalStorage } from 'node:async_hooks'
+import type { HttpRequestEventMap, Interceptor } from '@mswjs/interceptors'
 import { ClientRequestInterceptor } from '@mswjs/interceptors/ClientRequest'
 import { XMLHttpRequestInterceptor } from '@mswjs/interceptors/XMLHttpRequest'
 import { FetchInterceptor } from '@mswjs/interceptors/fetch'
@@ -47,16 +48,19 @@ class AsyncHandlersController implements HandlersController {
     return handlers.concat(initialHandlers)
   }
 }
-
 export class SetupServerApi
   extends SetupServerCommonApi
   implements SetupServer
 {
-  constructor(handlers: Array<RequestHandler | WebSocketHandler>) {
-    super(
-      [ClientRequestInterceptor, XMLHttpRequestInterceptor, FetchInterceptor],
-      handlers,
-    )
+  constructor(
+    handlers: Array<RequestHandler | WebSocketHandler>,
+    interceptors: Array<Interceptor<HttpRequestEventMap>> = [
+      new ClientRequestInterceptor(),
+      new XMLHttpRequestInterceptor(),
+      new FetchInterceptor(),
+    ],
+  ) {
+    super(interceptors, handlers)
 
     this.handlersController = new AsyncHandlersController(handlers)
   }

src/node/SetupServerCommonApi.ts

@@ -37,14 +37,14 @@ export class SetupServerCommonApi
   private resolvedOptions: RequiredDeep<SharedOptions>
 
   constructor(
-    interceptors: Array<{ new (): Interceptor<HttpRequestEventMap> }>,
+    interceptors: Array<Interceptor<HttpRequestEventMap>>,
     handlers: Array<RequestHandler | WebSocketHandler>,
   ) {
     super(...handlers)
 
     this.interceptor = new BatchInterceptor({
       name: 'setup-server',
-      interceptors: interceptors.map((Interceptor) => new Interceptor()),
+      interceptors,
     })
 
     this.resolvedOptions = {} as RequiredDeep<SharedOptions>

test/node/msw-api/setup-server/scenarios/custom-interceptors.node.test.ts

@@ -0,0 +1,41 @@
+// @vitest-environment node
+import nodeHttp from 'node:http'
+import { HttpResponse, http } from 'msw'
+import { SetupServerApi } from 'msw/node'
+import { FetchInterceptor } from '@mswjs/interceptors/fetch'
+import { waitForClientRequest } from '../../../../support/utils'
+
+const server = new SetupServerApi(
+  [
+    http.get('http://localhost', () => {
+      return HttpResponse.text('hello world')
+    }),
+  ],
+  [new FetchInterceptor()],
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+test('uses only the provided interceptors', async () => {
+  {
+    const response = await fetch('http://localhost')
+
+    // Must receive a mocked response per the defined interceptor + handler.
+    expect(response.status).toBe(200)
+    await expect(response.text()).resolves.toBe('hello world')
+  }
+
+  {
+    const request = nodeHttp.get('http://localhost')
+    const requestPromise = waitForClientRequest(request)
+
+    // Must receive a connection error since no intereceptor handles this client.
+    await expect(requestPromise).rejects.toThrow('ECONNREFUSED')
+  }
+})

test/support/utils.ts

@@ -24,7 +24,15 @@ export async function waitForClientRequest(request: ClientRequest): Promise<{
   responseText: string
 }> {
   return new Promise((resolve, reject) => {
-    request.once('error', reject)
+    request.once('error', (error) => {
+      /**
+       * @note Since Node.js v20, Node.js may throw an AggregateError
+       * that doesn't have the `message` property and thus won't be handled
+       * here correctly. Instead, use the error's `code` as the rejection reason.
+       * The code stays consistent across Node.js versions.
+       */
+      reject('code' in error ? error.code : error)
+    })
     request.once('abort', () => reject(new Error('Request was aborted')))
 
     request.on('response', (response) => {