在react-testing-library中基于动态导入的svg测试图标

Question

这是我的第一个问题，我编码才一年，所以请耐心等待。我在网站上寻找类似的问题，但找不到任何对我有用的东西。

我创建了一个 Icon 组件，在其中动态导入请求的 SVG。我第一次使用这个运行良好的解决方案，但是当我尝试使用反应测试库和快照测试这个组件时，我意识到快照始终是在未导入任何内容时返回的跨度。我首先认为它与 useRef() 的使用有关，因为我看到人们说 refs 不适用于 Jest，所以我将 Icon 组件更改为：

const Icon: FC<IconProps> = ({ type, onClick, tooltip, className }: IconProps) => {

  const [IconProps, setIconProps] = useState({
    className: className || 'icon'
  });
  const tooltipDelay: [number, number] = [800, 0];
  useEffect(() => {
    setIconProps({ ...IconProps, className: className || 'icon' });
  }, [className]);

  const SVG = require(`../../svg/${type}.svg`).default;
  const spanClassName = "svg-icon-wrapper";
  if (typeof SVG !== 'undefined') {
    if (tooltip) {
      return (
        (<Tooltip title={tooltip.title} delay={tooltip.delay ? tooltipDelay : 0}>
          <i className={spanClassName}>
            <SVG {...IconProps} onClick={onClick} data-testid="icon" />
          </i>
        </Tooltip>)
      );
    }
    return (
      <SVG  {...IconProps} onClick={onClick} data-testid="icon" />
    );
  }
  return <span className={spanClassName} data-testid="span" />;
};

export default Icon;

这是我的测试

it('matches snapshot of each icon', async (done) => {
    jest.useFakeTimers();
    const type = 'check';
    const Component = <Icon type={type} />;
    const renderedComp = render(Component);
    setTimeout(() => {
      const { getByTestId } = renderedComp;
      expect(getByTestId('icon')).toMatchSnapshot();
      done();
    }, 3000);
    jest.runAllTimers();
  });

我添加了超时，因为我认为它可能与导入 SVG 所需的时间有关，但我尝试的任何方法都不起作用。

所以主要问题是： 如何让该组件导入 svg 以返回图标（带有 data-testid='icon'）而不是跨度（带有 data-testid='span'）

非常感谢您的帮助。我的应用程序运行良好，并且我已经坚持进行此测试一段时间了。