How to Run Karma Tests in a Docker Container

Last week, I started developing a CI platform for my company using Karma and Jasmine as testing frameworks.

Our software solutions are built in different Docker containers and Karma runs tests in a browser. How do you launch a browser in a Docker container that has no graphic acceleration?

Here's the answer.

If your JavaScript code does not contain any ES5 or ES6 features, you can use PhantomJS as a testing browser.

PhantomJS runs as a background task with no graphical interface.

// karma.conf.js
module.exports = function(config) {
  config.set({
    browsers: ['PhantomJS', 'PhantomJS_custom'],

    // you can define custom flags
    customLaunchers: {
      'PhantomJS_custom': {
        base: 'PhantomJS',
        options: {
          windowName: 'my-window',
          settings: {
            webSecurityEnabled: false
          },
        },
        flags: ['--load-images=true'],
        debug: true
      }
    },

    phantomjsLauncher: {
      // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
      exitOnResourceError: true
    }
  })
}

If you are using ES5 or ES6 (which is very likely), then you should use a real browser like Chrome or Firefox. These browsers need graphical acceleration, which is not available in a Docker container.

The trick is to launch the X virtual frame buffer (Xvfb), which emulates an X11 display so that the browser can execute its GUI code

Here's an example in a Centos Docker container:

yum -y install Xvfb libXfont Xorg chromium #install X* packages and chromium
/usr/bin/Xvfb :99 & #run Xvfb in background
export DISPLAY=:99.0 #export the display environment var

Your Karma config file should look like this:

module.exports = function(config) {
  config.set({
    browsers: ['Chrome'],
    customLaunchers: {
      Chrome_without_sandbox: {
        base: 'Chrome',
        flags: ['--no-sandbox'] // with sandbox it fails under Docker
      }
    },
    ...
  });
};