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);
};

---