this.interceptor.on('request', async (request) => {
      // モック用のリクエストを生成
      const mockedRequest = new MockedRequest(request.url, {...})

      // msw で登録した handler でレスポンスを生成
      const response = await handleRequest(...)

      // 生成したレスポンスのモックデータを返す
      if (response) {
        ...
        request.respondWith(response)
      }

      return
})

msw の listern を開始したら上記 'request' イベントのコールバックハンドラを登録します。

Node.js の内部で request.end が発火されたタイミングで emitter を発火させて上記が処理されます。

  // 'request' イベントを発火することで intercepter のコールバックが動く
  this.emitter.emit('request', interactiveRequest, requestId)

https://github.com/mswjs/interceptors/blob/main/src/interceptors/ClientRequest/NodeClientRequest.ts#L154

Node.js は http.get を呼び出すと必ず自動的に req.end を呼び出すと Node.js のドキュメントに書かれているので、

HTTP | Node.js v19.3.0 Documentation

request.end を hook しておくことで Node.js の request 処理をモックできるようにしているようです。

これで、Nose.js で Service Worker を使わずとも msw を利用できるようになっています。

ブラウザでの msw

msw はブラウザ側で利用する場合 Service Worker が使われます。

しかし実は Service Worker が利用できないケースでもちゃんと動作してくれます。 Service Worker が利用できないケースというと具体的には、 https 化されていないサーバーで Web ページが提供される場合などです。

Service Worker は https でないと動作させることができません*1。

例えば、 Storybook で msw を利用していて、その Storybook をビルドして S3 にアップロードし、社内だけで閲覧できるように共有するとします。特に何も意識せず S3 を公開すると http://hogehoge-storybook.s3-website-ap-northeast-1.amazonaws.com/ といった http はじまりの URL で共有されます。

これを実際に表示すると、https じゃないので msw は Service Worker が使えず利用できないかと思いきや、なんときちんと動作します。

ブラウザ向けの msw 起動 API setupWorker を呼び出すと、内部で以下のような処理が走ります。

      // service worker が利用できないフラグを立てておき
      useFallbackMode:
        !('serviceWorker' in navigator) || location.protocol === 'file:',

...
    // フラグが立っていたらフォールバックモードで起動する
    this.startHandler = context.useFallbackMode
      ? createFallbackStart(context)
      : createStartHandler(context)

https://github.com/mswjs/msw/blob/main/src/setupWorker/setupWorker.ts#L175-L177

そこで上記で紹介した interceptors のうち、今度は FetchInterceptor が登録されます。

https://github.com/mswjs/msw/blob/main/src/setupWorker/start/createFallbackRequestListener.ts#L25

そうすると Node のときとほぼ同じようなコードがあります。

  interceptor.on('request', async (request) => {
    // モック用のリクエストを生成
    const mockedRequest = new MockedRequest(request.url, { ... })

    // msw で登録した handler でレスポンスを生成
    const response = await handleRequest<SerializedResponse>( ... )

    // 生成したレスポンスのモックデータを返す
    if (response) {
      request.respondWith(response)
    }
  })

FetchInterceptor は名前の通り fetch を intercept できます。

https://github.com/mswjs/interceptors/blob/main/src/interceptors/fetch/index.ts

  protected setup() {
    // 元々の fetch を退避させておき
    const pureFetch = globalThis.fetch

    ...
    // globalThis の fetch を独自に上書きする
    globalThis.fetch = async (input, init) => {

      ...
      // その中で 'request' イベントを発火して↑のハンドラを実行する
      this.emitter.emit('request', interactiveRequest, requestId)

      ...
      // モックが実行されなければ pureFetch を叩く
      return pureFetch(request).then((response) => { ...