{
  "$type": "site.standard.document",
  "path": "/adding-coverage-reports/",
  "publishedAt": "2017-10-14T12:27:28.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "travis-ci",
    "continuous-integration",
    "coveralls-io",
    "javascript",
    "react"
  ],
  "textContent": "[Image: Screen-Shot-2017-10-14-at-8.26.50-AM.png]\n\nIn my last post, we covered creating a CI pipeline using TravisCI and GitHub Pages. Now let's add coverage reports to the build setup.\n\nSetting up Coveralls.io\n\nWe will use coveralls.io to provide the reporting. They provide this for free to any public GitHub project. Head over to their site and create an account. After setting navigate to 'Add Repos' and toggle it to on for your project.\n\n[Image: Screen-Shot-2017-10-14-at-8.05.57-AM.png]\n\nNow hit 'details' to get the token for this repo. You can ignore the instructions shown here. You just want to token. They don't apply to a project built with react-create-app.\n\n[Image: Screen-Shot-2017-10-14-at-8.11.24-AM.png]\n\nSetting up TravisCI\n\nYour token is private and you shouldn't check it into a public repo. So we will use TravisCI's build settings to pass it into our build system. This way the token remains secure.\n\n[Image: Screen-Shot-2017-10-14-at-8.13.21-AM.png]\n\nAdding Coveralls to your project\n\nYou'll need to bring in the coveralls package.\n\n[Code block]\n\nProject configuration changes\n\nNow we need to make a few tweaks to the project files. First, let's make sure coverage gets ran with each build and that we upload the report to TravisCI.\n\nAdd a new target to packages.json that defines a coveralls task to parse the coverage files.\n\n[Embedded code (GitHub Gist)]\n\nThis is done in .travis.yml. We will make two changes. The first tells the tests to include coverage reporting, the second uploads the coverage report after each build.\n\n[Embedded code (GitHub Gist)]\n\nNow commit and push these changes to GitHub. Once your build has completed you should see your first coverage report in Coveralls.io!\n\nThere you have it, now every new build includes a coverage report. You can even take the badge generated in coveralls and add it to your projects README.md.\n\nYou can see this setup in action here: https://github.com/brookslyrette/react-sudoku-solver\n\nIf you have any questions please leave them in the comments below. Happy Coding!\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/adding-coverage-reports/",
  "title": "Adding coverage reports to a React Create App using Coveralls.io"
}