Preview Jest snapshots right in your browser. Compatible with Jest 17 and higher
- Preview of React component snapshots in your browser (snapshots and browser devtools, yay!).
- Compatible with non-React snapshots as well.
- Snapshot diffing (both HTML and raw) and visible indicators that a descendant suite or snapshot has changed.
- Custom CSS stylesheets applicable to all snapshots or individual ones.
- Intuitive navigation through folders, snapshot suites, and even snapshot groups within a suite.
- Real-time updates whenever a snapshot or CSS file changes.
- Quickly toggle between the raw snapshots and the HTML previews.
jest-html to your development dependencies:
$ npm install --save-dev jest-html# or if you use yarn:$ yarn add jest-html --dev
Add the following configuration to your
jest-html to your
snapshotSerializers, HTML previews will be automatically appended to React component snapshots the next time you update them (
To review your snapshots, run
npm run jest-html (
yarn run jest-html). This launches your default browser and opens the
To see all CLI options, run
Usage: jest-html [options] Options: -h, --help output usage information -V, --version output the version number -f --snapshot-patterns [globs] Glob patterns for snapshot files (comma-separated) -c --css-patterns [globs] Glob patterns for CSS stylesheets that will be used for ALL snapshots (comma-separated) -p, --port [port] Initial port number to use (if unavailable, the next available one will be used) --no-watch Do not watch initially detected snapshot and css files
jest-html looks for snapshots under
**/*.snap,!node_modules/**/*, but you can change this using the
Adding custom CSS
jest-html allows the user to add custom CSS to all snapshots or individual ones.
snapshot.css file is present at your project root directory, it will be used for all snapshots. You can also modify this default via the
--css-patterns CLI option (takes glob patterns, the same as
CSS can also be added to particular snapshot suites, by including a
.css file in the same directory as the snapshot file. For example,
settings.js.css will add CSS to the co-located
Copyright (c) Guillermo Grau Panea 2016-now
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.