It's been some time I didn't post anything at all. I'd like to try again, but in a different format (shorter, more concise: something I've never been that good at). I'd like to talk about what I've been doing this week at work, or at home, or on a train: anything code-related, basically. Sombody will hopefully find something interesting to know and read about.

We've eventually started thinking at unit testing the hell out of our new shiny React app. It's now a good time: MVP's over, and my laziness too.

I've tried to keep the app at a very basic level for the time being (read: I've used what I've found, with very few additions), aka: * create-react-app * React router * Redux, with redux-thunk as async middleware * Reselect * Storybook Plus a bunch of helper libraries like the moment, lodash.

I'm a data-driven person (that's just partially true: I'm more of a data/chart fetishist, to be honest), and I love being able to track progresses, find possible improvements, catch weird things happened in the past and make sure that they're not going to hit us back in the future.

So we got our CI server. CircleCI has been the chosen one. We also got CodeClimate. That's a fancy tool I'm fond of, due to its cool UI, and rather simple UX. Integrating these two sweeties has been fairly easy (didn't take more than two or three pomodoros, I swear). First things first, I headed to .circleci/config.yml.

Setup Code Climate test reporter

This first step is a rework of CodeClimate’s integration guide with CircleCI. It's simply a new step added at the jobs > build > steps level.

  - run:
    name: Setup Code Climate test reporter
    command: |
      curl -L > ./cc-test-reporter
      chmod +x ./cc-test-reporter

In order to run CodeClimate, you also need to provide the CC_TEST_REPORTER_ID environment variable. I've done that from CircleCI's project settings page since I prefer not committing my secrets.

Run the tests with coverage enabled

  - run:
    name: Unit tests with coverage
    command: |
      ./cc-test-reporter before-build
      npm run coverage
      ./cc-test-reporter after-build --exit-code $?
      JEST_JUNIT_OUTPUT: "coverage/junit/js-test-results.xml"

Would you like showing off a fancy list of errored/failed test on CircleCI as well?

  - store_test_results:
    path: coverage/junit

I suppose this can be added at any time after you've run the unit tests with coverage. I've kept it right after the run step.

Would you like to export these fancy html files generated by lcov? Keep on adding: - store_artifacts: path: coverage

Again, I've just followed CodeClimate's guide. Big difference is that npm run coverage between before-build and after-build scripts. Because I'm not just in love with data, and charts, but I also quite like using npm scripts.

Run tests with coverage

This part took some extra effort to get it right, but at the end it works amazingly well. First of all, CircleCI likes JUnit syntax a lot, although Jest doesn't have that sort of test results processor. That means we have to add a dependency to make the magic happen: npm install -D jest-junit.

Then, here's the npm script I've been using at the previous step: json // ... "scripts": { // ... "coverage": "react-scripts test --env=jsdom --coverage --testResultsProcessor ./node_modules/jest-junit", // ... } // ...

You can skip that --env=jsdom argument if you don't rely on browser-only global objects, like document and window (I have to have it because of some polyfills being loaded). Spoiler alert: it slows the test suite execution down relatively "a lot" (for this projects it's 10s with vs 3s without).


Final result on GitHub: Github and its sweet PR checks

And on CircleCI: CircleCI and its test summary report

Last but not least, CodeClimate: CodeClimate's code tab, sorted by coverage


1,021 0 1