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