如何让MUI styled组件的Jest快照测试失败日志更清晰

问题表现 #

当前使用技术栈：MUI v5 + styled API + Jest 快照测试
现有业务组件代码：

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} />;
}

现有快照测试代码：

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();
      });
  });
});

快照失败时仅能看到CSS类名哈希差异，无法定位具体样式改动，报错示例：

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"
      />

问题根源：MUI v5 基于emotion生成带哈希值的动态类名，原生DOM快照只会比对DOM上的class属性字符串，不会解析类名对应的实际CSS规则，所以样式改动只会体现为哈希值变动，无法直接看到属性变化。

可落地方案 #

方案1：自定义快照序列化器，内联核心样式属性 #

这个方案最轻量，不需要额外依赖，直接在序列化快照时把元素的实际生效样式写入快照，diff时就能直接看到属性值变化。

1. 编写自定义序列化逻辑，加入Jest测试配置的初始化文件（通常是jest.setup.js）：

expect.addSnapshotSerializer({
  // 只对DOM元素生效
  test: (val) => val instanceof HTMLElement,
  print: (val, serialize) => {
    const computedStyle = window.getComputedStyle(val);
    // 只提取业务中会自定义修改的核心样式，避免快照冗余
    const trackStyles = ['backgroundColor', 'color', 'padding', 'margin', 'display', 'position', 'width', 'height'];
    const styleMap = {};
    trackStyles.forEach(prop => {
      styleMap[prop] = computedStyle.getPropertyValue(prop);
    });
    // 把样式挂到自定义属性上，会被快照捕获
    val.setAttribute('data-test-style', JSON.stringify(styleMap));
    return serialize(val);
  }
});

2. 重新执行测试加-u参数更新快照，后续样式改动时，diff会直接展示具体属性的新旧值，效果如下：

<header
        class="... css-11m65ae-MuiPaper-root-MuiAppBar-root"
        data-testid="Header"
        data-test-style="{
      -   "backgroundColor": "#FFFFFF"
      +   "backgroundColor": "#000000"
        }"
      />

方案2：配合样式序列化插件，直接内联CSS规则 #

如果需要看到完整的CSS规则改动，可以用jest-styled-components配合MUI测试环境缓存配置，直接把元素对应的CSS内容写入快照。

1. 安装依赖后在Jest初始化文件引入：

import 'jest-styled-components';

2. 调整测试环境的renderWithProviders方法，使用固定配置的emotion缓存，避免随机哈希干扰：

import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';

// 测试环境专用缓存，不要在生产环境使用
const testEmotionCache = createCache({
  key: 'mui-test',
  stylisPlugins: []
});

const renderWithProviders = (ui, options) => {
  return render(
    <CacheProvider value={testEmotionCache}>
      {ui}
    </CacheProvider>,
    options
  );
};

配置完成后更新快照，后续样式改动时，快照会直接展示CSS规则的diff，不会只显示无意义的哈希变化。

注意事项 #

• 不要全量抓取所有computedStyle属性，会导致快照体积过大、无效diff变多，只提取业务中会主动修改的核心样式即可
• 类名哈希本身是不稳定的，不要把动态哈希类名作为快照断言的核心判断依据
• 测试环境的emotion缓存配置不要打包到生产代码，仅在测试环境下生效

内容的提问来源于stack exchange，提问作者sherkal