Vue.jsのテストを作成したかったが、苦労した
目次
やりたかったこと
vue.jsで作っているアプリのテストを書きたい。Vueでは、標準ではjestを使うらしい。つまり、jestを実行したい。
苦労したこと
jestを使いたいだけなのに、babelとかいうよくわからんやつがエラーを出す。そもそもbabelが何なのかわかってないし、.babelrcの書き方も知らない。
だから、bebalを調べて書き残しておく
babel?
この説明がわかりやすい。簡単にいうと、Javascriptの負の遺産歴史を埋めてくれる変換器らしい。変換器を使うためだけにエラーが出るなど、皮肉。
どんなエラーがでた？
● Test suite failed to run Cannot find module ‘babel-preset-env' from ‘/home/kensuke-mi/Projects/my_projects/context_vocabulary_generator/frontend' – Did you mean “@babel/env”?エラーを見返してみる、 babel-preset-env と書いてある。これは一体なにだ？調べてみた。
インストールしてみた。エラーが変わった。ますますわけがわからない。
|
1 2 3 4 5 6 |
FAIL __tests__/App.spec.js ● Test suite failed to run Cannot find module 'babel-core' at Object.<anonymous> (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15) |
調べてみる。事例的には、この事例が近い気がする。インストールしてみる。
|
1 |
npm install --save-dev babel-core@bridge |
テストしてみる。
きもいくらいの量のエラーが出てきた。でも、エラー内容は、テスト内容に関するものだった。
つまり、テスト自体は実行された。
.babercの問題じゃね？
結果は違った。でも書き残しておく。
jestを使うために問題は.babelrcにあると推測した。
.babelrcの書き方を学習する。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "presets": [ ["@babel/env"] ], "env": { "test": { "presets": [ ["env", { "targets": { "node": "current" }}] ] } } } |
“presets”と”env”のどっちが問題？それすらもわからない。
フィールドの意味は何か？
babel-present-envのドキュメントを見てみる。
ざっくり理解すると、「細かい設定しなくても、構文変換をしてくれるよ」と書いてある。
きっと、このモジュールがないと、元の構文を指定しないといけないのだろう。途中で考えるのが面倒くさくなった。
まとめ
原因は.babelrcではなかった。
babel-preset-envのインストールしてなかったこと。babel-core@bridgeのインストールが必要だったこと。