Griffel Jest Serializer that keeps original classnames

[Therese Seares (rese)]

@griffel/jest-serializer removes the generated class names so that tests can pass reliably even if there are CSS changes. I'm finding myself in a situation where although there are going to be visual regression tests protecting us against unintended changes, our team would still find it useful to have the original class names in our snapshot (see snippet below). Would this be a desired change or would it be an anti-pattern? If the latter, why? Would it be difficult to implement, and are there any pointers if we wanted to contribute that?

import { makeStyles } from '@fluentui/react-components';

const useStyles = makeStyles({
  root: { color: 'red' },
  rootPrimary: { color: 'blue' },
});

function Component(props) {
  const classes = useStyles();

  return <div className={mergeClasses('ui-component', classes.root, props.primary && classes.rootPrimary)} />;
}

// Snapshot for "When button is primary, renders as expected"
<div className="ui-component root rootPrimary" />

// Snapshot for "Default button, renders as expected"
<div className="ui-component root" />

[Oleksandr Fediashov (layershifter)]

Therese Seares (@rese) I believe that the same is discussed there #343. Let's continue there, if you don't mind 😉