useContext testing with react-testing-library

Question

I want to write unite tests to my context&reducer hooks according to another question on stackoverflow i tried following code like this.

Here is Modal.test.js :

import React from "react";

import { render, fireEvent, screen, getByText } from "@testing-library/react";
import Basket from "../Basket/Basket";
import { Context, initialProductState, initialCartState } from "../../Context/Context";

describe("should hover and render mini basket to screen and remove product in cart", () => {
  it("is remove product in cart", () => {
    const dispatch = jest.fn();

    const productDispatch = jest.fn();

    const testCartState = [
      {
        productId: 2,
        title: "Apple iPhone 11 Green",
        addedDate: "Thu Oct 07 2021 19:49:48 GMT+0300 (GMT+03:00)",
      },
      {
        productId: 2,
        title: "Apple iPhone 11 Green",
        addedDate: "Thu Oct 07 2021 19:49:48 GMT+0300 (GMT+03:00)",
      },
      {
        productId: 2,
        title: "Apple iPhone 11 Green",
        addedDate: "Thu Oct 07 2021 19:49:48 GMT+0300 (GMT+03:00)",
      },
      {
        productId: 2,
        title: "Apple iPhone 11 Green",
        addedDate: "Thu Oct 07 2021 19:49:48 GMT+0300 (GMT+03:00)",
      },
    ];

    const { getByTestId } = render(
      <Context
        testDispatch={dispatch}
        testState={testCartState}
        testProductDispatch={productDispatch}
        testProductState={initialProductState}
      >
        <Basket />
      </Context>,
    );
    const button = getByTestId("basket-button");
    fireEvent.mouseOver(button);
    expect(screen.getByTestId("mini-cart")).toBeInTheDocument();

    expect(screen.getByTestId("remove-button")).toBeInTheDocument();
  });
});

But when i done this it says :

TypeError: Cannot read property 'length' of undefined

      75 |       >
      76 |         <span className={styles.text}>Sepetim</span>
    > 77 |         <span className={styles.badge}>{cart.length}</span>
         |                                              ^
      78 |       </button>
      79 |       {isHovering && (
      80 |         <div

Main point is how can i pass test variables to my context or am i need to test these different way ?

And here is Context.js

import { createContext, useContext, useReducer } from "react";
import { cartReducer, productReducer } from "./Reducers";

const AppContext = createContext();

const products = JSON.parse(localStorage.getItem("productList"));
const cart = JSON.parse(localStorage.getItem("cart"));

export const initialCartState = {
  cart: cart ? cart : [],
};
export const initialProductState = {
  products: products,
  filteredProducts: [],
  byColor: {
    selected: false,
    color: "Black",
  },
  byBrand: {
    selected: false,
    brand: "Apple",
  },
  sortByPriceAsc: false,
  sortByPriceDesc: false,
  sortByNewAsc: false,
  sortByNewDesc: false,
  searchQuery: "",
};
export const Context = ({
  children,
  testState,
  testProductState,
  testproductDispatch,
  testDispatch,
}) => {
  // get Localstorage productlist ------

  const [iState, iDispatch] = useReducer(cartReducer, initialCartState);

  const [iProductState, iProductDispatch] = useReducer(productReducer, initialProductState);

  const state = testState ? testState : iState;
  const dispatch = testDispatch ? testDispatch : iDispatch;
  const productState = testProductState ? testProductState : iProductState;
  const productDispatch = testproductDispatch ? testproductDispatch : iProductDispatch;

  return (
    <AppContext.Provider value={{ state, dispatch, productState, productDispatch }}>
      {children}
    </AppContext.Provider>
  );
};

export const AppState = () => {
  return useContext(AppContext);
};

export default Context;

Thanks for any suggestions.