Testing javascript in a Chrome using Karma, Mocha and Chai inside a Docker container

3 min August 24, 2018

A few days ago I needed to create unit tests for my javascript code. After a several hours of searching i finally found out how to do so and in this article I will show you how did I did that.

Testing javascript in a Chrome using Karma, Mocha and Chai inside a Docker container

I got inspired by this article Automated testing with Headless chrome.

The only one problem was, how to run that in a Docker Container. There are two suitable options on how to run the Chrome and Karma tests in a Docker Container. One of them is the Puppeteer from Google and the second one is using Selenium images.

If you decide to use the Puppeteer then you should know that it is not simple as it looks.

I decided to use the selenium/standalone-chrome image. This image can be used without any other dependencies. The only disadvantage is the size of the image (about 1 GB).

Directory structure

The directory structure for this example is the following.


- Dockerfile
- docker-compose.yml
=> www
    - package.json
    - karma.conf.js
    => tests
        - test.js

Chrome Image

You need to install the node and the npm. The final Dockerfile after a little upgrade looks like this (if you would like to run tests in the Firefox you can use the selenium/standalone-firefox image).

Dockerfile


FROM selenium/standalone-chrome

# User must be set to root if you want to install something inside the selenium image
USER root

# Install npm
RUN apt-get update && apt-get install -y gnupg2 &&\
    curl -sL https://deb.nodesource.com/setup_10.x | bash - &&\
    apt-get install -y nodejs npm build-essential &&\
    npm install -g [email protected] &&\
    npm install -g n  &&\
    n stable

RUN node -v && npm -v

# See https://github.com/nodejs/node-v0.x-archive/issues/3911#issuecomment-8956154
RUN ln -s /usr/bin/nodejs /usr/bin/node

docker-compose.yml


version: '3'
services:
    tester:
        container_name: karma-example
        working_dir: /var/www
        build: .
        volumes:
            - ./www:/var/www

Karma configuration

The configuration is almost the same like in the article mentioned above except for a few modifications.


module.exports = function(config) {
	config.set({
		frameworks: ['mocha', 'chai'],
		files: [
			'tests/test.js',
		],
		plugins: [
			'karma-chrome-launcher',
			'karma-chai',
			'karma-mocha'
		],
		reporters: ['progress'],
		port: 9876,
		colors: true,
		logLevel: config.LOG_INFO,
		autoWatch: false,
		concurrency: Infinity
	})
};

In case you need to load some files into the browser for example for mocking you need to add a path to those files and add the proxies configuration.


module.exports = function(config) {
	config.set({
	    ...
        files: [
		    ...
			{pattern: 'tests/data/**/*.json', watched: false, served: true, included: false},
		],
		proxies: {
			'/data/': 'http://localhost:9876/base/tests/data/'
		},
        ...
	})
};

NPM dependencies and scripts

package.json


{
  "scripts": {
    "tests": "karma start --single-run --browsers Chrome karma.conf.js"
  },
  "devDependencies": {
    "chai": "^4.1.2",
    "karma": "^3.0.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "mocha": "^5.2.0"
  }
}

The test file

test.js


describe('Array', () => {
	describe('#indexOf()', () => {
		it('should return -1 when the value is not present', () => {
			assert.equal(-1, [1,2,3].indexOf(4));
		});
	});
});

Running the tests

First of all we need to build the Docker image and start the container.


docker-compose up -d

Then is necessary to install the npm dependencies.


docker-compose exec tester npm i

Finally we can run tests.


docker-compose exec tester npm run tests

Enjoy unit testing!