Nuxt．jsビギナーズガイド
posted with ヨメレバ
花谷拓磨 シーアンドアール研究所 2018年10月
テスト実行環境の構築
どこまでテストを書くか？
- 以前はフロントエンドのテストはDOMやブラウザに依存するため、テストの寿命が短いにも関わらず作成コストが高いものであった。
- 今はある程度はDOMに依存しないテストが可能となったが、それでもDOMが影響する部分のテストはどうするかといった問題は解消されていない。
- 著者はVuexストア、 Vuekコンポーネント、フレームワークに依存しないレイヤ、に絞ってユニットテストを書くべきと述べている。
Jest
- facebook社が開発しているオールインワンテストツール。
- 以前はmochaが使われていたが、今はJestがデファクトスタンダードとなっている。
- Vue.js公式のテスト支援ツールVue Test UtilsはJestまたはmochaの利用を推奨している。
Jestのインストール
1. npm install --save-dev jest
2. package.jsonのscriptに"test": "jest"を追加。
"test:coverage": "jest --coverage"とするとカバレッジが表示される。
（jestキーにcollectCoverage": trueを追加でも同じ）- カバレッジを有効にするとjestコマンドの出力にカバレッジが表示され、coverage/lcov-report/index.htmlが生成される。
- 一般的な開発では、カバレッジは80%を下回らない程度に意識するとよい。
3. npm run test
多くのテストツールは設定ファイルの記述が必要だが、Jestは何もせずに実行可能。
Vue Test Utils
- Vue.jsおよび周辺エコシステムのテストにはVue Test Utilsが必要となる。
- Vue Test Utilsはvue-server-rendererを内部に持っていて、Node.js上でブラウザイベントが動いているかのようなテストを行うことができる。
Vue Test Utilsのインストール
1. npm install --save-dev @vue/test-utils
babel-jest
- Vue.jsの開発ではimportやexportなどのESModule記法を使うため、Jestのbabelプラグイン(babel-jest)を導入してトランスパイルする必要がある。
babel-jestのインストール
1. npm install --save-dev babel-jest @babel/core @babel/preset-env
2. package.jsonに追加
"jest": {
"transform": {
"^.+\\.js$": "babel-jest"
}
},
"babel": {
"env": {
"test": {
"presets": ["@babel/preset-env"]
}
}
}- jestキーのtransformキーで対象ファイルを指定、babelキーはNuxt.jsの場合は常に上記設定になるので覚える必要はない
- sync, awaitなどpolyfillが必要な場合は、以下の設定にする。
"@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }
※ core-jsとregenerator-runtimeはcreate-nuxt-appによってインストールされている
vue-jest
- 単一ファイルコンポーネントのテストするはにvue-jestが必要となる。
vue-jestのインストール
1. npm install --save-dev vue-jest
2. package.jsonに追加
"jest": {
〜省略〜
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
collectCoverage": true,
collectCoverageFrom": ["app/**/*.{js,vue}"],
},
エイリアスの解決
- Nuxt.jsやVue CLIプロジェクトでは、~または@でトップディレクトリを指すことができる。
（裏でwebpack設定をしてくれている） - CommonJS/ESModuleの仕様ではないため、Jestを使う場合はpackage.jsonにmoduleNameMapper設定を追加する必要がある。
- moduleNameMapperを適切に設定することで
import index from '../../store'などではなくimport index from '~/store'のように記述してもJestを実行することができる。
"jest": {
〜省略〜
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/app/$1",
"^@@/(.*)$": "<rootDir>/$1",
"^~/(.*)$": "<rootDir>/app/$1",
"^~~/(.*)$": "<rootDir>/$1"
}
},