Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
110 lines (77 sloc) 5.45 KB

+++ title = "How to set up JavaScript Test Coverage" description = "Learn how to set up test coverage with Coveralls for your JavaScript project. In this tutorial, we will use Travis CI to set up testing coverage with Coveralls.io ..." date = "2019-07-20T13:56:46+02:00" tags = ["React", "JavaScript", "Tooling", "Webpack", "Babel"] categories = ["React", "JavaScript", "Tooling", "Webpack", "Babel"] keywords = ["javascript test coverage", "javascript test coverage jest"] news_keywords = ["javascript test coverage", "javascript test coverage jest"] hashtag = "#JavaScript" card = "img/posts/javascript-test-coverage/banner_640.jpg" banner = "img/posts/javascript-test-coverage/banner.jpg" contribute = "javascript-test-coverage.md" headline = "How to set up JavaScript Test Coverage"

summary = "Learn how to set up test coverage with Coveralls for your JavaScript project. In this tutorial, we will use Travis CI to set up testing coverage with Coveralls.io." +++

{{% sponsorship %}}

{{% pin_it_image "javascript test coverage" "img/posts/javascript-test-coverage/banner.jpg" "is-src-set" %}}

{{% read_before "This tutorial is part 2 of 2 in the series." "Part 1:" "How to set up Continuous Integration for JavaScript" "https://www.robinwieruch.de/javascript-continuous-integration/" %}}

{{% read_before_2 "This tutorial is part 3 of 3 in the series." "Part 1:" "How to set up React with Webpack and Babel" "https://www.robinwieruch.de/minimal-react-webpack-babel-setup/" "Part 2:" "How to test React components with Jest" "https://www.robinwieruch.de/react-testing-jest" %}}

Coveralls is used to show you the test coverage of your JavaScript application. Let's see how it can be used for your JavaScript project which is already on GitHub and connected to your Travis CI due to the previous CI setup tutorial. First, sign up at {{% a_blank "Coveralls.io" "https://coveralls.io/" %}} with your GitHub account. Second, synchronize your GitHub repositories and toggle a specific repository to be used for code coverage.

{{% pin_it_image "testing coverage" "img/posts/javascript-test-coverage/react-coveralls-testing-coverage.jpg" "is-src-set" %}}

Afterward, hit the "Details" button to copy your coveralls_repo_token to your clipboard. Since you don't want to add this private token directly to your public project, you can add it on your Travis CI dashboard to your repository's environment variables. You will find it via the settings option of your Travis repository.

{{% pin_it_image "testing coveralls environment variables" "img/posts/javascript-test-coverage/react-travis-settings.jpg" "is-src-set" %}}

Then, create a new environment variable for your project. You can name it coveralls_repo_token:

{{% pin_it_image "testing travis continuous integration" "img/posts/javascript-test-coverage/react-travis-environment-variables.jpg" "is-src-set" %}}

Last but not least, modify your project the following way. First, install the coveralls library on the command line to your dev dependencies:

{{< highlight javascript >}} npm install --save-dev coveralls {{< /highlight >}}

Second, add a new script to your package.json file to introduce Coveralls to it:

{{< highlight javascript "hl_lines=4" >}} "scripts": { "start": "webpack-dev-server --config ./webpack.config.js --mode development", "test": "jest --config ./jest.config.json", "coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls" }, {{< /highlight >}}

And third, extend your Travis CI configuration for reporting the coveralls information to your coveralls.io dashboard.

{{< highlight javascript "hl_lines=10 12 13" >}} language: node_js

node_js:

  • stable

install:

  • npm install

script:

  • npm run test -- --coverage

after_script:

  • COVERALLS_REPO_TOKEN=$coveralls_repo_token npm run coveralls {{< /highlight >}}

That's it. By adding, committing and pushing your changes to GitHub now, you can see how a report shows up on your Coveralls.io dashboard.

{{% pin_it_image "testing travis continuous integration" "img/posts/javascript-test-coverage/react-testing-coveralls-reporting.jpg" "is-src-set" %}}

Perhaps you can see that the coverage isn't too high. Then it's up to you the add tests to increase the percentage for your project.

Last but not least, you can add the fancy Coveralls badge to your GitHub's README.md file. You find the badge on the Coveralls dashboard for embedding it as markdown:

{{< highlight javascript >}}

My JavaScript Project

Coverage Status {{< /highlight >}}

Make sure to change the URL to your repository's URL.

If you are using Jest as a test runner, you can enforce a certain coverage for your JavaScript project. Also you can include and exclude specific folders/files from your source code to be added/removed from your testing coverage report:

{{< highlight javascript "hl_lines=3 4 5 6 7 8 9 10 11 12" >}} module.exports = { ... coverageThreshold: { global: { functions: 95, lines: 95 } }, collectCoverageFrom: [ '/src//*.js', '!/src/pages//*.js' ] }; {{< /highlight >}}

That's everythin in a nutshell about testing coverage in JavaScript projects.

{{% read_more "How to test React components with Jest" "https://www.robinwieruch.de/react-testing-jest/" %}}

{{% read_more "How to end-to-end test React components with Cypress" "https://www.robinwieruch.de/react-testing-cypress/" %}}

You can’t perform that action at this time.