vitestとfirebase-functions-testを使ってテストを実行したら"__vite_ssr_import_1__ is not a function"と表示された場合の対処法

Firebase FunctionsのプロジェクトにJestの代わりにVitestを入れてみた。

yarn add -D vitest vite-tsconfig-paths

vitest.config.tsは次の通りに作成した。

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [tsconfigPaths()],
  test: {
    globals: true,
    environment: "node",
    include: ["./src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
  },
});

そしてFirebase Functionsのテストなので、firebaes-functions-testも入れた。

yarn add -D firebase-functions-test

そしてテストを書いてテストを実行しようとしたら次のエラーが発生した。

TypeError: __vite_ssr_import_1__ is not a function
 ❯ src/routes/tab-one/activities/getActivities.test.ts:12:17
     10| 
     11| beforeAll(async () => {
     12|   const {wrap} = firebaseFunctionsTest();
       |                 ^
     13|   // テスト対象の関数をラップする
     14|   wrapped = wrap(firebaseFunctions.https.onCall(getActivities));

deps.externalに['fibase-functions-test']を指定したり、deps.interopDefaultにtrueを設定しても解決しなかった。

これは本来ならimport firebaseFunctionsTest from "firebase-functions-test";と書くべきところをimport * as firebaseFunctionsTest from "firebase-functions-test";と書いてしまっていたことが原因だったことが試しているうちにわかった。

firebase-functions-testをvitestで使用する場合はimport firebaseFunctionsTest from "firebase-functions-test";と書くように気をつける。

VSCode上で赤線が出る場合のTips

import firebaseFunctionsTest from "firebase-functions-test"と書くと下に赤線が表示されることがある。

このエラーの内容は次の通り。

This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

なのでtsconfig.jsonに"esModuleIntrop": trueを追加する。 こうすることで赤線が消える。

// tsconfig.json
{
  "compilerOptions": {
    ...
    "types": ["vitest/globals"],
    "esModuleInterop": true,
  },
  ...
}