Nuxt.jsでは、プロジェクトを新規作成する際に単体テストフレームワークを利用するかどうかを選択することができます。今回は、単体テストフレームワークを選択せずに作成してしまったプロジェクトに単体テストフレーワークJestを導入する際に苦労した内容についてまとめておこうと思います。

Jestとは

Jestは、Facebook社が主体となって開発しているOSSのJavascript Testingフレームワークです。シンプルさを売りにしているので、テストがスマートに書けるのが魅力です。

環境

今回は、typescriptが導入されているプロジェクトをターゲットとします。

  • node 安定版(v14.4.0)
  • typescript利用
  • yarn

導入

簡単に導入手順を下記に示します。

Babelに対応した環境を作る

下記にBabel向けの環境構築手順を記載します。

エラーがでなければ、babelの設定は完了です。

Typescript向けの環境を作る

下記にTypescriptが利用できるように環境を構築します。

※Jestの導入ページを読むとts-jestを導入したほうが良さそうなので、ts-jestを導入しました。

エラーがでなければ、typescript向けの環境構築は完了です。

Vue向けの環境を作る

下記コマンドで必要なライブラリをインストールします。

babel6系とbable7系の２つがいる状態になっています。vue-jestがbabel6系に依存しているので、babel-coreにpeerDependencyになっているようです。

babel7系とbabel6系の共存について

babel6系のコアロジックは、babel-coreという名前でリリースされていたのですが、babel 7系では、@babel/coreに破壊的な変更がおこわなれています。6系と7系を共存させるには、いまのところ、babel-core@bridgeを利用するのが良さそうです。これを導入して無事解決しました!

まとめ

今回は、Jestを既存のNuxtプロジェクトに導入する中で発生したbabel絡みの問題に対しての対処を行いました。bablel絡みの問題は、なかなか調査が大変なので、vue-testも早めにBable7系へ移植されることを願います。