Jest Coverage Comment

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
unique-id-for-comment		''	When running in a matrix, pass the matrix value, so each comment will be updated its own comment unique-id-for-comment: ${{ matrix.node-version }}

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
	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	% Lines	Uncovered Line #s
All files	76.74	100	33.33	78.57
src	75.67	100	40	75.67
controller.js	63.63	100	50	63.63	14–18
index.js	85.71	100	0	85.71	9
router.js	100	100	100	100
service.js	69.23	100	50	69.23	16–20
src/utils	83.33	100	0	100
config.js	100	100	100	100
utils.js	75	100	0	100

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/[email protected]
        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 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:

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

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

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

  

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

- 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
	0 - 40
	40 - 60
	60 - 80
	80 - 90
	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:

🤝 Contributing

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

Our Contributors