jest-aphrodite-react

Jest Snapshot serializer for Aphrodite. Based off the serializer from jest-glamor-react.

The problem

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

<div
  className="root_10eoyjn"
/>
  Hello World
</div>

And that's not super helpful from a styling perspective. Especially when there are changes to the class, you can see that it changed, but you have to look through the code to know what caused the class name to change.

This solution

This allows your snapshots to look more like:

.root {
  color: red !important;
}
 
.root:hover {
  color: green !important;
}
 
@media (min-width: 200px) {
  .root:hover {
    color: black !important;
  }
}
 
<div
  className="root"
/>
  Hello World
</div>

This is much more helpful because now you can see the CSS applied and over time it becomes even more helpful to see how that changes over time.

This builds on the work from @MicheleBertoli in jest-styled-components and @kentcdodds in jest-glamor-react to bring a similar experience to React projects that use aphrodite.

Preview

Installation

This module is distributed via yarn or npm which is bundled with node and should be installed as one of your project's devDependencies:

yarn add --dev jest-aphrodite-react

or

npm install --save-dev jest-aphrodite-react

Usage

At the top of your test file:

import { aphroditeSerializer } from 'jest-aphrodite-react'; // or jest-aphrodite-react/no-important
 
expect.addSnapshotSerializer(aphroditeSerializer);

Or in your Jest serializer config:

{
  snapshotSerializers: ['jest-aphrodite-react']; // or jest-aphrodite-react/no-important
}

API

createSerializer(getAphroditeStyleSheetUtils: () => StyleSheetUtils, [options]: SerializerOptions): jest.SnapshotSerializerPlugin

options: SerializerOptions:

Parameter	Type	default	Description
removeVendorPrefixes	boolean	false	removes vendor prefixed values from out. This greatly reduces the foot print of the output, but does decrease performance.
classNameReplacer	(className: string, index: number) => string	see src	Callback to focus a new option; receives the option as a parameter.

Example

import { StyleSheetTestUtils } from 'aphrodite';
import { createSerializer } from 'jest-aphrodite-react';
 
expect.addSnapshotSerializer(
  createSerializer(
    () => StyleSheetTestUtils,
    { removeVendorPrefixes: true }
  ),
);

Other Examples

For environment setup set ./jestSetup.js and for test examples for both enzyme and react-test-renderer see ./src/serializer.test.tsx for createSerializer examples see ./src/serializerCustom.test.tsx

Inspiration

As mentioned earlier, @MicheleBertoli's jest-styled-components and @kentcdodds's jest-glamor-react were a huge inspiration for this project. And much of the original code came from from those MIT Licensed projects. Thank you so much Michele and Kent! 👏

Other Solutions

I'm unaware of other solutions. Please file a PR if you know of any!

Code of Conduct

Contributions of any kind welcome!

COC

LICENSE

MIT