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

JavaScript, Vue.js, テスト

この記事は最終更新日から1年以上が経過しています。

まえがき

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

前提条件

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

ハマったとは

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

ファイル紹介

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

  • うまくいったプログラム
<template lang="pug">
.section
    .attention-text
      p 注意事項
    .box
      dl
        .detail-item
          dt 項目1
          dd おはよう
        .detail-item
          dt 項目2
          dd こんにちは
        .detail-item
          dt 項目3
          dd こんばんは
</template>

  • うまくいかなかったプログラム
<template lang="pug">
.section
    child-component
      template(v-slot:component-body)
        .text こんにちは
      template(v-slot:component-button)
        a.button(@ckick="ckickAction") ボタン
</template>

テスト実施時のエラー
● Test suite failed to run
 
    Jest encountered an unexpected token
 
    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
 
    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
 
    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
 
    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html
 
    Details:
 
    SyntaxError: Unexpected token (1:170)
　      at Parser.pp$4.raise (node_modules/vue-template-es2015-compiler/buble.js:2678:15)
      　at Parser.pp.unexpected (node_modules/vue-template-es2015-compiler/buble.js:639:10)
    　  at Parser.pp.expect (node_modules/vue-template-es2015-compiler/buble.js:633:28)
   　   at Parser.pp$2.parseBindingList (node_modules/vue-template-es2015-compiler/buble.js:1651:21)
     　 ...

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

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

エラー文の SyntaxError: Unexpected token (1:170) 以下の詳細部分のファイルを参照し確認してみたところ、どうやら v-slotが悪さしているらしい。
なのでうまくいかなかったプログラムを以下のように書きかえてみました。
<template lang="pug">
.section
  // child-component の中身
  .content
    .box(:id="id")
      // v-slot:component-body
     .text こんにちは
      //  v-slot:component-button
      a.button(@ckick="ckickAction") ボタン
</template>

テストできた！！

解決策

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

解決策1

v-slot部分を書きかえる
<template lang="pug">
.section
  child-component
    // template(v-slot:component-body) を↓ に書きかえる
    template(v-slot:component-body="")
      .text こんにちは
    // template(v-slot:component-button) を ↓に書きかえる
    template(v-slot:component-button="")
      a.button(@ckick="ckickAction") ボタン
</template>

解決策2

jest.config.js にこれを追記する
globals: {
    'vue-jest': {
      pug: {
        doctype: 'html',
      },
    },
  },

package.json にjestの設定を書いている場合は以下のように書いてあげればOK
"jest": {
  "globals": {
    "vue-jest": {
      "pug": {
        "doctype": "html"
      }
    }
  }
}

これで解決！

あとがき

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

JavaScript, Vue.js, テスト