SyntaxError: Cannot use import statement outside a module

[pankajd1990]

I am new in Vue js. I have installed jest in my view project. and I used multiselect module in my vue project.
But when i run npm run test command then following error is showing

My Vue files details are

babel.config

module.exports = {
  presets: ["@babel/preset-env"],
};

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": "jest"
  },
  "dependencies": {
    "@vue/compiler-sfc": "^3.5.7",
    "@vueform/multiselect": "^2.6.10",
    "core-js": "^3.8.3",
    "i": "^0.3.7",
    "ts-jest": "^29.2.5",
    "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",
    "@babel/preset-env": "^7.25.4",
    "@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.6",
    "@vue/vue3-jest": "^27.0.0",
    "babel-jest": "^27.5.1",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "install": "^0.13.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "npm": "^10.8.3"
  },
  "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"
  ]
}

jest.config.ts

module.exports = {
  verbose: true,
  moduleFileExtensions: ["js", "json", "vue"],

  transformIgnorePatterns: [
    "node_modules/(?!axios)",
    "/node_modules/(?!@vueform).+\\.js$",
  ],

  transform: {
    "^.+.js$": "babel-jest",
    ".*.(vue)$": "@vue/vue3-jest",
    "^.+\\.ts?$": "ts-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  collectCoverage: true,
  coveragePathIgnorePatterns: ["/node_modules/", "/tests/"],
  testEnvironment: "jsdom",

  moduleDirectories: ["node_modules", "src"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy",
  },
  collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"],
  testEnvironmentOptions: {
    customExportConditions: ["node-addons"],
  },
};

my component file

<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>

my component spec file

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

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

`