Skip to content

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

License

Notifications You must be signed in to change notification settings

timdsnap/jest-coverage-comment

 
 

Repository files navigation

Jest Coverage Comment

Auto Updating Bagde licience 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 been run by another action already (npx jest).

Similar Action for Pytest


I made this action after I see that similar action for python that runs pytest became very popular 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 for auto-update bagdes in readme.
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-sumamry.json

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 badge on README.md without commits to repo (see the live workflow)

name: Update Coverage on Readme
on:
  push:

jobs:
  update-coverage-on-readme:
    name: Update Coverage on 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 Percantage - ${{ 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.0.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

image

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

image

- 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

image

- 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)

image

- 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).

    image

- 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 will update your README.md with coverage summary, only on merge to main branch All you need is to add in your README.md the following lines wherever you want. If your coverage summary report will not change, it wouldn't push any changes to readme file.

<!-- Jest Coverage Comment:Begin -->
<!-- Jest Coverage Comment:End -->
name: Update Coverage on Readme
on:
  push:
    branches:
      - main
jobs:
  update-coverage-on-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 to Readme
        if: ${{ github.ref == 'refs/heads/main' }}
        uses: actions-js/push@master
        with:
          message: Update coverage on Readme
          github_token: ${{ secrets.GITHUB_TOKEN }}

Badges colors

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 on README

If you want auto-update the coverage badge on your Readme, you can see the workflow Auto Updating Bagde

🤝 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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 54.3%
  • HTML 34.4%
  • JavaScript 7.2%
  • CSS 4.1%