35d BLOG

Nuxt.js + jest でテスト実行時に出る警告を消したい

// 🙎‍♂️ Yuji Tsuburaya📆 April 18, 2020🔖 NuxtJS Jest

Nuxt.js + jest によるテスト実行時に、以下のような警告が出ました。テストの動作自体には影響はないのですが、テストケースごとに警告が出て鬱陶しかったので、いろいろと試行錯誤をしました。

警告の内容としてはこんな感じ👇

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtoolsconsole.info node_modules/vue/dist/vue.common.dev.js:9060

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

どうやら、開発モードでアプリケーションを実行すると、

vue-devtool を入れるとええよ
プロダクションモードにするのを忘れないようにな

という親切な文言が出るようです。親切なのは良いのですが、テスト実行時に、それもテストケースごとにこれが出るのはさすがにノイズなので、出さなくする方法を調査しました。

🤮 試してみて、ダメだったこと

nuxt.config.js に以下のように、フラグを立てるのを試してみました。このように書くことで、Vue.config が生成されます。

export default {
  vue: {
    config: {
      productionTip: true,
      devtools: false
    }
  }
}

これは、残念ながら効果ありませんでした……

👌 結論

テスト起動スクリプトで、プロダクションモードを ON にすることにしました。僕たちは cross-env を使って環境を分けているので、 package.json に以下のように追記しました。tarn test を実行すると、プロダクションモードでテストが実行され、無事、警告が出なくなりました。

"test": "yarn test:prod",
"test:dev": "cross-env NODE_ENV=\"dev\" jest",
"test:prod": "cross-env NODE_ENV=\"production\" jest",

🤔 とは言うものの……

目的は達成できたのですが、プロダクションモードでテスト実行するのも何か違うような気がするので（動作に影響はないけど）、良い解決方法ご存知の方は教えて下さい🙇‍♂️というか、nuxt.config.js に設定書いても出るのが謎です……

書いた人

Yuji Tsuburaya （@___35d）

👩‍💻 Frontend Engineer

🏢 J-CAT CTO Co-Founder / ex. BizReach

🎨 by @ch1ch1ch1_123

💚 Minimalism / Notion / Figma

📱 Author of @FastNotion

Notion に関する記事

Notion ミートアップに登壇してきました
// 2020-05-22 Notion
僕が Notion を使う上で意識している自分ルール 10 条
// 2020-02-23 Notion
Notion + GTD でストレスフリーな生活を手に入れる
// 2020-01-18 Notion
Notion を企業のタスク・ドキュメント管理ツールとして運用する
// 2020-01-22 Notion
僕の Notion の使い方（TODO / STOCK / LIFE LOG / BLOG） (2020年4月)
// 2020-04-25 Notion