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 を作成する。
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 にカバレッジを渡す設定を追加する。
- 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