react+firebaseのtestにjestを使った際にFirebaseErrorが起きる

前提・実現したいこと

jestを使ってコンポーネントのテストを行いたい

発生している問題・エラーメッセージ

firebaseとReactを使ってアプリを作成しているのですが、jestでコンポーネントのテストを行おうとした時に以下のエラーが発生しました。

console
1 FAIL  src/components/HeaderRight.test.js
2  ● Test suite failed to run
3
4    FirebaseError: projectId must be a string in FirebaseApp.options
5
6      14 | });
7      15 | 
8    > 16 | export const db = firebase.firestore();
9         |                            ^
10      17 | export const auth = app.auth();
11      18 | export const timestamp = firebase.firestore.FieldValue.serverTimestamp();
12      19 | export default app;
13
14      at new FirestoreError (node_modules/@firebase/firestore/src/util/error.ts:216:5)
15      at Function.Object.<anonymous>.Firestore.databaseIdFromApp (node_modules/@firebase/firestore/src/api/database.ts:618:13)
16      at new Firestore (node_modules/@firebase/firestore/src/api/database.ts:378:36)
17      at node_modules/@firebase/firestore/index.node.ts:41:12
18      at Component.instanceFactory (node_modules/@firebase/firestore/src/config.ts:78:16)
19      at Provider.Object.<anonymous>.Provider.getOrInitializeService (node_modules/@firebase/component/src/provider.ts:194:33)
20      at Provider.Object.<anonymous>.Provider.getImmediate (node_modules/@firebase/component/src/provider.ts:95:29)
21      at FirebaseAppImpl.Object.<anonymous>.FirebaseAppImpl._getService (node_modules/@firebase/app/src/firebaseApp.ts:127:54)
22      at FirebaseAppImpl.firebaseAppImpl.<computed> [as firestore] (node_modules/@firebase/app/src/firebaseNamespaceCore.ts:228:29)
23      at Object.firestore (node_modules/@firebase/app/src/firebaseNamespaceCore.ts:209:46)
24      at Object.<anonymous> (src/firebase.jsx:16:28)
25      at Object.<anonymous> (src/components/HeaderRight.jsx:3:1)
26      at Object.<anonymous> (src/components/HeaderRight.test.js:3:1)

ログが少し長いですが上記の通りです。

エラーの起きたテストコードは以下です。

HeaderRight
1import React from "react";
2import { render, screen } from "@testing-library/react";
3
4//問題は他のファイルから何かコンポーネントをimportしようとすると上記のエラーがおきます。
5import { add } from "./HeaderRight";
6
7describe("sum", () => {
8  test("sums up two values", () => {
9    const value = add(2 + 2);
10    expect(value).toBe(4);
11  });
12});

今回はHeaderRight.jsxというファイルに適当に関数を作成してそれをimportしてテストを実行しようとしていましたが、上記のエラーがおきます。

HeaderRight.jsxから何か関数をimportせずに、例えば

describe("sum", () => {
  test("sums up two values", () => {
    expect(2 + 2).toBe(4);
  });
});

のようなテストを書けばpassします。

しかし、このpassするテストコードであっても、import { add } from "./HeaderRight";を追加すると、絶対に上記のエラーが起こります。

該当のソースコード

firebaseの設定を記載しているファイルは以下になります。

firebase
1import firebase from "firebase/app";
2import "firebase/auth";
3import "firebase/firestore";
4import { firestore } from "firebase";
5
6const app = firebase.initializeApp({
7  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
8  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
9  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
10  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
11  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
12  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
13  appId: process.env.REACT_APP_FIREBASE_APP_ID,
14});
15
16export const db = firebase.firestore();
17export const auth = app.auth();
18export const timestamp = firebase.firestore.FieldValue.serverTimestamp();
19export default app;

試したこと

firebaseの環境変数は.envファイルを作成して記載しています。

今回、projectId　must be stringという記述から.envファイルのREACT_APP_FIREBASE_PROJECT_IDの右辺を

REACT_APP_FIREBASE_PROJECT_ID="projectid"

という様に、projectidに" "を付けてみましたが変わらず。

補足情報（FW/ツールのバージョンなど）

package.jsonは以下になります

json
1{
2  "name": "firebase-react-auth",
3  "version": "0.1.0",
4  "homepage": "./",
5  "private": true,
6  "jest": {
7    "testEnvironment": "jest-environment-jsdom-sixteen"
8  },
9  "dependencies": {
10    "@babel/preset-env": "^7.12.7",
11    "@babel/preset-react": "^7.12.7",
12    "@material-ui/core": "^4.11.0",
13    "@material-ui/icons": "^4.9.1",
14    "@material-ui/lab": "^4.0.0-alpha.56",
15    "@testing-library/jest-dom": "^4.2.4",
16    "@testing-library/react": "^9.5.0",
17    "@testing-library/user-event": "^7.2.1",
18    "bootstrap": "^4.5.2",
19    "firebase": "^7.20.0",
20    "firebase-admin": "^9.3.0",
21    "react": "^16.13.1",
22    "react-bootstrap": "^1.3.0",
23    "react-dom": "^16.13.1",
24    "react-router-dom": "^5.2.0",
25    "react-scripts": "3.4.3",
26    "react-test-renderer": "^17.0.1",
27    "uuid": "^8.3.1",
28    "why-did-you-update": "^1.0.8"
29  },
30  "scripts": {
31    "start": "react-scripts start",
32    "build": "react-scripts build",
33    "test": "jest",
34    "eject": "react-scripts eject",
35    "format": "prettier --write 'src/**/*.js'"
36  },
37  "eslintConfig": {
38    "extends": "react-app"
39  },
40  "browserslist": {
41    "production": [
42      ">0.2%",
43      "not dead",
44      "not op_mini all"
45    ],
46    "development": [
47      "last 1 chrome version",
48      "last 1 firefox version",
49      "last 1 safari version"
50    ]
51  },
52  "devDependencies": {
53    "@babel/plugin-transform-react-jsx": "^7.12.7",
54    "@firebase/testing": "^0.20.11",
55    "babel-jest": "^26.6.3",
56    "enzyme": "^3.11.0",
57    "firebase-tools": "^8.15.1",
58    "jest": "^26.6.3",
59    "jest-environment-jsdom-sixteen": "^1.0.3",
60    "prettier": "^2.2.1"
61  }
62}