Currently, I am working with MUI v5 along with styled components and Jest snapshot testing. I am looking for a way to improve the logs generated when a snapshot test fails.
Below is an example of the component I am dealing with:
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} />;
}
This is how a snapshot test looks like:
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, only the part related to "css-PART_THAT_CHANGES-MuiPaper-root-MuiAppBar-root" is displayed.
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 would prefer to have something similar to this design: