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`

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

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

Tests	Skipped	Failures	Errors	Time
6	0 💤	0 ❌	0 🔥	1.032s ⏱️

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