griffel/packages/jest-serializer

Jest serializer for Griffel

Provides a Jest serializer for @griffel/react that strips out class names generated by Griffel from the output.

Install

Add it as a dependency:

yarn add --dev @griffel/jest-serializer
# or
npm install --save-dev @griffel/jest-serializer

Update your jest.config.js (or appropriate config location) to include a snapshotSerializers array that references this package:

module.exports = {
  snapshotSerializers: ['@griffel/jest-serializer'],
};

Overview

When using Jest snapshot testing with components that utilize @griffel/react, class names will be rendered as follows:

<div class="static-class __1qdh4ig f16th3vw frdkuqy0 fat0sn40 fjseox00">Hello world</div>

With this serializer, the generated class names will be removed:

<div class="static-class">Hello world</div>

This ensures that your tests can pass reliably without any generated class names.