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

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 --config='{ "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/[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

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