jest-fela-react

Nicer snapshots when using jest and fela

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
jest-fela-react
0.2.06 years ago6 years agoMinified + gzip package size for jest-fela-react in KB

Readme

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 testingsnapshot with jestjest 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