VueのCI環境を構築しようとした時に、参考にしたサイトの情報が古かったり、今となっては不要な作業が入っていたりしたので、最短の手順(2019/10/1時点)を残しておく。

ただ最短と言いながら、何を何のためにしているかが分かるようにTravisCI、Coverallsの連携部分は別々の手順としています。

環境

Windows 10
Node：12.2.0
npm：6.9.0
Vue CLI3.11.0
GitHub
TravisCI
Coveralls

0. 環境構築

は終わっている前提で進めます。

1. Vueプロジェクトを作成する

プロジェクトを作成したいフォルダにて、下記コマンドを実行する。

$ vue create [project-name]

Manually select features を選択する。
デフォルトだと記載されているようにテスト機能が含まれていない為。

Vue CLI v3.11.0
? Please pick a preset:    
  default (babel, eslint)  
> Manually select features

Babel、Linter / Formatterに加えて、Unit Testingを選択する。
※E2E Testingはお好みで選択してください。私は普段使わないので。

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: 
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 ( ) E2E Testing

ESLintの設定はお好みで。

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: 
> ESLint with error prevention only 
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

テストランナーはJestを選択。
※私がJestを使い慣れているだけなので

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: (Use arrow keys)
  Mocha + Chai
> Jest

package.json にBabelの設定を保存

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files
> In package.json

設定の保存はお好みで。
この設定をする事で、package.json に下記の設定が追加されている。

    "test:unit": "vue-cli-service test:unit"

試しに以下コマンドを実行してみると、テストが実行される。

$ npm run test:unit

> xxxxx@0.1.0 test:unit yyyyyy
> vue-cli-service test:unit

 PASS  tests/unit/example.spec.js
  HelloWorld.vue
    √ renders props.msg when passed (20ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.704s, estimated 5s
Ran all test suites.

GitHubに公開する

詳細は割愛。

2. TravisCIと連携する

TravisCI側の設定

GitHubアカウントでログインする。
設定画面で対象のリポジトリを連携対象にする。

テスト設定ファイルの作成する

プロジェクトルートに .travis.yml を作成する。

.travis.yml

language: node_js
node_js:
  - "12.2.0"

cache:
  directories:
    - node_modules

script:
  - npm run test:unit

GitHubにPushする

詳細は割愛。

3. Coverallsと連携する

TravisCI側の設定

GitHubアカウントでログインする。
設定画面(ADD REPO)で対象のリポジトリを連携対象にする。

※対象リポジトリが表示されない場合は、「SYNC REPOS」を押してみる。

coverallsライブラリを追加する

下記コマンドを実行する。

$ npm install --save-dev coveralls

Jestでカバレッジをとる設定を追加する

package.json に collectCoverage、collectCoverageFrom の設定を追加する。

  "jest": {


    "collectCoverage": true,
    "collectCoverageFrom": [
      "<rootDir>/src/**/*.{js,vue}",
      "!**/node_modules/**"
    ]
  }

余談だが、この設定を追加する事で、npm run test:unitを実行すると、カバレッジが出力されるようになる。

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |      100 |        0 |        0 |                   |
 App.vue  |        0 |      100 |      100 |        0 |                 9 |
 main.js  |        0 |      100 |        0 |        0 |         1,2,4,6,7 |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.183s
Ran all test suites.

テスト設定ファイルを変更する

.travis.yml にカバレッジを渡す設定を追加する。

.travis.yml

  - npm run test:unit && cat ./coverage/lcov.info | ./node_modules/.bin/coveralls

GitHubにPushする

詳細は割愛。

4. README.mdにバッチを表示する。

詳細は割愛。
他のサイトを参考にしてください。

参考サイト

https://knowledge.sakura.ad.jp/3754/
https://chaika.hatenablog.com/entry/2019/07/18/083000