跨平台兼容性Hook测试

在跨平台应用开发中，我们经常面临不同环境下的Hook行为差异问题。以一个需要同时支持Web和Native的电商平台为例，我们需要实现一个能够处理不同平台网络请求差异的Hook。

场景描述： 我们的购物车功能需要在Web端使用fetch API，在Native端使用axios，并且需要处理平台特定的错误码。通过创建自定义Hook来封装这些差异。

// useCartPlatform.js
import { useState, useEffect } from 'react';

const useCartPlatform = () => {
  const [cartItems, setCartItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 平台检测
  const isNative = typeof window === 'undefined' && global.process;
  
  // 根据平台选择适配器
  const getPlatformAdapter = () => {
    if (isNative) {
      return {
        fetchCart: async () => {
          const response = await axios.get('/api/cart');
          return response.data.items;
        },
        addProduct: async (product) => {
          const response = await axios.post('/api/cart/add', product);
          return response.data;
        }
      };
    }
    
    return {
      fetchCart: async () => {
        const response = await fetch('/api/cart');
        if (!response.ok) throw new Error('Network error');
        return response.json();
      },
      addProduct: async (product) => {
        const response = await fetch('/api/cart/add', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(product)
        });
        return response.json();
      }
    };
  };

  const adapter = getPlatformAdapter();

  const fetchCart = async () => {
    try {
      setLoading(true);
      const items = await adapter.fetchCart();
      setCartItems(items);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const addProduct = async (product) => {
    try {
      const result = await adapter.addProduct(product);
      setCartItems(prev => [...prev, result]);
      return result;
    } catch (err) {
      setError(err.message);
      throw err;
    }
  };

  return { cartItems, loading, error, fetchCart, addProduct };
};

测试验证步骤：

1. 在Web环境运行，检查fetch API是否正常工作
2. 模拟Native环境（通过Jest mock），验证axios调用路径
3. 测试错误处理机制，确保平台差异下的统一错误格式
4. 验证Hook在不同平台下的性能表现

优化策略：

• 使用useMemo缓存adapter对象避免重复创建
• 为每个平台实现独立的缓存策略
• 添加平台特定的超时和重试机制