Next.jsでVitestを使ってテストをするときのenvファイルを読み込む設定

9657 ワード
JavaScript Next.js Test Vite Vitest tech テキストリンク

記事にするほどでもないと思ったんですけど，脳死で調べて出てこなかったので一応書いときます．
今回はservices/foo.tsでのgetEnv関数のテストを行います．
以下フォルダ構成です．

.
├──pages
├── vite.config.ts
├── next.config.js
├── next-env.d.ts
├── test
│  └── setup.ts 
├── node_modules
├── srvices
│  └── foo.ts 
├── package.json
├── yarn.lock
└── tsconfig.json

まずは，vitestをinstallして下さい．

yarn add -D vitest

その後，package.jsonのscriptにvitestの実行スクリプトを追加してください．

package.json
...
  "scripts": {
  ...
    "test": "yarn vitest"
  },
  ...

つぎに，vite.config.tsにviteの設定を記述していきます．
servicesフォルダ内のjs, tsファイルをテストします．
test/setup.tsにてテスト時に.env.test.localのファイルを環境変数として読み込みますよと書くので，そのファイルを読み込む設定を行います．

vite.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  define: {
    'import.meta.vitest': false,
  },
  test: {
    includeSource: ['services/**/*.{js,ts}'],
    setupFiles: ['test/setup.ts'],
  },
})

setup.tsファイル内ですが，これはNext.jsの記事をそのままコピペしました．

test/setup.ts
import { loadEnvConfig } from '@next/env'
loadEnvConfig(process.cwd())

今回読み込む環境変数の値と，next.js内での設定です．

.env.test.local
TEST_ENV=test_env
next.config.js
module.exports = {
  reactStrictMode: true,
  pageExtensions: ['jsx', 'js', 'ts', 'tsx'],
  build: {
    env: {
      TEST_ENV: process.env.TEST_ENV,
    },
  },
  env: {
    TEST_ENV: process.env.TEST_ENV,
  }
}

今回テストする関数と，テストコードです．
環境変数のTEST_ENVを読み込んで返すだけの関数です．
toBeは実行した関数の返り値が特定の値と一致するかどうか確認しています．

services/foo.ts
export const getEnv = () => {
  return process.env.TEST_ENV
}

if (import.meta.vitest) {
  const { test, expect } = import.meta.vitest
    test("getEnv's results is test_env", () => {
      expect(getEnv()).toBe('test_env')
    })
}

以下のコマンドを実行すると，テストが実行されます．
緑色でPASSの文字が表示されたらテスト合格です．

yarn test

冒頭にも書きましたが，記事にする必要のない程度の話かと思いますが，もし誰か困っている人がいたら参考にしてください程度に書きました．
最後までお読み頂きありがとうございました。もし参考になった、良かったと思われる方はいいねボタンを押していただけると嬉しいです。
Thank you!

参考文献

Swift CoreData let entity = NSEntityDescription.entityがnilでクラッシュする
GitHub Actions の手動実行で入力された値を安全に使いたい