JEST throwing error - : Cannot use import statement outside a module

[pankajd1990]

I have installed JEST in Vue js. and running test command.
when i run the command, following error comes.

my code is -

Jest configuration file

module.exports = {
  moduleFileExtensions: ["js", "json", "vue"],
  preset: "@vue/cli-plugin-unit-jest",
  transform: {
    "^.+.js$": "babel-jest",
    ".*.(vue)$": "@vue/vue3-jest",
  },
  moduleNameMapper: {},
  collectCoverage: true,
  testEnvironment: "jsdom",
  collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"],
};

package.json

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@vue/compiler-sfc": "^3.5.7",
    "@vueform/multiselect": "^2.6.10",
    "core-js": "^3.8.3",
    "i": "^0.3.7",
    "vue": "^3.5.6",
    "vue-loader": "^17.3.1",
    "vue3-jest": "^27.0.0-alpha.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.4.0-alpha.2",
    "@vue/vue3-jest": "^27.0.0",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "install": "^0.13.0",
    "jest": "^27.0.5",
    "npm": "^10.8.3",
    "vue-jest": "^5.0.0-alpha.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

Hello.vue

<script>
import Multiselect from "@vueform/multiselect";
export default {
  data() {
    return {
      message: "Hello World!",
    };
  },
  methods: {
    getName() {
      return this.message == "aa" ? "aa" : "test";
    },
  },
};
</script>

<template>
  <h1>{{ message }}</h1>
</template>

spec file

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
    });
    wrapper.vm.getName();
    expect(wrapper.text()).toMatch(msg);
  });
});

Please help me to resolve this issue