vue-jestを使ったテスト時にとあるプログラムのテストだけ怒られた

JavaScript, Vue.js, テスト

まえがき

現在のプロジェクトでJestによるテストを導入できるか?を調べる中で環境構築中にハマった部分がありました。
今後テストを本格的に導入する時に同じ罠に確実にハマる気がするので備忘録として。

前提条件

  • Vue.jsを使っているプロジェクトなのでvue-jestを入れてテストしようかなという目論見
  • HTML部分はpugで書いています

ハマったとは

簡単にいうと、 テストができるプログラムとできないプログラムが発生した というものでした。
全プログラムで失敗するなどであれば何かのインストール忘れかな?とも思うのですが…成功できるものもあるとは何事…と悩んでいました。

ファイル紹介

Javascript部分やCSS部分は今回の事件(?)に関係が無かったためHTML部分のみ記載します。

  • うまくいったプログラム

  • うまくいかなかったプログラム

テスト実施時のエラー

なのでこれらをもとに Jest encountered an unexpected tokenSyntaxError: Unexpected token (1:170) で検索をかけてみても「これだ!」というものに出会わず…

結局何がいけなかったのか

エラー文の SyntaxError: Unexpected token (1:170) 以下の詳細部分のファイルを参照し確認してみたところ、どうやら v-slotが悪さしているらしい
なのでうまくいかなかったプログラムを以下のように書きかえてみました。

テストできた!!

解決策

v-slotがダメだと分かった上で調べてみたら、同じ問題 が出てきたのでこれを参考に直していきます。

解決策1

v-slot部分を書きかえる

解決策2

jest.config.js にこれを追記する

package.json にjestの設定を書いている場合は以下のように書いてあげればOK

これで解決!

あとがき

今回のエラーでただただエラー文を調べても何も出ずに結構行き詰ってしまいました…。
エラー詳細から推理する力を鍛えたいと思う一件になりました。