簡記前後端如何實現統計測試覆蓋率

全世界最酷的李大廚發表於2019-04-17
後端

恰逢專案初起之時，程式碼基礎各部分都有待完善。第一天上專案發現前後端幾乎沒有測試，遂決定加個測試覆蓋率的限制。

前端

前端用的react, 測試用的jest。Jest是Facebook的一個專門進行Javascript單元測試的工具，適合React全家桶使用。因jest本身內建程式碼覆蓋率，便新建了**jest.config.json**來實現統計前端測試覆蓋率的需求。

{
  "collectCoverage": true,
  "coverageDirectory": "reports",
  "collectCoverageFrom": [
    "src/**/*.js",
    "!**/node_modules/**"
  ],
  "coverageReporters": [
    "clover",
    "html"
  ],
  "coverageThreshold": {
    "global": {
      "branches": 80,
      "functions": 80,
      "lines": 80,
      "statements": 80
    }
  },
  "moduleFileExtensions": [
    "js"
  ],
  "modulePaths": [
    "<rootDir>"
  ],
  "testRegex": "(/__tests__/.*|\\.test)\\.js$"
}

複製程式碼
  1. testRegex: 設定識別哪些檔案是測試檔案（正則形式），與testMatch互斥，不能同時寫
  2. moduleFileExtensions: 測試檔案的型別 moduleFileExtensions: ['js','json','jsx','node']
  3. rootDir: 預設值是當前目錄
  4. collectCoverage: 預設值false
  5. coverageDirectory: 輸出coverage report的目錄
  6. collectCoverageFrom: 可配置哪些檔案需要收集覆蓋率，哪些不需要
  7. coverageThreshold: 配置需要達到的測試覆蓋率的百分比

配置完jest.config.json之後，在package.json內配置

"scripts": {
    "test": "jest --config jest.config.json",
    "prepush": "npm run lint && git secrets --scan -r && npm run test"
 }
複製程式碼

當開發執行npm run test或git push時會執行測試以及統計測試覆蓋率。同時專案目錄reports/index.html可檢視測試覆蓋率的report. 如果測試覆蓋率沒有達到配置的百分比，則push會失敗。

front-test-coverage.jpg

WechatIMG679.png

後端

後端用的java gradle，測試是junit。一開始想的比較多，老想著在prepush的時候進行控制，在spike解決統計測試率的時候沒能正確的拆分task，導致花了比較長的時間去spike。後經指點，重點去尋找統計java測試覆蓋率的方法。發現jacoco可以實現並且滿足我的需求。

JaCoCo（Java Code Coverage）是一種分析單元測試覆蓋率的工具。很多第三方的工具提供了對Jacoco的整合，如Jenkins等。使用它可以給出程式碼中哪些部分被單元測試測到，哪些部分沒有沒測到，並且給出整個專案的單元測試覆蓋情況百分比。

統計測試覆蓋率

首先因使用的gradle，所以需要在build.gradle下面引入jacoco，並進行一系列配置。

apply plugin: 'jacoco'

jacocoTestReport {
    reports {
        xml.enabled false
        html.enabled true
    }
}

複製程式碼

輕鬆配置完之後愉悅的執行./gradlew jacocoTestReport，完美的在build/jacoco/test/html/index.html看見了測試覆蓋率的report

WechatIMG680.png

提交！

上jenkins一看 build掛了！

在執行TASK:test的時候報錯Caused by: java.lang.NoSuchFieldException: $jacocoAccess，但本地執行良好。懷疑是jacoco根本沒被下載下來。尋覓許久，發現jacoco有個issue是跟jdk11不能友好合作。而我們恰好用的就是jdk11和jacoco0.7.。github.com/vaskoz/core…

jacoco已經在0.8.2的版本中修復了這個問題：github.com/jacoco/jaco…

所以在我們的build.gradle中需要配置jacoco的版本就能解決。修改後：

apply plugin: 'jacoco'

jacoco {
    toolVersion = "0.8.2"
}

jacocoTestReport {
    reports {
        xml.enabled false
        html.enabled true
    }
}
複製程式碼

整合jenkins

我想要在jenkins上也能看見測試覆蓋率的report，所以需要修改jenkinsfile.

stage('build') {
    agent {
        docker {
          image 'echohe/gradle'
          args '-v $HOME/.gradle:/root/.gradle -e JAVA_TOOL_OPTIONS="-Dfile.encoding=UTF8"'
        }
    }
    steps {
        sh 'gradle build '
        script {
            echo "Stage test coverage report starting: ====="
            try {
              timeout(time:25, unit:'MINUTES') {
                sh './gradlew jacocoTestReport'
              }
            } finally {
              if (fileExists('./build/reports/jacoco/test/html/index.html')) {
                echo '==== test coverage report exists, prepare to publish'
                publishHTML(target: [
                  allowMissing: true,
                  alwaysLinkToLastBuild: false,
                  keepAll: false,
                  reportDir: 'build/reports/jacoco/test/html/',
                  reportFiles: 'index.html',
                  reportName: 'test coverage report',
                  reportTitles: 'test coverage report']
                )
              } else {
                echo '==== test coverage report does NOT exists!!!'
              }
              echo "build state: ${currentBuild.result}"
              sh 'rm -rf ./build/reports/jacoco'
            }
        }
    }
}
複製程式碼

這樣在jenkins的build stage就能生成測試覆蓋率的report，並且使用了publishHTML，就能在jenkins上出現測試覆蓋率的link，點選之後會顯示./build/reports/jacoco/test/html/index.html的內容。

WechatIMG684.png

相關文章