Karma.js, Headless Chrome and Docker

Today I’ve come back to frontend project I’m involved. I have no idea what have happened while I was away for different things but our Karma.js tests stop working.

The project is done with Vue.js and it becomes for some reason impossible to pass slots to the components as strings. Well. And there was error message suggesting to use Puppeteer instead.

And here is a short snippet to how actually do that. Quick notice, I run my tests inside Docker container…

1. remove Phantomjs from your package.json

2. add dependencies to puppeteer and karma-chrome-launcher

3. update karma.conf.js according to the snippet below

	const webpackConfig = require('../../build/webpack.test.conf');
	process.env.CHROME_BIN = require('puppeteer').executablePath();
	module.exports = function (config) {
	config.set({
	// to run in additional browsers:
	// 1. install corresponding karma launcher
	// http://karma-runner.github.io/0.13/config/browsers.html
	// 2. add it to the `browsers` array below.
	browsers: ['Chrome_no_sandbox'],
	customLaunchers: {
	Chrome_no_sandbox: {
	base: 'Chrome',
	flags: [
	'--no-sandbox',
	'--disable-setuid-sandbox',
	'--headless',
	'--disable-gpu',
	'--remote-debugging-port=9222',
	],
	},
	},
	frameworks: ['mocha', 'sinon-chai'],
	reporters: ['spec', 'coverage'],
	files: ['./index.js'],
	preprocessors: {
	'./index.js': ['webpack', 'sourcemap'],
	},
	webpack: webpackConfig,
	webpackMiddleware: {
	noInfo: true,
	},
	client: {
	captureConsole: false,
	},
	coverageReporter: {
	dir: './coverage',
	reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }],
	},
	});
	};

view raw karma.conf.js hosted with ❤ by GitHub

	"puppeteer": "^0.13.0",
	"karma-chrome-launcher": "^2.2.0",

view raw package.json hosted with ❤ by GitHub

1. also Chrome requires some system libraries and doesn’t work on default nodejs Docker image. So, I’ve found geekykaran/headless-chrome-node-docker.

And after all that changes my tests are green again!