Karma Config: Web

Generates a Karma configuration for testing using Puppeteer.

---

Quickstart

The files option specifies the test files to run:

// karma.conf.js:
const getKarmaConfig = require('@wildpeaks/karma-config-web');

module.exports = function(config) {
	const karmaConfig = getKarmaConfig({
		files: 'src/**/*.spec.js'
	});
	config.set(karmaConfig);
};

You can also use several patterns:

// karma.conf.js:
const getKarmaConfig = require('@wildpeaks/karma-config-web');

module.exports = function(config) {
	const karmaConfig = getKarmaConfig({
		files: [
			'test/*.test.js',
			'src/**/*.spec.js'
		]
	});
	config.set(karmaConfig);
};

Use a Webpack 4 configuration to handle more filetypes:

// karma.conf.js:
const getKarmaConfig = require('@wildpeaks/karma-config-web');

module.exports = function(config) {
	const karmaConfig = getKarmaConfig({
		files: 'src/**/*.spec.js',
		webpack: {
			module: {
				rules: [
					//...
				]
			}
			// ...
		}
	});
	config.set(karmaConfig);
};

The Webpack Config Generator makes it easy to support Typescript, CSS, and images:

// karma.conf.js
const getKarmaConfig = require('@wildpeaks/karma-config-web');
const getWebpackConfig = require('@wildpeaks/webpack-config-web');

module.exports = function(config) {
	const webpackConfig = getWebpackConfig({
		mode: 'development',
		skipPostprocess: true
	});
	const karmaConfig = getKarmaConfig({
		files: 'src/**/*.spec.ts',
		webpack: webpackConfig
	});
	config.set(karmaConfig);
};

---

Additional browsers

The package only comes with Puppeteer (headless Chrome) because it's cross-platform and headless (so you don't see the browser opening and closing when Karma runs the tests).

However, Karma supports other browsers, such as:

• Firefox
• Internet Explorer
• Edge
• Safari

You can also use paid services like BrowserStack and Sauce Labs to run tests in a lot of desktop and mobile browsers.

Add additional launchers in the dependencies of your package.json, example:

{
	"devDependencies": {
		"karma-edge-launcher": "...",
		"karma-firefox-launcher": "...",
		"karma-ie-launcher": "..."
	}
}

Then use property browsers in karma.conf.js:

const getKarmaConfig = require('@wildpeaks/karma-config-web');

module.exports = function(config) {
	const karmaConfig = getKarmaConfig({
		files: 'src/**/*.spec.ts'
	});
	karmaConfig.browsers = ['ChromeHeadless', 'Firefox', 'IE', 'Edge'];
	config.set(karmaConfig);
};

---