• Figures and factsEven if I am pretty convinced by full plugin architectures like the Karma one, the drawback on the Karma configuration is obvious: 35 lines of code, not trivial for the Karma configuration against 4 lines in package.json for Jest.
• For the execution of all tests once without coverage, Karma takes 47s in total.
• A final but important point is that with the stack Karma / Webpack / Babel we have never figured out a good solution to have a robust source-mapping in JavaScript stack traces.
• Jest is far more straightforward, The error reports are just perfect with only references to our Babel source code et good line numbers.
• Configuration, performances and features are really good in Jest and the “Developer eXperience” is better than with Karma.

@K0YCHEV: “Testing an AngularJS app with Jest” by @Swiip #reactjs #angularjs #javascript #testing

I will not try to write the ultimate guide to test an AngularJS app with Jest, this article is only my feedback after trying Jest on my project.

TL;DR It works pretty well 

First, let me add some context. I was a huge AngularJS fan and slowly drifted to React. That’s probably why I was aware of Jest and wanted to try it. Still, my biggest ongoing project uses AngularJS, it’s the member part of the new data exchange plateforme: Dawex (https://www.dawex.com/)

Also, I’m one of the developers of the Yeoman Fountain generator (fountainjs.io) and as such, pretty familiar with the use and configuration of new Web tooling.

The app is, I think, a pretty modern AngularJS app. It’s fully component oriented with AngularJS 1.5.x and uses NPM, Webpack and Babel for tooling. We even added some new stuff like RxJS and Redux.

The test environment is based on Karma and Jasmine. We use the karma-webpack plugin and tests are running in Chrome since we encountered some problems with PhantomJS.

Tests work with watching mode and coverage but there are some pain points remaining. The test bootstrap is very slow as Webpack has to build the whole bundle. Then, it starts a real Chrome (which need the xvfb trick on CI) and we didn’t find a way to have proper source-mapping (through Babel / Webpack / Karma) for proper error stacktraces. Finally but perhaps the most important, the…