如何在Jest快照测试中跳过检查aria-labelledby属性？

没问题，当然可以跳过对这个动态生成的aria-labelledby属性的检查，这里有几个实用的方案帮你搞定：

方案1：在测试中手动修改元素属性（适合单个测试用例） #

既然每次生成的aria-labelledby值不固定，我们可以在生成快照前，把这个属性移除或者设置成固定值。比如用Enzyme的DOM操作方法修改目标元素：

it('My Test', () => {
  let wrapper: ReactWrapper;
  wrapper = mount(<App />);
  
  // 找到带有aria-labelledby的目标元素（比如你示例中的.p-dialog）
  const targetElement = wrapper.find('.p-dialog').first();
  // 移除这个动态属性，或者设置成固定值
  targetElement.getDOMNode().removeAttribute('aria-labelledby');
  // 或者固定值：targetElement.getDOMNode().setAttribute('aria-labelledby', 'fixed-test-id');
  
  expect(wrapper.find(App)).toMatchSnapshot();
});

这个方法简单直接，只针对当前测试用例生效，不会影响其他测试。

方案2：自定义Jest快照序列化器（适合全局批量忽略） #

如果你的项目中有很多地方都有这种动态生成的aria-labelledby属性，不想一个个测试改的话，可以自定义一个快照序列化器，让Jest自动忽略这个属性：

1. 新建一个序列化器文件，比如jest-serializer-ignore-aria.js：

module.exports = {
  // 判断是否需要处理当前元素
  test(val) {
    return (
      val &&
      typeof val === 'object' &&
      val.props &&
      typeof val.props['aria-labelledby'] !== 'undefined'
    );
  },
  // 序列化时移除aria-labelledby属性
  print(val, serialize) {
    const cleanedProps = { ...val.props };
    delete cleanedProps['aria-labelledby'];
    return serialize({ ...val, props: cleanedProps });
  }
};

2. 在Jest配置文件（比如jest.config.js）中添加这个序列化器：

module.exports = {
  // ...其他配置项
  snapshotSerializers: [
    '<rootDir>/jest-serializer-ignore-aria.js'
  ]
};

这样所有生成快照时，都会自动忽略元素的aria-labelledby属性，一劳永逸。

方案3：使用Jest的expect.anything()配合快照（进阶用法） #

如果你想保留属性但忽略具体值，可以用Jest的匹配器来修改快照的断言逻辑。不过这种方法需要你修改现有的快照结构，把固定值替换成expect.anything()：

首先，先运行一次测试让快照生成，然后打开对应的.snap文件，把动态的aria-labelledby值改成expect.anything()：

// 修改前
<div aria-labelledby="pr_id_1_label" className="p-dialog p-component" ... />

// 修改后
<div aria-labelledby={expect.anything()} className="p-dialog p-component" ... />

之后再运行测试时，Jest会忽略aria-labelledby的具体值，只要这个属性存在就会通过测试。

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