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:

| property | type | description | default | | ------------- | -------- | -------------------------------------------------------------------------- | -------------- | | selector | string | DOM selector to snapshot | n/a (required) | | hover | boolean | extracts styles for selector while element is hovered. | false | | active | boolean | extracts styles for selector while element is active. | false | | focus | boolean | extracts styles for selector while element is focused. | false | | allMatches | boolean | generates snapshot for all elements found that match selector. | false | | projectName | string | set the name of the project under test. Used for generating snapshot title | url |

viewport

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

debug

Log console output from url page