chai-karma-snapshot

Chai Plugin for Snapshot Testing with Karma

Snapshot Serialization

This plugin is using the same serialization module that is used in Jest library.

Usage Example

$ npm install karma karma-webpack karma-sourcemap-loader karma-snapshot karma-mocha \
              karma-mocha-snapshot karma-mocha-reporter karma-chrome-launcher mocha \
              chai chai-karma-snapshot webpack --save-dev

Karma configuration:

// karma.conf.js
const webpack = require("webpack");

module.exports = function (config) {
  config.set({
    browsers: ["ChromeHeadless"],
    frameworks: ["mocha", "snapshot", "mocha-snapshot"],
    reporters: ["mocha"],
    preprocessors: { "__tests__/index.js": ["webpack", "sourcemap"] },
    files: ["__tests__/index.js"],

    colors: true,
    autoWatch: true,

    webpack: {
      plugins: [
        new webpack.SourceMapDevToolPlugin({
          test: /\.js$/,
        }),
      ],
      performance: {
        hints: false
      },
    },

    webpackMiddleware: {
      stats: "errors-only",
      noInfo: true
    },

    snapshot: {
      update: !!process.env.UPDATE,
    },

    mochaReporter: {
      showDiff: true,
    },

    client: {
      mocha: {
        reporter: "html",
        ui: "bdd",
      }
    },
  });
};

Test file:

// __tests__/index.js
import { use, expect } from "chai";
import { matchSnapshot } from "chai-karma-snapshot";
use(matchSnapshot);

it("check snapshot", () => {
  expect("Hello World").to.matchSnapshot();
});

Run tests:

$ karma start

Update snapshots:

$ UPDATE=1 karma start --single-run