typescript, ts-jest, jestを使用したvue.jsのテストでSyntaxError: Unexpected token '<'のエラーが表示されます

typescript, ts-jest, jestを使用してvue.jsのテストを実装しています(導入部分)

現状
npm run testを実行すると下記のエラーが表示されます。SyntaxError: Unexpected token '<'

仮説、やったこと
SyntaxError: Unexpected token '<'と表示されていたので、設定ファイルに不備がありそうと見て下記を見ながら、ファイルを作成し、記述変更、キャッシュクリア、再度実行と行いましたがエラーは同じままでした。
https://github.com/vercel/next.js/issues/8663
https://github.com/kulshekhar/ts-jest/issues/937

"jsx": "reseave"の記述が怪しいねと書いてあったのでreseaveからreactにも変更しましたが変化なしでした。

error
1Jest encountered an unexpected token
2
3    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
4
5    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
6
7    By default "node_modules" folder is ignored by transformers.
8
9    Here's what you can do:
10     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
11     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
12     • If you need a custom transformation specify a "transform" option in your config.
13     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
14
15    You'll find more details and examples of these config options in the docs:
16    https://jestjs.io/docs/configuration
17    For information about custom transformations, see:
18    https://jestjs.io/docs/code-transformation
19
20    Details:
21
22    /app/src/components/HelloWorld.vue:1
23    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<template>
24                                                                                      ^
25
26    SyntaxError: Unexpected token '<'
27
28      1 | import { shallowMount } from '@vue/test-utils'
29    > 2 | import HelloWorld from '../components/HelloWorld.vue'
30        | ^
31      3 |
32      4 | describe('HelloWorld.vue', () => {
33      5 |   test('renders props.msg when passed', () => {
34
35      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1479:14)
36      at Object.<anonymous> (src/tests/first.test.ts:2:1)
37

各ファイル

packagejson
1{
2  "name": "app",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "serve": "vue-cli-service serve",
7    "build": "vue-cli-service build",
8    "lint": "vue-cli-service lint",
9    "test": "jest"
10  },
11  "dependencies": {
12    "@types/jest": "^26.0.23",
13    "core-js": "^3.6.5",
14    "vue": "^2.6.11"
15  },
16  "devDependencies": {
17    "@typescript-eslint/eslint-plugin": "^4.18.0",
18    "@typescript-eslint/parser": "^4.18.0",
19    "@vue/cli-plugin-babel": "~4.5.0",
20    "@vue/cli-plugin-eslint": "~4.5.0",
21    "@vue/cli-plugin-typescript": "~4.5.0",
22    "@vue/cli-service": "^4.5.13",
23    "@vue/eslint-config-prettier": "^6.0.0",
24    "@vue/eslint-config-typescript": "^7.0.0",
25    "@vue/test-utils": "^1.2.0",
26    "eslint": "^6.7.2",
27    "eslint-plugin-prettier": "^3.3.1",
28    "eslint-plugin-vue": "^6.2.2",
29    "jest": "^27.0.4",
30    "prettier": "^2.2.1",
31    "ts-jest": "^27.0.2",
32    "typescript": "~4.1.5",
33    "vue-template-compiler": "^2.6.11"
34  }
35}
36

jestconfigjs
1module.exports = {
2  moduleFileExtensions: [
3    "js",
4    "ts",
5    "json",
6    "vue"
7  ],
8  transform: {
9    "^.+\.tsx?$": "ts-jest"
10  },
11  moduleNameMapper: {
12    '^@/(.*)$': '<rootDir>/src/$1'
13  },
14  testURL: "http://localhost/",
15  
16  testRegex: "(/tests/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$",
17  preset: 'ts-jest',
18  testEnvironment: 'node',
19  globals: {
20    // we must specify a custom tsconfig for tests because we need the typescript transform
21    // to transform jsx into js rather than leaving it jsx such as the next build requires.  you
22    // can see this setting in tsconfig.jest.json -> "jsx": "react"
23    "ts-jest": {
24      tsConfig: "tsconfig.jest.json"           追加したテスト用のファイルを読み込ませる
25    }
26  },
27  transformIgnorePatterns: ['<rootDir>/node_modules/']
28};

tsconfigjestjson
1{
2  "extends": "./tsconfig.json",　　変更しないところはそのまま貰う
3  "compilerOptions": {
4    "jsx": "react"
5  }
6}

tsconfigjson
1{
2  "compilerOptions": {
3    "target": "esnext",
4    "module": "esnext",
5    "strict": true,
6    "jsx": "preserve",
7    "importHelpers": true,
8    "moduleResolution": "node",
9    "skipLibCheck": true,
10    "esModuleInterop": true,
11    "allowSyntheticDefaultImports": true,
12    "sourceMap": true,
13    "baseUrl": ".",
14    "types": [
15      "webpack-env",
16      "jest"             jest使えるように記載
17    ],
18    "paths": {
19      "@/*": [
20        "src/*"
21      ]
22    },
23    "lib": [
24      "esnext",
25      "dom",
26      "dom.iterable",
27      "scripthost"
28    ]
29  },
30  "include": [
31    "src/shims-vue.d.ts",
32    "src/**/*.ts",
33    "src/**/*.tsx",
34    "src/**/*.vue",
35    "tests/**/*.ts",
36    "tests/**/*.tsx"
37  ],
38  "exclude": [
39    "node_modules"
40  ]
41}
42

firsttestts
1import { shallowMount } from '@vue/test-utils'
2import HelloWorld from '../components/HelloWorld.vue'
3
4describe('HelloWorld.vue', () => {
5  test('renders props.msg when passed', () => {
6    const msg = 'new message'
7    const wrapper = shallowMount(HelloWorld, {
8      propsData: { msg }
9    })
10    expect(wrapper.text()).toMatch(msg)
11  })
12})

補足
babelについては公式に型検査しないよと書いてあったので取り入れてません

BabelでTypeScriptを使う場合、いくつかの注意事項があります。 BabelはTypescriptを純粋なトランスパイルによりサポートしているため、Jestはテストの実行時にテストコードの型検査を行いません。 型検査を行いたい場合、代わりに ts-jest を使用するか、TypeScriptコンパイラ のtsc をテストとは別に(またはビルドプロセスの一部として)使用してください。

仮説が尽きてしまいました。

どなたか知見のある方いましたら、ご教授いただきたいです。
よろしくお願いします。