React Test Renderer如何按类名查找元素？求多种解决方案

以下是几种在React Test Renderer中通过类名查找元素的实现方案，针对你的Footer组件场景优化：

• 直接包含匹配类名
  利用findAll的回调函数，检查元素props中的className是否包含目标类名：

  const links = component.root.findAll(el => 
    el.props.className?.includes('footer-link')
  );
  

  用可选链?.避免元素无className属性时抛出错误，适合模糊匹配包含目标类的元素。

• 精确匹配+限定元素类型
  如果需要同时限定元素类型（比如只查找<a>标签），可以增加类型判断：

  const links = component.root.findAll(el => 
    el.type === 'a' && el.props.className === 'footer-link'
  );
  

  用===做精确匹配，确保只找到类名完全一致的目标元素。

• 正则精准匹配多类名场景
  当元素存在多个类名时（比如className="footer-link text-gray"），用正则匹配独立的类名，避免部分匹配错误：

  const links = component.root.findAll(el => 
    /(^|\s)footer-link(\s|$)/.test(el.props.className || '')
  );
  

  这个正则会匹配以footer-link开头、结尾或被空格包裹的情况，不会误匹配footer-link--active这类变体类名。

• 封装复用工具函数
  若频繁需要按类名查找，可以封装一个可复用的函数，简化代码：

  function findByClassName(root, targetClass) {
    const classRegex = new RegExp(`(^|\\s)${targetClass}(\\s|$)`);
    return root.findAll(el => classRegex.test(el.props.className || ''));
  }
  
  // 调用示例
  const links = findByClassName(component.root, 'footer-link');
  

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