执行react-scripts test时无法找到Chakra UI模块的问题求助

我用create-react-app搭配@chakra-ui/typescript模板创建了项目，现在能正常构建和运行应用，但一执行npm test就报错：

Cannot find module '@chakra-ui/utils/context' from 'node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox-context.cjs'

看起来测试环节找不到Chakra的组件模块，以下是我的相关配置和代码：

我的package.json内容 #

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/icons": "^2.2.4",
    "@chakra-ui/react": "^2.10.3",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@headlessui/react": "^2.2.0",
    "@heroicons/react": "^2.1.5",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.119",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "feather-icons": "^4.29.2",
    "framer-motion": "^11.11.11",
    "next-themes": "^0.4.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-feather": "^2.0.10",
    "react-icons": "^5.3.0",
    "react-router-dom": "^6.27.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

测试文件App.test.tsx #

import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByText("Hello");
  expect(linkElement).toBeInTheDocument();
});

App.tsx相关代码 #

import { ReactNode } from "react";
import { Button } from "@chakra-ui/react";
import { ChakraProvider } from "@chakra-ui/react";
...

const App = () => {
  return (
    <ChakraProvider>
      ...
      <Button size={"sm"} colorScheme="red">
        Hello
      </Button>
      ... 
    </ChakraProvider>
  );
};

export default App;

有没有大佬能给点解决建议呀，万分感谢🙏

备注：内容来源于stack exchange，提问作者Mark