/jest-coverage-comment

Comments a pull request or commit with the jest code coverage badge, full report and tests summary

Primary LanguageTypeScriptMIT LicenseMIT

Jest Coverage Comment

Coverage License Version WakaTime

This action comments a pull request or commit with a HTML test coverage report. The report is based on the coverage report generated by your Jest test runner. Note that this action does not run any tests, but expects the tests to have already been run by another action (npx jest).

Similar Action for pytest


I've made this action after I saw that similar action for python that runs pytest became very popular, see pytest-coverage-comment.


You can add this action to your GitHub workflow for Ubuntu runners (e.g. runs-on: ubuntu-latest) as follows:

- name: Jest Coverage Comment
  uses: MishaKav/jest-coverage-comment@main

Inputs

Name Required Default Description
github-token ${{github.token}} An alternative GitHub token, other than the default provided by GitHub Actions runner
coverage-summary-path ./coverage/coverage-summary.json The location of the coverage-summary of Jest
title '' Main title for the comment
summary-title '' Title for the coverage summary
badge-title Coverage Title for the badge icon
hide-summary false Hide coverage summary report
create-new-comment false When false, will update the same comment, otherwise will publish new comment on each run.
hide-comment false Hide the whole comment (use when you need only the output). Useful to auto-update badges in README file.
remove-links-to-files false Remove links to files (useful when summary-report is too big)
remove-links-to-lines false Remove links to lines (useful when summary-report is too big)
junitxml-path '' The location of the junitxml path (npm package jest-junit should be installed)
junitxml-title '' Title for summary for junitxml
coverage-path '' The location of the coverage.txt (Jest console output)
coverage-title Coverage Report Title for the coverage report
coverage-path-prefix '' Prefix for path when link to files in comment
report-only-changed-files false Show in report only changed files for this commit, and not all files
multiple-files '' You can pass array of json-summary.json files and generate single comment with table of results
Single line should look like Title1, ./path/to/json-summary.json
multiple-junitxml-files '' You can pass array of junit.xml files and generate single comment with table of results
Single line should look like Title1, ./path/to/junit.xml

Output Variables

Name Example Description
coverage 78 Percentage of the coverage, get from coverage-summary.json
color yellow Color of the percentage. You can see the whole list of badge colors
summaryHtml ... Markdown table with summary. See the output-example
tests 9 Total number of tests, get from junitxml
skipped 0 Total number of skipped tests, get from junitxml
failures 0 Total number of tests with failures, get from junitxml
errors 0 Total number of tests with errors, get from junitxml
time 2.883 Seconds the took to run all the tests, get from junitxml
lines 71 Lines covered, get from Jest text report
branches 100 Branches covered, get from Jest text report
functions 28 Functions covered, get from Jest text report
statements 100 Statements covered, get from Jest text report
coverageHtml ... Markdown table with coverage summary. See the output-example

Output Example

My Jest Coverage Comment

My Summary Title

Lines Statements Branches Functions
Coverage: 78%
76.74% (33/43) 33.33% (2/6) 100% (0/0)

My JUnit Title

Tests Skipped Failures Errors Time
6 0 💤 0 ❌ 0 🔥 1.032s ⏱️
My Coverage Title (78%)
File% Stmts% Branch% Funcs% LinesUncovered Line #s
All files76.7410033.3378.57 
src75.671004075.67 
   controller.js63.631005063.6314–18
   index.js85.71100085.719
   router.js100100100100 
   service.js69.231005069.2316–20
src/utils83.331000100 
   config.js100100100100 
   utils.js751000100 

Example Usage

The following is an example GitHub Action workflow that uses the Jest Coverage Comment to extract the coverage summary to comment at pull request:

# This workflow will install dependencies, create coverage tests and run Jest Coverage Comment
# For more information see: https://github.com/MishaKav/jest-coverage-comment/
name: Jest Coverage Comment
on:
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: |
          npx jest --coverage --coverageReporters json-summary

      - name: Jest Coverage Comment
        uses: MishaKav/jest-coverage-comment@main

Example GitHub Action workflow that uses coverage percentage as output and update the badge in README.md without commits to the repo (see the live workflow):

name: Update Coverage in README
on:
  push:

jobs:
  update-coverage-in-readme:
    name: Update Coverage in README
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Jest Coverage Comment
        id: coverageComment
        uses: MishaKav/jest-coverage-comment@main
        with:
          hide-comment: true
          coverage-summary-path: ./coverage/coverage-summary.json

      - name: Check the output coverage
        run: |
          echo "Coverage Percentage - ${{ steps.coverageComment.outputs.coverage }}"
          echo "Coverage Color - ${{ steps.coverageComment.outputs.color }}"
          echo "Summary HTML - ${{ steps.coverageComment.outputs.summaryHtml }}"

      - name: Create the badge
        if: github.ref == 'refs/heads/main'
        uses: schneegans/dynamic-badges-action@v1.6.0
        with:
          auth: ${{ secrets.JEST_COVERAGE_COMMENT }}
          gistID: 5e90d640f8c212ab7bbac38f72323f80
          filename: jest-coverage-comment__main.json
          label: Coverage
          message: ${{ steps.coverageComment.outputs.coverage }}%
          color: ${{ steps.coverageComment.outputs.color }}
          namedLogo: javascript

