🐺

Notion API を Mock する

2024/08/15に公開

Next.js

はじめに

Notion API をmockしてみた話です。

@notionhq/client を使用してきましたが、実際どのように mock すると良いのか気になったのと
E2Eテストとか何回も実行するにあたって流石にmockして運用したくなったのもあります。

環境

今回の環境はこんな感じです。

フレームワーク：Next.js
クライアント：@notionhq/client
mockライブラリー：msw

@notionhq/client について

JavaScript 用 Notion SDKです。
REST APIとのインタラクションを簡素化し、開発を効率化できるのでこちら利用しています。

msw について

今回利用したmockライブラリのmsw (Mock Service Worker) はAPIモッキング・ライブラリで
クライアントに依存しないモックを書くことができます。
あらゆるフレームワーク、ツール、環境で再利用することができるので便利です。

https://mswjs.io/

msw を利用して Notion API を mock する

@notionhq/client ではデバックモードでリクエストの詳細を確認することができるため
まずは、どんなリクエストが飛んでいるのかみていきます。

@notionhq/client DEBUGモードの設定

const { Client, LogLevel } = require("@notionhq/client")

const notion = new Client({
  auth: process.env.NOTION_TOKEN,
  logLevel: LogLevel.DEBUG, // この設定を追加する
})

@notionhq/client ログ内容

実際に出力されるログ

@notionhq/client info: request success {
  method: 'post',
  path: 'databases/xxxxxxxxxxxxxxxxxxxxxxxxx/query'
}

こんな具合でmethodとpathが表示されます

Notion API の公式にもcURLによる記載もありますが、実質そのpathが実行されています。

curl --location --request POST 'https://api.notion.com/v1/databases/' \
--header 'Authorization: Bearer '"$NOTION_API_KEY"'' \
--header 'Content-Type: application/json' \
--header 'Notion-Version: 2022-06-28' \
--data '{
    ... 割愛
}'

msw install

setupについては公式ドキュメントに従って設定していきます。

https://mswjs.io/docs/getting-started

next.jsで起動するには_app.tsでrequireによる読み込みを行います。

他のフレームワークを利用している場合は
下記ドキュメントから各フレームワークの設定を確認できますのでそちらを参考にしてみると良いかと思います。

https://v1.mswjs.io/examples/

msw notion mock

設定が一通り完了したらmockしていきます。

// ...
// block API の一例
export const handlers = [
  http.get("https://api.notion.com/v1/blocks/:blockId/children", async () => {
    const jsonResponse = JSON.stringify(ResponseJson);
    return HttpResponse.json(
      JSON.parse(jsonResponse)
    );
  })
];

特定のpathに対してmockする場合

// ...
// block API の一例
export const handlers = [
  http.get("https://api.notion.com/v1/blocks/xxxxx-xxxx-xxxx-xxxxxxx/children", async () => {
    const jsonResponse = JSON.stringify(ResponseJson);
    return HttpResponse.json(
      JSON.parse(jsonResponse)
    );
  })
];

@notionhq/clientではcURLと同様にhttps://api.notion.com/v1が暗黙的にprefixとして付与されるため、
mswのhandler.tsで必要に応じて設定することで対応可能です。

たったのこれだけで Notion APIをモックすることができます。

最後に

今更ながらやってみましたが
結構簡単に設定することはできるので
これを機に開発環境やCI環境を整えていこうと思います。