测试使用react-use-cart的组件时报TypeError: getItem is not a function

react-use-cart 的 useCart hook 必须在 CartProvider 组件的上下文范围内使用，才能拿到正确的状态和操作方法。你的测试代码渲染组件时仅包裹了路由用的 MemoryRouter，没有包裹 CartProvider，导致 useCart() 返回值不符合预期，解构得到的 getItem 是 undefined，调用时就会抛出类型错误。

注意：即使你在业务代码的应用根节点已经套了CartProvider，测试环境是独立挂载组件的，不会自动继承根节点的上下文，所以测试用例里必须手动补全组件依赖的所有上下文Provider。

• 在测试文件中从react-use-cart引入CartProvider
• 渲染测试组件时，用CartProvider包裹住用到useCart的组件，补全上下文依赖

修改后的测试代码示例：

import React from "react";
import { render, screen } from "@testing-library/react";
import AddToCart from "../AddToCart";
import { MemoryRouter as Router } from "react-router-dom";
// 引入CartProvider
import { CartProvider } from "react-use-cart";

describe("AddToCart component test", () => { 
    const product = {
        name: "test name",
        imgUrl: "test image",
        price: 555,
        shipping: 1000,
        id: 55
    }; 
    const styles = []

    beforeEach(() => {
        render(
            // 补全CartProvider包裹
            <CartProvider>
                <Router>
                    <AddToCart product={product} styles={styles}/>
                </Router>
            </CartProvider>
        );
    });

    // 后续编写你的测试用例
})

修改完成后重新执行测试，useCart就能正常返回包括getItem在内的所有内置方法，不会再抛出该类型错误。

内容的提问来源于stack exchange，提问作者Gizo