我的Item组件接受一个包含一些细节的文字对象和一个通过按钮触发的函数。现在看起来很棒，但我想执行一些渲染测试，以检查所有组件是否都在文档中，并测试一个将用户带回商店页面的按钮和一个触发我之前提到的函数的按钮。
至于2023，Enzyme版本高达16，这使得shallow(/*a component*/)不可能，因为我无法安装适配器npm install enzyme-adapter-react-16 --save dev，无法解决依赖关系。我也尝试import { ShallowRenderer } from "react-dom/test-utils"，但当我试图创建渲染器const renderer = new ShallowRenderer()时，我得到了ShallowRenderer is not a constructor所有这些都是基于Shallow Renderer旧文档。我知道，这不太可能奏效，但我们的想法是让它奏效，以便以后了解原因。
实际上，这一切都是从下面的测试开始的，其中render是从@testing-library/react导入的，这是正统的方法。然而，Jest抱怨Uncaught [TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null.]。老实说，我不知道这个错误意味着什么，也不知道浅渲染是否是测试我的组件的方法。
这是我的代码
item.js

import { Link } from "react-router-dom";
import React from "react";

const Item = ({info},{addCart}) => {

  return(
    <>
      <button data-testid='link'><Link to="/">X</Link></button>
      <img data-testid='pic' src={info.pic} alt={info.title}></img>
      <h1 data-testid='title'>{info.title}</h1>
      <p data-testid='description'>{info.description}</p>
      <button data-testid='add-item' onClick={()=>{addCart({info})}}>Add</button>
    </>
  )
};

export default Item;

item.test.js

import React from "react";
import { render, cleanup,screen} from "@testing-library/react";
import '@testing-library/jest-dom'
import Item from "./item";

afterEach(cleanup);
const details = {pic: `a pic`, title:`a title`, description:`a description`}
const func =jest.fn(); 

test(`Content renders`,()=>{
  render(<Item info={details} addCart={func}/>);
  expect(screen.getByRole('button', {name: 'X'})).toBeInTheDocument();
});

有谁知道在哪里可以找到最新的相关资料？
请注意，我的目标是使用details对象文字和item.test.js中的funct函数mock来呈现Item
同样，我应该浅渲染组件吗？我应该用另一种方式编写测试吗？