Ant Design Upload react组件中自动生成的key导致快照测试失败答案

【问题标题】：Auto generated key in Ant Design Upload react component causes snapshot test to failAnt Design Upload react组件中自动生成的key导致快照测试失败
【发布时间】：2023-03-10 20:57:02
【问题描述】：

我正在使用 Upload ant 设计组件，它运行良好，除了它使用自动生成的密钥生成文件输入。每次我运行测试时，都会生成一个新密钥，因此快照不匹配并且我的测试失败。

在 Upload 上设置键不会影响输入键，所以我没有明显的方法来模拟它。我也尝试使用新的属性匹配器，但我发现的所有示例都非常简单，使用一个简单的对象，无法弄清楚如何使用包含许多嵌套反应组件的包装器。

我找不到任何有关如何处理 ant design 自动生成的密钥的文档...任何帮助或指出正确的方向将不胜感激！

【问题讨论】：

标签： reactjs jestjs antd

【解决方案1】：

这适用于我使用 Enzyme 和 Jest 进行快照测试：

describe('<Uploader />', () => {
  test('it renders', () => {
    const uploaderProps = {
      accept: 'application/pdf,image/*',
      action: 'https://file-service.example.com/v1/upload',
      defaultFileList: [
        {
          uid: '1',
          name: 'under-construction.gif',
          status: 'done',
          url: 'https://media.giphy.com/media/EIiJp9cQ3GeEU/giphy.gif',
          thumbUrl: 'https://media.giphy.com/media/EIiJp9cQ3GeEU/giphy.gif',
        },
      ],
      multiple: true,
      name: 'file-input',
      onChange: jest.fn(),
    };
    const uploader = mount(<Uploader {...uploaderProps} />);
    expect(uploader.render()).toMatchSnapshot();
  });
});

注意使用.render() 生成没有密钥的快照。

【讨论】：