Awesome
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
<img src="https://github.com/dmiller9911/jest-aphrodite-react/raw/master/other/snapshot.png" alt="Terminal Screenshot" title="Terminal Screenshot" width="500px" />
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!
LICENSE
MIT