Zenn
🚀

Techpit教材「Nuxt(Vue.js) × Firebaseでリアルタイムチャットアプリを作ってみよう！」でのエラー対応まとめ

2021/04/22に公開
Firebase
Firestore
Nuxt
Vue.js
Jest
tech

概要

Nuxt.jsの勉強でTechpitのNuxt(Vue.js) × Firebaseでリアルタイムチャットアプリを作ってみよう！を購入して進めていたのですが、カリキュラム通りに進めるとエラーで上手くいかないところがあったのでその対応についてまとめます。

上記教材を進めていてエラーで困っている方の参考になれば幸いです。

Firestoreのエミュレータが起動できない

起動

$ firebase emulators:start --only firestore
i  emulators: Starting emulators: firestore
i  firestore: Firestore Emulator logging to firestore-debug.log
⚠  firestore: Fatal error occurred: 
   Firestore Emulator has exited with code: 1, 
   stopping all running emulators
i  firestore: Stopping Firestore Emulator
⚠  firestore: Error stopping Firestore Emulator
i  hub: Stopping emulator hub

エラーが出て起動できない...

firestore-debug.logを確認すると「Javaをインストールしておくれ」との記載。
（コピーし忘れていたので原文はありません）

というわけで、こちらからJavaをインストールします。

再度起動（Javaインストール後）

$ firebase emulators:start --only firestore 
i  emulators: Starting emulators: firestore
i  firestore: Firestore Emulator logging to firestore-debug.log
i  ui: downloading ui-v1.4.2.zip...
Progress: ==============================================================================================================================================> (100% of 4MB
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4000/firestore │
└───────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

起動完了。

テスト実行時にエラーが出てテストが通らない

テスト実行

$ npm run test

（略）

FIRESTORE (7.18.0) INTERNAL ASSERTION FAILED: Unexpected state

（略）

FIRESTORE (7.18.0) INTERNAL ASSERTION FAILED: Unexpected stateでググって色々見ていたらこの記事を発見↓

Firestore RulesのテストをJestで書くテスト

ここに書いている通り、jest.config.jsに以下のコードを追記する。

jest.config.js
module.exports = {
+  testEnvironment: "node",
}

再度テスト実行

$ npm run test

> texh-chat@1.0.0 test
> jest

 PASS  test/firestore.spec.js
  firestore-test
    users collection
      read
        ✓ 未ログインの場合、ユーザーデータ取得に失敗するかどうか (133 ms)
        ✓ ログイン済の場合、ユーザーデータを取得できるかどうか (48 ms)
      create
        ✓ 自分のアカウントのデータを作成できるかどうか (67 ms)
        ✓ ユーザー名が未入力の場合、作成に失敗するかどうか (53 ms)
        ✓ アイコン画像が未入力の場合、作成に失敗するかどうか (51 ms)
        ✓ 他人のアカウントのデータは作成に失敗するかどうか (45 ms)

Test Suites: 1 passed, 1 total
Tests:       6 passed, 6 total
Snapshots:   0 total
Time:        1.109 s, estimated 2 s
Ran all test suites.
Jest did not exit one second after the test run has completed.

This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

テスト成功。

テストが失敗する原因はタイポや関数の定義忘れなどなど色々ありますが、今回のケースはコードは正確に書けているのに失敗するケースです。
（どうやらJestのバグ？ぽいです）

「送信」ボタンが上下中央揃えにならない

カリキュラムの中でチャットを投稿する機能がありますが、カリキュラム通りにやると「送信」が上下中央揃えになりません。

問題はここです。

      <button
        :disable="isValidateError"
        :class="{ 'text-blue': !isValidateError }"
        class="w-2/12 flex items-start justify-center text-gray font-semibold"
      >
        送信
      </button>

解決方法としてはbuttonタグのclassのitems-start→items-centerに変更します。

      <button
        :disable="isValidateError"
        :class="{ 'text-blue': !isValidateError }"
        class="w-2/12 flex items-center justify-center text-gray font-semibold"
      >
        送信
      </button>

この教材ではUIにはTailwind CSSを使っているのですが、下記公式ドキュメントに上下中央揃えはitems-centerを使用するように記載されていました。

Tailwind CSS/Align Items

参考

Discussion