Karma plugin for snapshot testing with mocha.

Downloads in past


0.2.17 years ago7 years agoMinified + gzip package size for karma-mocha-snapshot in KB


Karma Plugin for Snapshot Testing with Mocha

Snapshot Format

Snapshot can be stored in different formats. Right now there are two formats supported: md and indented-md.

Markdown Format

This format is preferred when you specify language for code blocks in an assertion plugin. With this format, code editors will automatically highlight syntax of code blocks.

Sub Suite

HTML Snapshot

  <span />

Indented Markdown Format

# `src/html.js`

## `Sub Suite`

####   `HTML Snapshot`

      <span />

Snapshot File Path

Snapshot file path is extracted from the name of the root suit cases and stored alongside with a tested files in a __snapshots__ directory.
Snapshot file path can be changed by providing a custom pathResolver in snapshot config.

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) {
    browsers: ["ChromeHeadless"],
    frameworks: ["mocha", "snapshot", "mocha-snapshot"],
    reporters: ["mocha"],
    preprocessors: {
      "**/__snapshots__/**/*.md": ["snapshot"],
      "__tests__/index.js": ["webpack", "sourcemap"]
    files: [

    colors: true,
    autoWatch: true,

    webpack: {
      devtool: "inline-source-map",
      performance: {
        hints: false

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

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

    mochaReporter: {
      showDiff: true,

    client: {
      mocha: {
        reporter: "html",
        ui: "bdd",

Source file:
// src/index.js

export function test() {
  return "Snapshot Test";

Test file:
// __tests__/index.js
import { use, expect } from "chai";
import { matchSnapshot } from "chai-karma-snapshot";
import { test } from "../src/index.js";

describe("src/index.js", () => {
  it("check snapshot", () => {

Run tests:
$ karma start

Update snapshots:
$ UPDATE=1 karma start --single-run