CircleCI の TestSummary に ESLint やテストの結果を表示するように設定してみた

レビュー時に ESLint でチェック可能な指摘を行い、それの修正をしてもらう・・・
そんな時間の手間を省いて、みんなが幸せになるために CircleCI で ESLint を実行するように設定してみました。

設定方法についてはこちらを参考にしました。

ESLint の結果を表示させる

circle.yml への設定追加のみでそのまま出来ました。

// circle.yml
test:
  pre:
    - mkdir -p $CIRCLE_TEST_REPORTS/reports
    - eslint spec src --format=junit --output-file $CIRCLE_TEST_REPORTS/reports/eslint-spec.xml

CIRCLE_TEST_REPORTS は CircleCI で使用可能な環境変数で、上記のように設定することで CircleCI の画面上から結果のファイルを確認できるようになります。

f:id:fanjia:20170706124226p:plain

ちなみにエラー時はこのように表示されます。

f:id:fanjia:20170706124238p:plain

テストの実行結果を表示させる

テスト対象が増え、エラーになった際にその内容を見るのにスクロールが非常に長くなってしまったので設定してみました。
ESLint の設定追加と比べてやることが多かったです。

今回は karma-junit-reporter を使用するため、パッケージに追加します。

npm install -D karma-junit-reporter

テストの設定を上書きし、 --reporters junit の設定を追加します。

// circle.yml
test:
  override:
    - karma start --grep '' --reporters junit

こちらも ESLint と同様に結果を CIRCLE_TEST_REPORTS の中に格納するようにします。
ただし、ローカル環境で実行すると CIRCLE_TEST_REPORTS が undefined となるため、それに対応するため reportDir に出力先のパスを設定します。

// karma.conf.js
const reportDir = process.env.CIRCLE_TEST_REPORTS || '.';

reporters: ['junit'],

junitReporter: {
  outputDir: `${reportDir}/reports`,
  outputFile: 'test-results.xml',
  useBrowserName: false
},