TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null

Question

I'm performing React tests with Jest and after the test runs it returns the error TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null. on the line render(<Carrinho ItensCarrinho={ itensCarrinho } incrementeCarrinho={ incrementeCarrinhoMock } decrementeCarrinho={ decrementeCarrinhoMock }/>);.

I've already seen the post Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null and it doesn't solve my problem.

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);
    });
});

Carrinho.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;

score 4 · Accepted Answer · answered Apr 22 '23 at 19:59

The problem is with the use of Link. That component needs to appear inside a router, but in your tests it is not.

You can try wrapping the component with a MemoryRouter (which is the lightest one) from react-router-dom to overcome this.

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

score 0 · Answer 2 · answered Apr 22 '23 at 19:48

I think its the prop name used in the Carrinho component. In test, you're passing ItensCarrinho as a prop, but in the component, you are using ItensCarrinho instead of itensCarrinho (lowercase "i") for destructuring. Making ItensCarrinho null?, causing the error.

Change the prop name passed in the test file to itensCarrinho (lowercase "i") like so:

render(<Carrinho itensCarrinho={ itensCarrinho } incrementeCarrinho={ incrementeCarrinhoMock } decrementeCarrinho={ decrementeCarrinhoMock }/>);

Also, in the Carrinho component, make sure to use itensCarrinho (lowercase "i") for destructuring like so:

function Carrinho( { itensCarrinho, incrementeCarrinho, decrementeCarrinho }){

This could fix it? In your test file, you are passing the prop ItensCarrinho to your Carrinho component with a capital "I", but in your Carrinho component, you are destructuring the prop with a lowercase "i". This causes the ItensCarrinho prop to be undefined inside the Carrinho component, resulting in the error you are seeing.

To fix the issue, you could change the prop name in your Carrinho component to match the capitalization of the prop in your test file.

TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null

2 Answers2