Speed up Karma and Jasmine tests with ChromeHeadless

I'm working with Jasmine and Karma, because it is the default tool set for testing in Angular. It works but one downsize is the browser by default for tests runner.

The browser is a bit slow for running and in the CI it impacts time of executing, we can speed up our tests using ChromeHeadless and puppeter with karma.

Install packages

First install karma-chrome-launcher and puppeteer.

npm i -D puppeteer karma-chrome-launcher

Configure karma

Edit karma.conf.js and add the puppeter path and set the ChromeHeadless as default browser.

process.env.CHROME_BIN = require('puppeteer').executablePath()

module.exports = function (config) {
  config.set({
    ....
    browsers: ['ChromeHeadless'],
    ...
  });
};

Karma is ready to use ChromeHeadless from terminal.

dany@dany:~/Documents/danylab$ ng test
⠙ Generating browser application bundles (phase: building)...19 12 2020 22:48:06.285:WARN [karma]: No captured browser, open http://localhost:9876/
19 12 2020 22:48:06.289:INFO [karma-server]: Karma v5.1.1 server started at http://localhost:9876/
19 12 2020 22:48:06.289:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
19 12 2020 22:48:06.294:INFO [launcher]: Starting browser ChromeHeadless
✔ Browser application bundle generation complete.
19 12 2020 22:48:09.314:WARN [karma]: No captured browser, open http://localhost:9876/
19 12 2020 22:48:09.406:INFO [Chrome Headless 88.0.4298.0 (Linux x86_64)]: Connected on socket ipYKV7Bm7wf_o-d0AAAA with id 12690576
Chrome Headless 88.0.4298.0 (Linux x86_64): Executed 9 of 9 SUCCESS (0.166 secs / 0.13 secs)
TOTAL: 9 SUCCESS

That's it!

Hopefully, that will give you a bit of help with speed up your tests with Jasmine and Karma.

If you enjoyed this post, share it!