test-utilsでVueのテストを書きたい②

webpack.config.jsの書き方が分かってとりあえずテストが動いた！

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      // この設定は.jsファイルと.vueファイルの<script>ブロック両方に適用される
      {
        test: /\.vue$/,
        loader: "vue-loader"

      },
      // この設定は.cssファイルと.vueファイルの<style>ブロック両方に適用される
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
          ]
      }
    ]
  },

  plugins: [
    // vue-loaderv15以降必須
    new VueLoaderPlugin()

  ],

} 

.cssの記述は単一ファイルコンポーネント内でスタイル作ってる場合はいらないのかと勘違いしていたのが敗因だった！

package.json

{
  "name": "sampleApp",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "https://github.com/rails/webpacker",
    "axios": "^0.18.0",
    "vue": "^2.5.22",
    "vue-loader": "^15.5.1",
    "vue-router": "^3.0.2",
    "vue-template-compiler": "^2.5.22",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.28",
    "css-loader": "^2.1.0",
    "expect": "^23.6.0",
    "jsdom": "^13.1.0",
    "jsdom-global": "^3.0.2",
    "mocha": "^5.2.0",
    "mocha-webpack": "^2.0.0-beta.0",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.28.4",
    "webpack-dev-server": "^3.1.14"
  },
  "scripts": {
    "test": "mocha-webpack --webpack-config webpack.config.js --require app/javascript/test/setup.js app/javascript/test/zip-code.spec.js"
  }
}

・vue-template-compilerとvueのバージョンは一致させる。
・mochaは「テストランナー」というテストを実行するためのプログラムで、他にJestというものもある。
・テストを仮想ブラウザ環境で実行させるため、JSDOMを使う必要がある。
Jestは自動的に設定してくれるが、mochaなど他のテストランナーを使うときはjsdom-globalを使って手動で設定する必要がある。


test/setup.js

require('jsdom-global')()

・テストの実行コマンドであるnpm testを叩いたときに、package.jsonのscripts: testの箇所が実行される。

  "scripts": {
    "test": "mocha-webpack --webpack-config webpack.config.js --require app/javascript/test/setup.js app/javascript/test/zip-code.spec.js"
  }

ここでテストランナーとかwebpack.config.jsの設定とかsetup.jsとかspec.jsファイルが読み込まれてテストが実行されるという仕組みのようだ。

参考リンク

テストランナを選ぶ | Vue Test Utils Webpack + Vue(SFC) + TypeScript ハマりどころ (2018/05 版) - Humanity そろそろVue.jsでもテストコードを書いていこう - 豆腐とコンソメ