升级第三方组件库后Jest快照测试失败的解决方案咨询

方法1：自定义快照序列化器统一替换版本号 #

直接在Jest的快照生成流程里做预处理，把类名里的版本号换成固定占位符，从根源避免版本变更影响快照：

• 新建一个快照序列化器文件，比如src/jest-serializers/version-class-remover.js：

  module.exports = {
    test(val) {
      // 匹配带版本号的类名格式，比如 lesson-card__1-7-0
      return typeof val === 'string' && /[a-z-]+__\d+-\d+-\d+/i.test(val);
    },
    print(val) {
      // 将版本号部分替换成固定占位符
      return val.replace(/(__\d+-\d+-\d+)/g, '__[VERSION]');
    }
  };
  

• 在jest.config.js里配置启用这个序列化器：

  module.exports = {
    snapshotSerializers: [
      '<rootDir>/src/jest-serializers/version-class-remover.js'
    ]
  };
  

之后生成的快照里，所有带版本号的类名都会变成lesson-card__[VERSION]的格式，后续升级组件库时，快照对比不会因为版本号变动失败。

方法2：Mock组件库的类名生成逻辑 #

如果组件库的版本化类名是通过特定工具函数生成的，直接在测试里mock这个函数，让它返回不带版本的基础类名：

// 假设组件库导出了生成版本类名的工具函数
jest.mock('@your-company/ui-components', () => ({
  ...jest.requireActual('@your-company/ui-components'),
  getVersionedClass: (baseClass) => baseClass,
}));

这样渲染后的组件类名就不会带版本号，快照自然不受版本升级影响。

方法3：单个测试用例中手动处理DOM内容 #

如果不想全局修改，针对特定测试用例，可以在生成快照前手动替换DOM里的版本号：

test('渲染课程卡片组件', () => {
  const { container } = render(<LessonCard />);
  // 替换所有带版本号的类名
  container.innerHTML = container.innerHTML.replace(/(__\d+-\d+-\d+)/g, '__[VERSION]');
  expect(container).toMatchInlineSnapshot(`
    <div class="lesson-card__[VERSION]">
      <!-- 组件内容 -->
    </div>
  `);
});

方法4：自定义快照匹配器 #

通过expect.extend封装自己的快照匹配方法，在对比时自动忽略版本号：

expect.extend({
  toMatchSnapshotIgnoringVersion(received) {
    let processed = received;
    // 处理字符串或DOM元素的内容，替换版本号
    if (typeof processed === 'string') {
      processed = processed.replace(/(__\d+-\d+-\d+)/g, '__[VERSION]');
    } else if (processed.innerHTML) {
      processed.innerHTML = processed.innerHTML.replace(/(__\d+-\d+-\d+)/g, '__[VERSION]');
    }
    // 调用原生快照匹配逻辑
    return this.equals(processed, expect.toMatchSnapshot());
  }
});

之后测试里直接用expect(component).toMatchSnapshotIgnoringVersion();替代原生的toMatchSnapshot即可。

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