Loki 视觉回归测试中处理异步加载问题的解决方案

问题背景

在使用 Loki 进行 Storybook 组件的视觉回归测试时，开发人员经常会遇到异步加载组件导致的测试失败问题。特别是当测试包含音频播放器这类需要时间加载资源的组件时，或者在多视口测试场景下，组件可能无法在截图前完成加载。

核心问题分析

异步组件在多视口测试中的主要挑战在于：

1. 时间差问题：组件在不同视口下可能需要不同的加载时间
2. 资源加载失败：网络请求可能因测试环境限制而失败
3. 状态不一致：组件在不同视口下可能呈现不同的加载状态

解决方案详解

1. 延迟钩子的局限性

虽然可以使用自定义的延迟钩子（delay hook）来等待组件加载完成，但这种方法在多视口测试中存在明显不足：

• 钩子只会在首次执行时生效
• 视口切换后不会重新等待
• 无法处理网络请求失败的情况

2. 更优的解决方案：fetchFailIgnore 配置

在 Loki 配置文件中添加 fetchFailIgnore 参数是更可靠的解决方案：

{
  "loki": {
    "configurations": {
      // 你的视口配置
    },
    "fetchFailIgnore": ".*"
  }
}

这个配置的作用是：

• 忽略所有网络请求失败的情况
• 允许测试继续执行而不因网络问题中断
• 特别适合处理第三方资源或CDN资源加载

进阶建议

1. 结合多种策略

对于复杂的异步组件，建议组合使用以下策略：

1. 合理的延迟设置：为关键动画或加载过程设置最小等待时间
2. 网络请求忽略：使用上述配置忽略非关键资源加载失败
3. 模拟数据：在测试环境中使用本地模拟数据替代远程请求

2. 视口特定的等待策略

对于必须在不同视口下等待的场景，可以考虑：

// 在Story中使用视口检测
export const MobileView = () => {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const [isLoaded, setIsLoaded] = useState(false);
  
  useEffect(() => {
    const timer = setTimeout(() => setIsLoaded(true), isMobile ? 1000 : 500);
    return () => clearTimeout(timer);
  }, [isMobile]);
  
  return isLoaded ? <Component /> : <Loading />;
};

最佳实践总结

1. 区分关键与非关键资源：只为影响视觉的关键加载设置等待
2. 合理设置超时：根据组件复杂度设置适当的等待时间
3. 利用配置忽略：对非视觉影响的网络请求使用忽略配置
4. 环境隔离：测试环境应尽量与开发环境隔离，减少外部依赖

通过以上方法，可以显著提高包含异步组件在多视口测试中的稳定性和可靠性，确保视觉回归测试结果准确反映组件真实表现。