I am trying to test my React componnent in which i have imported a css file like this

import styles from "./NavBar.module.css"

Jest Test suite fail to run

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){.nav  {
                                                                                      ^
    SyntaxError: Unexpected token '.'

        import styles from "./NavBar.module.css";

It seems like jest does not understand css files. Is there a workaround?

my package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "jest",
    "dev": "parcel watch index.html",
    "build": "npm install --include=dev && npm run build:parcel",
    "build:parcel": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.17.10",
    "@babel/preset-react": "^7.16.7",
    "babel-jest": "^28.0.3",
    "buffer": "^6.0.3",
    "jest": "^28.0.3",
    "jest-babel": "^1.0.1",
    "jest-environment-jsdom": "^28.0.2",
    "parcel": "^2.5.0",
    "process": "^0.11.10"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "firebase": "^9.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.2"
  },
  "babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
  },
  "jest": {
    "testEnvironment": "jsdom"

  }
}