使用Enzyme测试React组件时，如何处理元素的offsetWidth问题？

我之前也碰到过类似的Enzyme测试里DOM元素尺寸为0的坑——这主要是因为测试环境（比如jsdom）不会像真实浏览器那样计算元素的布局，所以offsetWidth这类依赖渲染布局的属性默认就是0，导致滚动逻辑没法正常工作。给你几个实用的解决思路：

• 手动Mock容器的offsetWidth属性
  这是最直接的办法，在组件挂载后，直接给滚动容器的DOM节点设置offsetWidth的模拟值。举个代码例子：

  // 挂载你的视频缩略图组件
  const wrapper = mount(<YourVideoThumbnailComponent />);
  // 获取滚动容器的DOM节点（替换成你实际的容器类名/选择器）
  const scrollContainer = wrapper.find('.thumbnail-scroll-container').getDOMNode();
  // 手动设置offsetWidth为你需要的滚动步长，比如300px
  Object.defineProperty(scrollContainer, 'offsetWidth', { value: 300, writable: true });
  

  之后再模拟点击滚动按钮，组件就能拿到正确的滚动值，测试逻辑就能正常跑起来了。

• 把滚动步长改为可配置的Prop
  要是你经常需要测试这类依赖DOM尺寸的逻辑，可以重构组件，把滚动步长做成一个可传入的Prop，默认情况下从容器获取，测试时直接传入固定值。比如：

  function VideoThumbnailList({ scrollStep }) {
    const containerRef = useRef(null);
    // 优先使用传入的scrollStep，否则从容器获取，兜底为0
    const actualScrollStep = scrollStep || containerRef.current?.offsetWidth || 0;
  
    const handleScrollLeft = () => {
      containerRef.current.scrollBy({ left: -actualScrollStep, behavior: 'smooth' });
    };
  
    const handleScrollRight = () => {
      containerRef.current.scrollBy({ left: actualScrollStep, behavior: 'smooth' });
    };
  
    // ... 组件其他逻辑
  }
  

  测试的时候直接传<VideoThumbnailList scrollStep={300} />，完全不用依赖DOM的布局计算，测试会更稳定。

• 用jsdom配置模拟布局（可选）
  jsdom默认不会计算元素的布局尺寸，你可以在测试环境配置里启用相关选项，或者引入resize-observer-polyfill这类库来辅助，但这个方法相对复杂，不如前面两种直接。如果你的项目里有大量依赖布局的测试，再考虑这个方向。

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