Jest snapshot serializer for @adeira/sx.

yarn add --dev @adeira/sx-jest-snapshot-serializer

Example usage (with react-test-renderer):

import TestRenderer from 'react-test-renderer';
import '@adeira/sx-jest-snapshot-serializer';

it('works as expected', () => {
  const testRenderer = TestRenderer.create(<Heading>level one</Heading>);
  expect(testRenderer.toJSON()).toMatchInlineSnapshot(`
    ._1cJrQ0 {
      color: rgba(var(--sx-foreground));
    }

    <h1 class="_1cJrQ0">level one</h1>
  `);
});

Example usage (with @testing-library/react):

import { render } from '@testing-library/react';
import '@adeira/sx-jest-snapshot-serializer';

it('works as expected', () => {
  const { container } = render(<Heading>level one</Heading>);
  expect(container.firstChild).toMatchInlineSnapshot(`
    ._1cJrQ0 {
      color: rgba(var(--sx-foreground));
    }

    <h1 class="_1cJrQ0">level one</h1>
  `);
});

TODOs

What it does now:

it prints CSS generated by SX above the HTML output

What it should do in the future:

it should somehow mangle or expand the CSS classes so they are immutable for better snapshot diff readability (changing CSS property changes just the CSS and not the whole HTML snapshot)
it should get rid of the atomic CSS structure for better readability