mocha-css

A mocha stylesheet for the HTML reporter that let you append visual tests

In the screenshot below the h1 element doesn't have the original mocha.css style applied.

You have to make sure to reset the font property on your visual test container. eg: If you apply the class test-dom-container to all of them, You'll have to add this CSS snippet:

.test-dom-container {
  font: initial;
}

Installation

NPM

npm install --save-dev mocha-css

Usage

Simply replace the mocha.css file you're importing with this one

Webpack

// es6
import 'mocha-css'
// commonjs
require('mocha-css')
// with loader query
import 'style-loader!css-loader!mocha-css'

CDN

<link href="https://unpkg.com/mocha-css" rel="stylesheet" />

What is visual testing?

Visual testing consists in seeing what your tests are doing. This is useful when authoring a UI component library because you always want to check what your component looks like.

Resources

• Visual TDD and awesome documentation