🧪

mswでGraphQLをmockし忘れたときにクエリを特定する

2024/07/24に公開

mswでGraphQLをmockし忘れるとwarningが出る...

StorybookやテストなどでGrapQLの通信をMockしたいことがありますが、mockし忘れた場合テストを実行するとコンソールに以下のようなwarningが表示されます。
RestAPIであればURLからどのリクエストをモックし損ねたか理解できますが、GraphQLはURLが同じになるためどのクエリをMockし損ねたかわかりません。

console.warn
    [MSW] Warning: intercepted a request without a matching request handler:

      • POST http://localhost:3000/graphql

    If you still wish to intercept this unhandled request, please create a request handler for it.
    Read more: https://mswjs.io/docs/getting-started/mocks

[結論]onUnhandledRequestでrequestBodyの内容を読む

結論からいうと以下のコードをテスト実行時などに挿入することでターミナルでrequestBodyからGraphQLのクエリの内容を読むことができます。
serverはmswで利用するserverです。

beforeAll(() => {
    server.listen({
      onUnhandledRequest: ({ body }) => {
        body
          ?.getReader()
          .read()
          .then(({ value }) => {
            const text = new TextDecoder().decode(value);
            console.log(text);
          });
      },
    });
  });
console.log
    {"operationName":"someGraphQLQuery","variables":{},"query":"query XXX }

補足

mswのサーバーのonUnhandledRequestでリクエストを読めるのですが、bodyがReadblestream 形式になっています。
このbodyのStreamを人間に読めるようにしようと思っても、Uint8Arrayというバイナリデータになっているのでそのままコンソールに出力できません。
JavaScirptでは TextDecoderを使うことでUnit8Arrayを文字列にできます。

あとがき

同じようにGraphQLのMockの作るときに何をMockし忘れたか確認する人の助けになれば幸いです。

Discussion