A tested cart: reducer, hook and UI
Write cartReducer(items, action) and the useCart() hook so the five given tests pass. Items look like { id, name, price, qty } (prices in paise).
Actions: { type: "added", item } adds the item with qty: 1, or raises qty by 1 if the same id is already there; { type: "removed", id } removes that item. The reducer must never change the old state. useCart() uses useReducer and returns { items, count, total, add(item), remove(id) }, where count is the sum of quantities and total the sum of price × qty.
Then add your own test whose name starts with my: and that uses renderHook to test remove.
The shop at the bottom must work: clicking Add Mango twice shows Total: ₹80.00 in #total.
What Check tests
- All five given tests pass
- No test fails
- Your own "my:" test uses renderHook and passes
- Clicking Add Mango twice shows Total: ₹80.00
- The cart uses useReducer
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.