Example GitHub Action workflow that passes all params to Jest Coverage Comment:

- name: Jest Coverage Comment
  uses: MishaKav/jest-coverage-comment@main
  with:
    coverage-summary-path: ./coverage/coverage-summary.json
    title: My Jest Coverage Comment
    summary-title: My Summary Title
    badge-title: Coverage
    hide-comment: false
    create-new-comment: false
    hide-summary: false
    junitxml-title: My JUnit Title
    junitxml-path: ./coverage/junit.xml
    coverage-title: My Coverage Title
    coverage-path: ./coverage.txt

Example Comment

Example GitHub Action workflow that generate JUnit report from junit.xml:

  • You should install jest-junit package, and add the following entry in your Jest config jest.config.js:
{
  "reporters": ["default", "jest-junit"]
}
  • Or you can provide it directly to jest like jest --reporters=default --reporters=jest-junit:
- name: Jest Coverage Comment
  uses: MishaKav/jest-coverage-comment@main
  with:
    junitxml-path: ./junit.xml
    junitxml-title: JUnit

Summary Report

Generated from json-summary:

Summary Report

- name: Run tests
  run: |
    npx jest --coverage --reporters=default --reporters=jest-junit'

- name: Jest Coverage Comment
  uses: MishaKav/jest-coverage-comment@main
  with:
    coverage-summary-path: ./coverage/coverage-summary.json

Coverage Report

Generated from Jest output by writing the output to file | tee ./coverage.txt The nice thing, is that will link all your files inside that commit and ability to click by missing lines and go inside file directly to missing lines:

Coverage Report (Single File)

- name: Run tests
  run: |
    npx jest --coverage | tee ./coverage.txt

- name: Jest Coverage Comment
  uses: MishaKav/jest-coverage-comment@main
  with:
    coverage-path: ./coverage.txt

Example GitHub Action workflow that uses multiple files mode (can be useful on mono-repo projects):

Coverage Report (Multiple Files)

- name: Jest Coverage Comment
  uses: MishaKav/jest-coverage-comment@main
  with:
    multiple-files: |
      My-Title-1, ./coverage_1/coverage-summary.json
      My-Title-2, ./coverage_2/coverage-summary.json

JUnit Report

Generated from junit.xml by jest-junit:

  • If the elapsed time is more than 1 minute, it will show it in a different format (555.0532s > 9m 15s), the output format will be the same as junit.xml (555.0532s).

    JUnit Report (Single File)
- name: Run tests
  run: |
    npx jest --coverage --config='{ "coverageReporters": ["json-summary"] }'

- name: Jest Coverage Comment
  uses: MishaKav/jest-coverage-comment@main
  with:
    junitxml-path: ./junit.xml

Example GitHub Action workflow that uses multiple JUnit files mode (can be useful on mono-repo projects):

JUnit Report (Multiple Files)

- name: Jest Coverage Comment
  uses: MishaKav/jest-coverage-comment@main
  with:
    multiple-junitxml-files: |
      My-Title-1, ./coverage_1/junit.xml
      My-Title-2, ./coverage_2/junit.xml

Example GitHub Action workflow that will update your README file with coverage summary, only on merge to main branch. If your coverage summary report will not change, it wouldn't push any changes to the README file. All you need is to add the following lines in README.md wherever you want:

<!-- Jest Coverage Comment:Begin -->
<!-- Jest Coverage Comment:End -->
name: Update Coverage in README
on:
  push:
    branches:
      - main
jobs:
  update-coverage-in-readme:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token
          fetch-depth: 0 # otherwise, you will failed to push refs to dest repo

      - name: Jest Coverage Comment
        if: github.ref == 'refs/heads/main'
        id: coverageComment
        uses: MishaKav/jest-coverage-comment@main
        with:
          hide-summary: true
          coverage-summary-path: ./coverage/coverage-summary.json

      - name: Update README with Coverage HTML
        if: github.ref == 'refs/heads/main'
        run: |
          sed -i '/<!-- Jest Coverage Comment:Begin -->/,/<!-- Jest Coverage Comment:End -->/c\<!-- Jest Coverage Comment:Begin -->\n\${{ steps.coverageComment.outputs.summaryHtml }}\n<!-- Jest Coverage Comment:End -->' ./README.md

      - name: Commit & Push changes in README
        if: github.ref == 'refs/heads/main'
        uses: actions-js/push@master
        with:
          message: Update coverage in README
          github_token: ${{ secrets.GITHUB_TOKEN }}

Badge Colors

Badge Range
Coverage 0-40 0 - 40
Coverage 40-60 40 - 60
Coverage 60-80 60 - 80
Coverage 80-90 80 - 90
Coverage 90-100 90 - 100

Auto Updating Badge in README

If you want to auto-update the coverage badge in your README file, you can see the live workflow:

Auto Updating Badge

🤝 Contributing

PRs Welcome

We welcome all contributions. You can submit any ideas as pull requests or as GitHub issues and have a good time! :)

Our Contributors

Contributors