styleshots v0.3.0

Styleshots

styleshots generates automatic jest snapshots for your styles

Getting Started

Create a new test file and invoke styleshots with your configuration options.

// styleshots.spec.js
import styleshots from "styleshots";

styleshots({
  url: "http://fancy-app.com",
  projectName: "Fancy App",
  selectors: [
    ".fancy-className-1",
    "#fancy-element-id",
    {
      selector: ".fancy-hoverable-element",
      hover: true
    }
  ]
});

Then, run your jest test suites as normal. For example:

yarn jest styleshots.spec.js

Configuration

url

Url from which to extact style information

selectors

Array of selectors to snapshot. Each element in the array can be a string, or a configuration object with the following properties:

viewport

sets viewport of page. Defaults to width: 1280, height: 768 }.

debug

Log console output from url page