CircleCI meets Create React App meets Jest

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.

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.

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).