Jest Snapshots Book

Jest custom reporter that builds html book of snapshots
Alternatives To Jest Snapshots Book
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Learning React3,311
3 months ago115JavaScript
The code samples for Learning React by Alex Banks and Eve Porcello, published by O'Reilly Media
Mastering React Test Driven Development111
a year ago5mit
Mastering React Test-Driven Development, published by Packt
Ngxs Example App33
2 years ago7mitTypeScript
(A port of ngrx-example-app) This app is a book collection manager. The user can authenticate, use the Google Books API to search for books and add them to their collection.
Awesome Address Book18
2 years agomitTypeScript
This project shows a basic address book built with ReactJS, Redux Toolkit and Typescript 📖
Eloquent Js18
5 years agoJavaScript
Homework problems/examples from book "Eloquent JavaScript." Tests are in Jest.
The Art Of Unit Testing13
5 years agomitJavaScript
Repository that contains code in Node.js from the book The Art of Unit Testing, Second Edition by Roy Osherove
React Mybooks12
6 years agomitJavaScript
MyBooks 📚 is a bookshelf app that allows users to select and categorize books they have read, are currently reading, or want to read
Bookstore Cms12
3 years agoJavaScript
A Bookstore CMS made with React-Redux. Tested with Jest.
2 months agoCoq
Źródła mojej książki o Coqu, programowaniu funkcyjnym, teorii typów, logice konstruktywnej i innych takich.
Shuwa Frontend Book App8
2 years ago1JavaScript
秀和システム「フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装 」書籍内で利用するサンプルアプリケーションです。
Alternatives To Jest Snapshots Book
Select To Compare

Alternative Project Comparisons


npm npm npm

Jest-snapshots-book is a custom jest reporter that builds html representations of snapshots. It is designed for snapshot testing React components. Here is an article on Medium that I've written about this reporter.

Jest-snapshots-book reporter recursively goes through the tested component and all its' parents and grabs all styles. Grabbed styles are inserted in the component page so that you can see styled React component there.

The reporter takes raw expected snapshot content from a component .snap file. Then it makes the actual snapshot by applying diff from a failed test result to the expected snapshot.

Each time when jest is run this reporter will produce a book of snapshots with table of contents. The book will be placed in the folder "snapshots-book" in the root of your project.

Book example

You can check out your snapshots in the browser instead of manually listing them in your code editor.

Here is an example of a test file for a paginator React component:

import React from 'react';

import { configure, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import Paginator from './Paginator';

configure({ adapter: new Adapter() });

describe('Paginator', () => {
    const snapshoot = (tp, cp) => {
        const wrapper = render(<Paginator tp={tp} cp={cp} />);
        it(`Total = ${tp}, Current = ${cp}`, () => {

    snapshoot(0, 0);
    snapshoot(1, -1);
    snapshoot(1, 1);
    snapshoot(2, 2);
    snapshoot(3, 1);

    for (let cp = 1; cp <= 10; cp++) {
        snapshoot(10, cp);

Here is the result produced by jest-snapshots-book reporter. If a test passed only one snapshot is shown because expected and actual snapshots are the same. If a test failed expected and actual snapshots are shown side by side. Clicking on the snapshot toggles its' representation (rendered, raw, diff).



Install as a dev dependency:

$ npm install --save-dev jest-snapshots-book

Add the reporter after the default jest reporter in the configuration file:

"reporters": [

Add the reporter directory to ignored paths:

"modulePathIgnorePatterns": [
"watchPathIgnorePatterns": [

To enable verbose mode of the reporter pass "verbose": true as an additional parameter when initializing the reporter:

"reporters": [
    ["jest-snapshots-book", {"verbose": true}]
Popular Book Projects
Popular Jest Projects
Popular Learning Resources Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.