Nicer snapshots when using jest and fela
Clone or download
Latest commit 9fda806 Oct 23, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Initial commit Aug 25, 2017
src Make compatible with jest 21 Oct 23, 2017
.babelrc Initial commit Aug 25, 2017
.gitignore Initial commit Aug 25, 2017
LICENSE Initial commit Aug 25, 2017
example.png Initial commit Aug 25, 2017
index.js Initial commit Aug 25, 2017
package.json 0.2.0 Oct 23, 2017
readme.md Initial commit Aug 25, 2017
yarn.lock Make compatible with jest 21 Oct 23, 2017

readme.md

jest-fela-react

Jest snapshots are amazing, but with fela, you'll get pretty ugly snapshots with classNames that don't have any meaning. However, by adding jest-fela-react to Jest, you can get snapshots diffs where you can understand the changed content.

Before

If you use fela as your CSS-in-JS solution, and you use [snapshot testing][snapshot] with [jest][jest] then you probably have some test snapshots that look like:

<div
  className="fovk07z"
>
  <div
    className="f16lnj6g"
  >
    Hello World
  </div>
</div>

After

.fovk07z> div {
  font-weight: 500;
}

.fovk07z {
  border: solid 1px black;
}

.f16lnj6g {
  color: red;
  font-size: 16px;
}

<div
  className="fovk07z"
>
  <div
    className="f16lnj6g"
  >
    Hello World
  </div>
</div>

Kent C. Dodds published jest-glamor-react, which does the same thing as jest-fela-react, but for glamor. He himself took inspiration from Michele Bertoli who worked on jest-styled-components, an equivalent for styled-component. Most of the code in this repo is actually taken from these two projects, since there is little difference between snapshotting for fela and for these other css in js solution. And because they are much better than I am, so they did a better job than I would have! All I did was make it compatible with fela.

Updated diff

Installation

yarn -D jest-glamor-react

Usage

At the top of your test file:

import createSerializer from 'jest-fela-react'
import {createRenderer} from 'fela';
import monolithic from 'fela-monolithic';

const felaRenderer = createRenderer({
    enhancers: [monolithic()]
})

expect.addSnapshotSerializer(createSerializer(felaRenderer))

// You're free to write your tests as you wish

Using fela-monolithic is not necessary, however, if you skip this part, you'll end up with one class for each property, which I think is less optimal when simply looking for differences between styles.

LICENSE

MIT