jestを既存のNuxtに入れてみた話(導入編)

はじめに

自分がテストツールに対する理解度が全然なかったため、既存のNuxt(2.16)にテストツールで有名なjestを入れてみたのですが結構詰まったので、それについて自分用のメモでまとめておきます。

そして今回はhidekazu kawashima様の以下記事を参考にJest導入を進めていきました。
Nuxt.jsプロジェクトにあとからjestを利用できるようにする際にハマったこと

※本件はtypescriptが入っていないNuxt環境の例になります。

導入手順

1. jestのインストール
   以下コマンドにてjestをインストールしました。

npm install jest --save-dev

2. 簡易的なテストファイルの作成
   今回はtestフォルダを作成し、その中にjestファイル(spec.jsファイル)を作成。
   中身は下記です。

spec.js

describe('Sum' ()=> {
    test("1+1",()=> {
        expect(1+1).toBe(2)
    })
})

3. testコマンドの登録
   package.jsonのscriptsに以下コマンドを追加し、で実際にnpm run testで実行

package.json

"scripts": {
    "test":"jest"
}

ここまでは特にvueの記述に依存していないため普通に通り、テストを実行できるかな？と思います。

babelの設定手順

1.　プラグインのインストール
下記でjestを入れるに必要なbabelのプラグイン系をインストールします。

npm i babel-jest @babel/core @babel/preset-env --save--dev

2. jestのconfigファイルの作成
   次にルートディレクトリに以下記述をしたjestのconfigファイルを作成

jest.confg.js

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: [
    'js',
    'vue',
    'json'
  ],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': `@vue/vue2-jest`
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue',
    //plugin配下をテストしたい場合
    '<rootDir>/plugins/**/*.js'
  ]
}

ここで注意なのがvue-jestのライブラリですが、インストールしたjestとVueのバージョンによって、ライブラリの記載が変わってきます。
詳細は下記テーブルをご覧ください。
自分の場合はjestのバージョンが28 かつ Vueのバージョンが2だったので@vue/vue2-jest@28をインストールしました。そのバージョンによってtransformの記載の仕方が変わってきますので注意です。

Vue version	Jest Version	npm Package	Branch
Vue 2	Jest 26 and below	vue-jest@4
Vue 3	Jest 26 and below	vue-jest@5
Vue 2	Jest 27 and above	@vue/vue2-jest@27	27.x
Vue 3	Jest 27 and above	@vue/vue3-jest@27	27.x
Vue 2	Jest 28 and above	@vue/vue2-jest@28	28.x
Vue 3	Jest 28 and above	@vue/vue3-jest@28	28.x

ここまででbabelの設定は完了です。

Vueファイルのテスト

上記の設定により
実際にVueファイルをimportしテストコードを書いたらテストが通るかな？と思っています。
※vue-test-utilsなどのテストに必要なライブラリは各自のやりたいことに応じて必要なものを入れていってください。ここでは割愛します。

それ以外の部分で詰まりそうな部分を下記に記載しておきます。

DOM生成ができないエラー

現状だとテストコード内でDOM生成している場合は下記エラーが表示されるかな？と思います。

window is undefined

その場合はjs-dom関連のライブラリを入れ、設定する必要があります。
1.js-dom関連のライブラリをインストールします。
注意なのがここもバージョンによってインストールするライブラリが違います。
自分の場合はjestのバージョンが28だったのでjest-environment-jsdomで話を進めていきます。

Jest Version	npm Package
jest 27まで	js-dom
jest 28以上	jest-environment-jsdom

2.上記ライブラリをjest.config.jsに記載します。
そのため下記コードを追加しましょう。
そしたらエラーが出なくなるかなと思います。

jest.confg.js

module.exports = {
	省略...
	// ここを追記
	testEnviroment: "jest-environment-jsdom"
}

テスト対象のVueファイル内でのimport vue記述が怒られる

恐らくの推測ですが、node_modulesの位置が定義されていないのでテストファイルで読み込んでいる外部ライブラリがうまく読み込めないのかな？と思っています。
それの解決方法は以下の通りでjest.config.jsにmoduleDirectories:["node_modules",__dirname]を追加します。
以上で解決するかな？と思います。

jest.confg.js

module.exports = {
	省略...
	// ここを追記
	moduleDirectories:["node_modules",__dirname]
}

最後に

フロントエンドでのテスト作成が大変問題を肌で実感することができました。
テストを作成するまでの導入の部分でもバージョンによりけり使用するライブラリおそれぞれ違い詰みポイントが多いなと... なのでこのようにメモを残しておく大切さを実感できました。