I am using MUI v5 + styled + jest snapshot. I would like better logs when a snapshot test failed.
Example of my component:
const styledProperties = new Set(['backgroundColor']);
const StyledAppBar = styled(AppBar, {
shouldForwardProp: (property) => !styledProperties.has(property.toString())
})<IHeaderProperties>(({ backgroundColor, theme }) => ({
backgroundColor: backgroundColor || theme.palette.background.paper
}));
export interface IHeaderProperties extends ICommonProperties {
backgroundColor?: string;
}
export default function Header(properties: PropsWithChildren<IHeaderProperties>): ReactElement {
return <StyledAppBar {...properties} />;
}
A snapshot test:
describe('given <Header />', () => {
describe('when it is rendered', () => {
it('should match snapshot', () => {
renderWithProviders(<Header data-testid="Header" backgroundColor={'#FFFFFF'} />);
const header = screen.getByTestId('Header');
expect(header).toBeVisible();
expect(header).toMatchSnapshot();
});
});
});
When the snapshot fails I only see the "css-PART_THAT_CHANGES-MuiPaper-root-MuiAppBar-root" that changed.
expect(received).toMatchSnapshot()
Snapshot name: `given <Header /> when it is rendered should match snapshot 1`
-
Snapshot - 1 +
Received + 1
<
header -
class = "... css-1adzlm4-MuiPaper-root-MuiAppBar-root" +
class = "... css-11m65ae-MuiPaper-root-MuiAppBar-root"
data - testid = "Header" /
>
I rather would have something like this:
