Vue.jsでJestの単体テストをIntelliJ IDEAから動かすまでの流れ
Vue.jsでプロジェクトを作成して、 Jestの単体テストをIntelliJ IDEAから動かすまでの流れのメモです。
この手順では、Vue.jsはv2を利用します。
vue-cliのインストール
vue-cliをインストールします。
vuejs/vue-cli | GitHub
https://github.com/vuejs/vue-cli/tree/v2#vue-cli--
以下のコマンドでインストールできます。
npm install -g vue-cli
vueコマンドがインストールされたことを確認します。
$ vue --version
2.9.6
プロジェクトの作成
webpackテンプレートで、プロジェクトを生成します。
cd ~
vue init webpack vue-jest-study
質問は、次の通り、全て既定値で回答します。
? Project name (vue-jest-study)
? Project description (A Vue.js project)
? Author (※あなたの名前とメールアドレス※)
? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
? Install vue-router? (Y/n)
? Use ESLint to lint your code? (Y/n)
? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/standard/standard)
? Set up unit tests Yes
? Pick a test runner (Use arrow keys)
❯ Jest
? Setup e2e tests with Nightwatch? (Y/n)
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
❯ Yes, use NPM
以下の通り、dev環境を起動し、
ブラウザで http://localhost:8080
にアクセスして確認します。
cd vue-jest-study
npm run dev
確認出来たら、Ctrl+Cで終了しておきます。
単体テストの実行とエラー・警告の対処
以下の通り、単体テストを実行します。
npm run unit
テストの結果、以下のようなエラー・警告が出て失敗します。
> jest --config test/unit/jest.conf.js --coverage
● Deprecation Warning:
Option "mapCoverage" has been removed, as it's no longer necessary.
Please update your configuration.
Configuration Documentation:
https://facebook.github.io/jest/docs/configuration.html
FAIL test/unit/specs/HelloWorld.spec.js
● Test suite failed to run
SecurityError: localStorage is not available for opaque origins
エラーメッセージや以下のエントリを参考に設定を修正します。
【Jest】SecurityError: localStorage is not available for opaque originsが出た時 | Qiita
https://qiita.com/knaot0/items/8292ffd43f0cfe640c0b
修正した設定ファイルは以下の通りです。
test/unit/jest.conf.js
const path = require('path')
module.exports = {
testURL: 'http://localhost/',
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
'js',
'json',
'vue'
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
transform: {
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
},
testPathIgnorePatterns: [
'<rootDir>/test/e2e'
],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
setupFiles: ['<rootDir>/test/unit/setup'],
coverageDirectory: '<rootDir>/test/unit/coverage',
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**'
]
}
変更点は、次の通りです。
※途中省略※
module.exports = {
+ testURL: 'http://localhost/',
rootDir: path.resolve(__dirname, '../../'),
moduleFileExtensions: [
※途中省略※
setupFiles: ['<rootDir>/test/unit/setup'],
- mapCoverage: true,
coverageDirectory: '<rootDir>/test/unit/coverage',
※途中省略※
再度 npm run unit
すると単体テストが成功します。
IntelliJ IDEAの設定
~/vue-jest-study
をIntelliJ IDEAで開きます。
Jest実行時に、テストの設定ファイルを読み込む必要があるので、以下の手順で設定します。
Run -> Edit Configurations で Run/Debug Configurations
を開き、
左下 Edit Configuration templates..
で、Run/Debug Configurations
を開きます。
左側ツリーから Jest
を選び、
Jest options
に --config test/unit/jest.conf.js
を指定します。
実際にテストを動かしてみます。
test/unit/specs/HelloWorld.spec.js
を開き、
ソースコード左側に表示されている「▶」からテストを実行します。
以上、
難しくは無いですが、
Jestのドキュメント側からシンプルなチュートリアルを見つけられなかったので、
メモとして残しておきます。