🌊
Nuxt Auth Utils使用時にAPI単位のe2eで利用できる認証情報を作成する

2025/03/14に公開
Nuxt Auth Utilsを使用したアプリで、API 単位の e2e を実装するときにリクエストに渡す認証情報を作成する方法をメモ。

Nuxt のドキュメントには、ブラウザからページにアクセスする形での e2e は記載がある(https://nuxt.com/docs/getting-started/testing#end-to-end-testing)が、そうではなくてserver/api/に実装したdefineEventHandlerだけをテストしたかった。

もっとよい方法がある気はしている。
諸々のバージョンは以下の通り。バージョンが異なるとだめになるのかは不明。
nuxt: 3.15.4
nuxt-auth-utils: 0.5.16
nuxt-test-utils: 3.17.0
vue-test-utils: 2.4.6
vitest: 3.0.7

 結論h3から import したsealSessionを利用して暗号化されたセッションを発行し、 cookie に仕込めば実現できる。
const sessionConfig = useRuntimeConfig().session;
const sealed = await sealSession(
  {
    context: {
      sessions: {
        "nuxt-session": {
          id: "id",
          data: { user: { id: "id" } },
        },
      },
    },
  } as unknown as H3Event,
  {
    ...sessionConfig,
    password: import.meta.env.NUXT_SESSION_PASSWORD,
  }
);
const response = await fetch("/api/hoge", {
  headers: {
    "Content-Type": "application/json",
    cookie: `nuxt-session=${sealed}`,
  },
  method: "POST",
  body: JSON.stringify(body),
});
h3 は Nuxt Auth Utils が依存しているので別途インストールする必要はない
sealSession の第一引数は H3Event だが、context しか使用しないのでas unknown as H3Eventでごまかしている(h3 - sealSession の実装)

nuxt-sessionは Nuxt Auth Utils の設定による(Nuxt Auth Utils - Configuration)
Nuxt Auth Utils で指定されている環境変数NUXT_SESSION_PASSWORDを.env.test にも追加しておく(Nuxt Auth Utils - Quick Setup)
セッションにセットする user は 各々の実装に合わせて変更する(Nuxt Auth Utils - Session Management)

 懸念Nuxt Auth Utils が内部の実装で使用している h3 に依存する方法であるため、依存関係は汚くなる。バージョンアップなどで壊れる可能性が高くなる。

 所感API 単位の e2e ってみんなあんまりやらないのかな？あんまり情報なさそうだった。

画面からログインだけしてセッション情報を取得して使うとかも考えたけど h3 のデフォルトは HttpOnly だったし大抵そうだと思うので無理そう。Nuxt Auth Utils でその辺をいじれるのかは調べてない。

別案としては、mode とか NODE_ENV あたりの環境変数でテスト中であることを判別してそれ用の実装を入れるとか。その場合、認証機構そのもののテストは諦めることになる。
結論

懸念

所感

Discussion
