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