Jest测试React购物车组件时出现basename解构错误

错误原因：你的Carrinho组件使用了react-router-dom的<Link>组件，而<Link>必须在Router提供的上下文环境中才能正常工作。直接测试Carrinho时没有包裹Router，导致React无法获取到Router上下文，进而抛出解构basename的空值错误。

解决方法：在测试代码中用MemoryRouter（react-router-dom提供的测试用Router）包裹Carrinho组件，为其提供必要的上下文。

修改后的Carrinho.test.js代码：

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import userEvent from "@testing-library/user-event";
import Carrinho from '../components/Carrinho.js';
// 引入MemoryRouter
import { MemoryRouter } from "react-router-dom";

describe("Carrinho component", () => {
    const itensCarrinho = [{
        id: "1",
        nome: "Fone de ouvido",
        preco: 100,
        promo: 0,
        src: "nome.jpg",
        detalhes: "detalhes",
        quantidade: 1,
    }];
    const incrementeCarrinhoMock = jest.fn();
    const decrementeCarrinhoMock = jest.fn();
    it("renders correct heading", () => {
      // 用MemoryRouter包裹Carrinho组件
      render(
        <MemoryRouter>
          <Carrinho 
            ItensCarrinho={ itensCarrinho } 
            incrementeCarrinho={ incrementeCarrinhoMock } 
            decrementeCarrinho={ decrementeCarrinhoMock }
          />
        </MemoryRouter>
      );
      expect(screen.getByRole("heading").textContent).toMatch(/Total:/i);
    });
});

说明：MemoryRouter是react-router-dom专为测试场景设计的Router组件，它不需要真实的浏览器路由环境，就能为内部的<Link>、<Route>等组件提供所需的上下文，完美解决测试时的Router依赖问题。

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