Unable to render a component using jest

Question

I am trying a render the App component in Jest for unit testing. I have installed the required libraries for the job but I keep getting an error message when I try to import the App.js file.

Error message

The component I want to render is below along with the rest of the code.

App.js

import { useEffect,useState } from 'react';
import logo from './logo.svg';
import './App.css';
// import UserLogin from './components/login';
import ConnectedUsersData from './components/login';
import * as API from './data/_DATA';
import { handleGetUser } from './actions/login';
import {getUser} from './actions/login';
import {receiveQuestions} from './actions/questions';
import {handleInitialData} from './actions/shared';
import {connect} from'react-redux';
import { Route, Router,Routes } from "react-router-dom";
import ConnectedDashBoard from "./components/dashboard";
import ConnectedCreatePolls from "./components/createPolls";
import ConnectedLeaderBoard from "./components/leaderboard";
import ConnectedPolls from "./components/polls";

function App(props) {
  // const [value, setNewValue] = useState(0);
  useEffect(() => {
    props.dispatch(handleInitialData(props.store))
  }, []);

  if(props.loading == true) {
    return <div><h3>Loading.....</h3></div>
  }
  return (
    // <div className="App">
    //     <ConnectedUsersData store={props.store}/>
    // </div>
    <Routes>
      <Route path="/" element={<ConnectedUsersData/>}/>
      <Route path="/dashboard" element={<ConnectedDashBoard/>}/>
      <Route path="/add" element={<ConnectedCreatePolls/>}/>
      <Route path="/leaderboard" element={<ConnectedLeaderBoard/>}/>
      <Route path="/polls/:id" element={<ConnectedPolls/>}/>
    </Routes>
  );
}

// const ConnectedApp = connect((state)=> ({
//   loading: state.loading
// }))(App);

const ConnectedApp = connect((state)=> ({
  loading: state.loading
}))(App);

export default ConnectedApp;

When I try to import ConnectApp, I get an error message.

AppUI.test.js

import '@testing-library/jest-dom';
import * as React from "react";
import '@testing-library/jest-dom/extend-expect';
import { render,screen } from "@testing-library/react";
import store from "../data/store";
// import ConnectedApp from '../App';
import ConnectedApp from '../App';

describe("Display UI", () => {
    it("matches snapshot when we pass the store", async () => {
        var component = render(
            <Provider store={store}>
                <BrowserRouter>
                    <ConnectedDashBoard/>
                </BrowserRouter>
            </Provider>
        );
        expect(component).toBeInTheDocument();
    })

    it("matches snapshot when we did not pass the store", async () => {
        var component = render(
            // <ConnectedApp/>
            <Provider>
                <BrowserRouter>
                    <ConnectedApp/>
                </BrowserRouter>
            </Provider>
        );
        expect(component).toBeInTheDocument();
    });
})

Package.json

{
  "name": "employeepoll",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@coreui/coreui": "^4.3.0",
    "@coreui/react": "^4.11.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/user-event": "^13.5.0",
    "babel-core": "^6.26.3",
    "form-serialize": "^0.7.2",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "react-redux": "^9.1.0",
    "react-redux-loading-bar": "^5.0.8",
    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
    "redux": "^5.0.1",
    "redux-thunk": "^3.1.0",
    "regenerator-runtime": "^0.14.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --no-cache",
    "eject": "react-scripts eject"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  },"plugins": ["@babel/plugin-transform-modules-commonjs"],
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.24.1",
    "@babel/preset-env": "^7.24.3",
    "@babel/preset-react": "^7.24.1",
    "@testing-library/react": "^14.2.2",
    "babel-jest": "^29.7.0",
    "jest": "^27.5.1",
    "react-test-renderer": "^18.2.0"
  }
}

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

Is there anybody who knows how to properly configure jest so it can render a component? Can you help me please?