javascript - Jest/React - 如何在函数中测试 useState 状态更新的结果

Question

我有一个简单的购物车函数，当用户单击以增加或减少购物车中的商品数量时，会调用 useState 函数来更新状态中的购物车数量。

const [cart, setCart] = useState([]);

const onUpdateItemQuantity = (cartItem, quantityChange) => {
    const newCart = [...cart];
    const shouldRemoveFromCart = quantityChange === -1 && cartItem.count === 1;
    ...
    if (shouldRemoveFromCart) {
      newCart.splice(cartIndex, 1);
    } else {
      ...
    }
    setCart(newCart); //the useState function is called
}

所对于Jest地说，我有一个函数可以测试用户何时将购物车商品的数量设置为零，但它尚未从购物车中删除该商品，我假设是因为它尚未收到 setCart(newCart) 的结果:

test('on decrement item from 1 to 0, remove from cart', () => {
      const [cartItemToDecrement] = result.current.cartItems;
      const productToDecrement = result.current.products.find(
        p => p.id === cartItemToDecrement.id
      );

      act(() => {
        result.current.decrementItem(cartItemToDecrement);
      });

      act(() => {
        result.current.decrementItem(cartItemToDecrement);
      });

      ...

      expect(result.current.cartItems).toEqual(
        expect.arrayContaining([
          expect.objectContaining({
            id: cartItemToDecrement.id,
            count: cartItemToDecrement.count - 2,
            inventory: productToDecrement.inventory + 2
          })
        ])
      ); 
    });
  });

此测试通过，因为购物车现在包含的商品数量已降至零。但实际上不应该，因为从 splice 中的 onUpdateItemQuantity 操作开始，我们的 cartItems 数组现在应该根本不包含该对象。如何在我的 Jest 测试中验证此删除是否正在发生( react 代码正常工作)。

Answer 1

我不太了解测试和您的 onUpdateItemQuantity 之间的关系，因为您提供的上下文对我来说不够。

但是从您的问题来看，有 2 条线索可能有助于节省您的时间。

1. 您可能知道 useState 中的 setCart 不是同步的，因此，如果您尝试从 useState 访问 cart 在同一帧，即使您确保调用了 setCart ，它也不应该反射(reflect)更改。 useEffect 是一个很好的解决方案。您可以找到 useEffect 的文档 [ https://reactjs.org/docs/hooks-effect.html][1] ，任何更改都应该反射(reflect)在 useEffect 中，也许您可​​以将测试放在那里。

2. 添加一个额外的变量myCart来存储cart和一个函数setMyCart。不要在代码中调用 setCart，而是调用 setMyCart。 setMyCart 就像，

  function setMyCart(newCart)
  {
     myCart = newCart;
     setCart(myCart); // this is for triggering React re-render
  }

然后使用myCart，它可以立即反射(reflect)更改进行测试。

第2点额外代码的唯一目的，是当我们仍然依赖React的重新渲染机制时，我们使用我们自己的Model myCart我们的特定逻辑而不是 React 中的 cart 状态，它不仅用于 View，而且还在不适当的场合用于我们的逻辑。