TypeError：无法解构“React__namespace.useContext（...）”的属性“basename”，因为它为空

Question

我正在使用 Jest 执行 React 测试，测试运行后会返回TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null.错误render(<Carrinho ItensCarrinho={ itensCarrinho } incrementeCarrinho={ incrementeCarrinhoMock } decrementeCarrinho={ decrementeCarrinhoMock }/>);。

我已经看过帖子Uncaught TypeError: Cannot destruct property 'basename' of 'React2.useContext(...)' 因为它是 null并且它不能解决我的问题。

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';

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", () => {
      render(<Carrinho ItensCarrinho={ itensCarrinho } incrementeCarrinho={ incrementeCarrinhoMock } decrementeCarrinho={ decrementeCarrinhoMock }/>);
      expect(screen.getByRole("heading").textContent).toMatch(/Total:/i);
    });
});

卡里尼奥.js：

import '../styles/carrinho.css';
import { Link } from "react-router-dom";

function Carrinho( { ItensCarrinho, incrementeCarrinho, decrementeCarrinho }){
    var total=0;
    ItensCarrinho.map((item) => {
        if(item.promo !== 0){
            total = total + item.quantidade*item.promo;
        }else{
            total = total + item.quantidade*item.preco;
        }
    })
    console.log(ItensCarrinho);
    return (
        <div id="produtoCarrinho">
            <div id="fundoCarrinho">
                <h1>Carrinho</h1>
                {ItensCarrinho.map((item) => (
                    <div id="itenCarrinho">
                        <img src={ item.src } alt={ item.nome }></img>
                        <div id="detalhes">
                            <h3>{ item.nome }</h3>
                            <p>{ item.detalhes }</p>
                            <p>{ (item.promo !=="0") ? "De R$ " + item.preco + ",00 por R$ " + item.promo+",00" : "R$ "+item.preco+",00" }</p>
                            <div id="btnIncrementar">
                                <button onClick={ () => { decrementeCarrinho(item.id) } }> - </button>
                                <p> { item.quantidade } </p>
                                <button onClick={ () => { incrementeCarrinho(item.id) } }> + </button>  
                            </div>
                        </div>
                    </div>
                ))}
                <h2>Total: R${ total },00</h2>
                <div id="btnCompre">
                    <Link to="/products/"><button>Continue comprando</button></Link>
                </div>
            </div>
        </div>
        );
}

export default Carrinho;

Answer 1

问题在于使用Link. 该组件需要出现在路由器内部，但在您的测试中却并非如此。

MemoryRouter您可以尝试用（最轻的）包裹组件react-router-dom来克服这个问题。

render(<MemoryRouter><Carrinho ... /></MemoryRouter>);