Vue.jsでユニットテストを書くために

この記事はLOCAL学生部アドベントカレンダー2020 15日目への寄稿です！
adventar.org

12日目はaruneko99さん。

今回は既存のVue-cliプロジェクトにJestでのテスト環境を構築したこと、その際にはまったところをかき起こしておきたいと思います。

Vue.jsでテストがしたい

Vue.jsでは単体テストの効率化のためにVue Test Utilsを提供しており、こちらはJestやMochaのようなテストランナーと組み合わせて使うのが一般的のようです。
ということで、*Jest+vue-test-utilsを導入してテストを試してみます。

環境
node v14.15.1 yarn 1.22.5 vue 2.6.12
@vue/test-utils 1.1.1

Jest+vue-test-utilsをyarn(npm)でインストール

yarn add -D @vue/test-utils babel-jest jest vue-jest

公式ドキュメント
Jest を使用した単一ファイルコンポーネントのテスト | Vue Test Utils にしたがって環境設定を行います。

package.jsonを編集

// package.json
{
  "scripts": {
    "test": "jest"
  },
    "jest": {
      "moduleFileExtensions": [
        "js",
        "json",
        "vue" // *.vue ファイルを処理するように Jest に指示する
      ],
      "transform": {
        ".*\\.(vue)$": "vue-jest", // vue-jest で *.vue ファイルを処理する
        "^.+\\.js$": "<rootDir>/node_modules/babel-jest" // babel-jest で js を処理する
        },
        "moduleNameMapper": { // ソースコードにある @ を src へと割当てる
          "^@/(.*)$": "<rootDir>/src/$1"
        }
   }
}

次にBabelの設定ファイルを編集します。Jestを使うときはbabel.config.jsまたは.babelrcの2通りの記法があるようですが、今回はすでに用意されていたbabel.config.jsのほうを編集します。

{
  "presets": [["env", { "modules": false }]],
  "env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

ここまでの実行結果をみてみる

yarn testで実行します。

FAIL  src/models/order-item.test.js
Test suite failed to run

Cannot find module 'babel-preset-env' from '/home/denham/workspace'
- Did you mean "@babel/env"?

(中略)
Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total
Time:        2.546 s

怒られた...

babel-preset-envが存在しないよといわれているので探します。
babel7における変更点で多くのパッケージがscoped packagesとして提供されるようになり、モジュール名にbabel- がついていたパッケージは@babel/にリネームされているようです。
ということで、babel.config.jsのenvを@babel/preset-envに書き換えてみます。

テストはファイル名.test.jsとすると自動検知してくれます。

Vue.jsは学習し始めて間もないですが、既存のソースコードのロジック、DOMの状態チェックなど考えなければならないことが多く、想像以上に検証コードを書くハードルは高そうです。

いれて便利なVSCodeExtention

vscode-jest
テストコード上でDebugが実行できたり、テスト結果をインライン表示してくれて便利。
この恩恵を被れるくらいにテストコードを書けるようになりたい（来年の抱負）

榊さんのアドカレ、勉強になります。