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
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 https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./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 $? environment: 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
Would you like to export these fancy html files generated by
lcov? Keep on adding:
Again, I've just followed CodeClimate's guide.
Big difference is that
npm run coverage between
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:
"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
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:
And on CircleCI:
Last but not least, CodeClimate: