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.

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