@griffel/jest-serializer

A snapshot serializer that removes class names generated by Griffel from snapshots.

Despite its name, it works with both Jest and Vitest.

Install

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

Setup

Jest

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

Vitest

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    snapshotSerializers: ['@griffel/jest-serializer'],
  },
});

Alternatively, register it from a setup file:

// vitest.setup.ts
import { expect } from 'vitest';
import { print, test } from '@griffel/jest-serializer';

expect.addSnapshotSerializer({ print, test });

Overview

Griffel generates atomic class names by hashing style declarations, so a component renders as:

<div class="static-class ___1t65jhk_nkb4zh0 fe3e8s9 frdkuqy">Hello world</div>

These hashes are an implementation detail: changing an unrelated style or upgrading Griffel can change them and invalidate every snapshot that captured them. With this serializer they are removed, and only markup that you wrote is left:

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

Classes from both makeStyles() and makeResetStyles() are removed, any other class name is kept.

Asserting styles

As the serializer removes the class names, snapshots no longer describe which styles were applied. Assert them directly with toHaveStyle() from @testing-library/jest-dom:

render(<Component />);

expect(screen.getByTestId('element')).toHaveStyle({
  color: 'rgb(255, 0, 0)',
  paddingLeft: '10px',
});

It reads computed styles from the document, so it covers shorthands, RTL flipping and overrides from mergeClasses().

Documentation

See Snapshot testing for the full guide, including how to get slot names into snapshots.