Jest/React testing error "SyntaxError: Private field '#root' must be declared in an enclosing class"

I am new to testing react components and I am getting a constant error here. It is something to do with the CSS import in the embedded component of the component I am testing:

    SyntaxError: Private field '#root' must be declared in an enclosing class

      2 | import { NavLink } from "react-router-dom";
      3 | import SearchContext from "../contexts/SearchStore";
    > 4 | import "../styles/all.css";
        | ^
      5 |
      6 | const NavBar = ({ content }) => {
      7 |   const { setTerm } = useContext(SearchContext);

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/components/NavBar.jsx:4:1)

      Test Suites: 1 failed, 1 total
      Tests:       0 total
      Snapshots:   0 total
      Time:        1.453 s

The error is occuring on the embedded component (NavBar) of the component that I am testing. Component I am testing (Landing) and the test:

import React, { useEffect, useRef, useContext } from "react";
import SearchContext from "../contexts/SearchStore";
import NavBar from "./NavBar";
import "../styles/all.css";
import { motion } from "framer-motion";



const Landing = () => {
  const { navigate } = useContext(SearchContext);
  const hover = useRef(false);

  const animations = {
    initial: { opacity: 0.5, y: 0 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -200 },
  };

  useEffect(() => {
    const nav = document.getElementsByClassName("navClass")[0];
    nav.classList.add("navClassAnimate");
  }, []);

  const handleClick = () => {
    const navBg = document.getElementsByClassName("navClass")[0];
    const wrapper = document.getElementsByClassName("wrapper")[0];

    navBg.classList.remove("navClassAnimate");
    wrapper.classList.add("wrapperLoad");

    setTimeout(() => {
      navigate("search");
    }, 1000);
  };

  return (
    <motion.main
      variants={animations}
      initial="initial"
      animate="animate"
      exit="exit"
      className="landingContainer d-flex flex-column"
    >
      <NavBar content={content} />
      <div className="wrapper h-100">
        <div className="d-flex h-100 justify-content-center align-items-center flex-column-reverse mainDiv">
          <button
            onMouseEnter={() => handleHover()}
            onMouseLeave={() => handleHover()}
            onClick={() => handleClick()}
            type="button"
            className="btn btn-outline-dark fs-4 rounded-pill p-3 px-5 startButton"
          >
            Get started!
          </button>
          <div className="d-flex border rounded-3 p-5 pt-3 pb-3 spotifyDiv">
            <h2 className="fs-5 me-2 mt-2 powered">Powered by</h2>
            <i className="spotify icon fs-1 spotifyNav"></i>
          </div>
        </div>
      </div>
    </motion.main>
  );
};

Component where the error is occuring:

import React, { useContext } from "react";
import { NavLink } from "react-router-dom";
import SearchContext from "../contexts/SearchStore";
import "../styles/all.css";

const NavBar = ({ content }) => {
  const { setTerm } = useContext(SearchContext);

  return (
    <>
      <header className="navClass d-flex justify-content-center">
        <NavLink
          onClick={() => {
            setTerm("");
          }}
          className="text-uppercase"
          to="/search"
        >
          {content}
        </NavLink>
      </header>
    </>
  );
};

Test file (it is not complete, I am just testing that the component renders for now):

import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom";
import Landing from "./Landing";

test("On hover the classes are added to the spotify div", () => {
  render(<Landing />);
  screen.debug();
});

Configuration of jest and babel etc:

Script "npm test":

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },

Packages for config:

  "devDependencies": {
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.2.2",
    "@types/node": "^18.11.9",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.8",
    "babel-jest": "^29.3.1",
    "jest": "^27.5.1",
    "react-test-renderer": "^18.2.0",
    "typescript": "^4.8.4"
  }

.babelrc file:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

I have searched far and wide and don't understand why this error is occuring. Any help would be great.

I fixed this issue. It was to do with manually configuring Jest and the babelrc file. So I deleted the manual configuration and instead installed the correct packages and used the setupTests.js file that comes when you use CRA.

I also had to wrap my components in Router and the Context API Provider and Store.