Vue.js で単体テストを実施したい

Question

環境

Vue 2.6.11
Vue CLI 4.5.6
Vuetify 2.3.15

質問内容

Vue Test Utilsを参考に、jestとvue test utilsによるテストを実行したいと思っておりました。

ただ、npm run testを実行時にエラーが表示され、それ以上進めずに困っている状況です。

なお、実行したコマンドは、

vue create "プロジェクト名"

// "プロジェクト名"ディレクトリ配下で
npm install --save-dev jest @vue/test-utils
npm install --save-dev vue-jest
npm install --save-dev babel-jest

package.jsonは、

{
  "name": "jest-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/test-utils": "^1.1.1",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "jest": "^26.6.2",
    "vue-jest": "^3.0.7",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\.(vue)$": "vue-jest",
      "^.+\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }
}

さらに、srcフォルダの同階層に.babelrcを作成し、以下の内容を追記。

{
  "presets": [
    ["env", { "modules": false }]
  ],
  "@babel/env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

テスト用のコード（src直下にtest/Counter.spec.js）と、テスト対象となるファイル(src/Counter.vue)を作成し（上記で参考にしていたサイトと同じものなのでソースコードは省略）、npm run testと実行したところ、
下記のエラーが表示されます。

Unknown option: .@babel/env. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

ソースコードではなく、設定ファイルに何か情報が足りないために生じているのかと思っているのですが、
具体的にどうしたらよいか分からず困っております。
何かご存じの方がいらっしゃいましたら、ご教示いただけると幸いです。

Answer 1

他のエラーを見たろころ、

Cannot find module 'babel-preset-env' from 'プロジェクトのパス'
- Did you mean "@babel/env"?

というエラーもありました。

npm install --save-dev babel-preset-env

を実行したところ、

Cannot find module 'babel-core'

のようなエラーが表示されたので、

npm install --save-dev babel-core

を実行したらうまくいきました。