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のドキュメント側からシンプルなチュートリアルを見つけられなかったので、
メモとして残しておきます。