Hapijs with react client — part 2 CI and coverage

From https://github.com/sindresorhus/got

In this part, I’ll be setting up a build in TravisCI and code coverage with Coveralls for both client (react) and server projects (nodejs).

Fixing hapi build after adding client libraries

If you try running `yarn test` after adding react app, the build will likely fail due to a large number of files. Linter that comes with hapi — eslint is trying to analyze node_modules for the client app. That can be fixed by adding .eslintignore file.

node_modules/*
test/artifacts/*
client/**

Travis CI

I love Travis for how simple it is to use (and free for open source — who doesn’t like free?!).

If you have a standard project, where dependencies are pulled by yarn and tests executed by yarn test, it’s enough to just add simple .travis.yml file:

sudo: false
language: node_js
node_js:
  - 8

push to github and enable the build on https://travis-ci.org/.

Code coverage — server

Hapi template comes with `yarn test-cover` script that produces a nice HTML report, if you want to report coverage result reported up to CI, you need to have it in lcov format. An easy way of getting it done is using nyc (Istambul).

istanbuljs/nyc

First, we need to add the dependency:

yarn add nyc --dev

and configure the coverage script:

"scripts": {
      ....
      "nyc": "nyc yarn test && nyc report --reporter=lcovonly",
},

CI build for both client and server

In the previous post we defined the script for testing the client:

"test-ci": "CI=true react-scripts test --env=jsdom --coverage --reporters=default",

Now we can combine server and client one and update .travis.yml file:

language: node_js
node_js:
  - 8
 script:
  - yarn build
  - yarn nyc
  - cd client && yarn test-ci

That’s going to get dependencies for both projects, build the client assets and run tests with coverage for both.

We can include build status badge in our readme file:

[![Build Status](https://travis-ci.org/karpikpl/hapi-with-react-socketio.svg?branch=master)](https://travis-ci.org/karpikpl/hapi-with-react-socketio)

Merging coverage files

After we run the build, we’re going to get 2 coverage files:

• ./client/coverage/lcov.info
• ./coverage/lcov.info

Unfortunately, coveralls or any other code coverage UI tool doesn’t support multiple files, so we have to merge them. Lcov-result-merger to the rescue!

mweibel/lcov-result-merger

We’re going to add scripts to .travis.yml since they are more build than project specific. Updated file:

language: node_js
node_js:
  - 8
 script:
  - yarn build
  - yarn nyc
  - cd client && yarn test-ci
  - cd ..
 after_script:
  - cp ./client/coverage/lcov.info ./coverage/lcov_1.info
  - mv ./coverage/lcov.info ./coverage/lcov_2.info
  - ./node_modules/.bin/lcov-result-merger './coverage/lcov_*.info' './coverage/coverage_merged.log'

When after_script is executed on Travis, we should have nice and shiny coverage_merged.log file to upload.

Integration with coveralls

Go to https://coveralls.io/ and enable your repository

coveralls.io

Grab token and save it in travis build as a coveralls_repo_token variable

Now the last thing we need to do is to upload coverage_merged.log to coveralls. There’s a project that can help with that

nickmerwin/node-coveralls

We need to get that dependency using yarn add coveralls --dev and modify package.json

"scripts": {
    "nyc": "nyc yarn test && nyc report --reporter=lcovonly",
    "coveralls": "cat ./coverage/coverage_merged.log | coveralls"

We also need to tell travis to run it and use our environment variable:

after_script:
  - cp ./client/coverage/lcov.info ./coverage/lcov_1.info
  - mv ./coverage/lcov.info ./coverage/lcov_2.info
  - ./node_modules/.bin/lcov-result-merger './coverage/lcov_*.info' './coverage/coverage_merged.log'
  - COVERALLS_REPO_TOKEN=$coveralls_repo_token yarn coveralls

We can add a coverage badge from coveralls to our readme and done!

Tweaking react app coverage

Coverage for the react app is not great — 8%, that’s because of the pre-generated service worker file. We can exclude it from coverage to get better (real) coverage result by adding jest settings in client’s package.json.

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/registerServiceWorker.js",
      "!<rootDir>/node_modules/"
    ]
  },

Sources

As with the previous part, sources for this tutorial can be found here:

karpikpl/hapi-with-react-socketio