🧪
mswでGraphQLをmockし忘れたときにクエリを特定する
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