I am learning React, and got stuck in testing one of my components. I use react-use-cart to manage the cart, this is how code looks
import React from "react";
import { Link } from "react-router-dom";
import { useCart } from "react-use-cart";
import PropTypes from "prop-types";
import handleQuantityChange from "../../logic/product/handleQuantityChange";
function AddToCart(props) {
const {product, styles, loading} = props;
const { addItem, inCart, getItem, updateItemQuantity } = useCart();
const productInCart = getItem(product.id);The test breaks at "productInCart = getItem(product.id)" saying " TypeError: getItem is not a function". I've been stuck at this for several days, and would really appreciate some help, it's my first time asking a question, so if you need any more info let me know, thank you.
Also about the test, test breaks on the render stage
import React from "react";
import { render, screen } from "@testing-library/react";
import AddToCart from "../AddToCart";
import { MemoryRouter as Router } from "react-router-dom";
describe("get item is not a function", () => {
const product = {
name: "test name",
imgUrl: "test image",
price: 555,
shipping: 1000,
id: 55
};
const styles = []
beforeEach(() => {
render(
<Router>
<AddToCart product={product} styles={styles}/>
</Router>
);
});You are missing CartProvider:
{...}
beforeEach(() => {
render(
<CartProvider>
<Router>
<AddToCart product={product} styles={styles}/>
</Router>
</CartProvider>
);
});
Did you try logging the value of getItem to see if it's indeed a function ? Though I'm not familiar with use-cart it does seem like you're doing it correctly.
Other than that, the addToCart function is missing an ending curly brace, I assume you just didn't paste the whole code in ?