Vue + TypeScript の Jest 単体テストの設定にて Babel のプリセットを使っていますが、SyntaxError になってしまいます。

Question

前提・実現したいこと

Vue + TypeScript のプロジェクトのテストコードを Jest にて実行したいと考えています。
Babel のプリセットを使って設定しているのですが、 TypeScript の構文等が普通の JavaScript の構文じゃないとしてエラーになってしまいます。

発生している問題・エラーメッセージ

ビルドはできているコードでテストを実行しました。

 ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    SyntaxError: {path}: Unexpected token (5:12)

      3 | @Component
      4 | export default class Hoge extends Vue {
    > 5 |     private hoge = ''
        |             ^

      at Object._raise (node_modules/@babel/parser/src/parser/error.js:97:45)
      at Object.raiseWithData (node_modules/@babel/parser/src/parser/error.js:92:17)
      at Object.raise (node_modules/@babel/parser/src/parser/error.js:41:17)
      at Object.unexpected (node_modules/@babel/parser/src/parser/util.js:140:16)
      at Object.parseClassMemberWithIsStatic (node_modules/@babel/parser/src/parser/statement.js:1489:12)
      at Object.parseClassMember (node_modules/@babel/parser/src/parser/statement.js:1320:10)
      at callback (node_modules/@babel/parser/src/parser/statement.js:1235:14)
      at Object.withTopicForbiddingContext (node_modules/@babel/parser/src/parser/expression.js:2552:14)
      at Object.parseClassBody (node_modules/@babel/parser/src/parser/statement.js:1212:10)
      at Object.parseClass (node_modules/@babel/parser/src/parser/statement.js:1167:22)

該当のソースコード

テスト目的のコードは下記の通りです。

vueファイル

<template src="./Hoge.html"></template>
<style src="./Hoge.css"></style>
<script src="./Hoge.ts"></script>

tsファイル

import { Component, Watch, Vue } from 'vue-property-decorator';

@Component
export default class Hoge extends Vue {
    private hoge = ''

テストコードは下記の通りです。

import { shallowMount } from '@vue/test-utils'
import Hoge from '@/components/Hoge/Hoge.vue'

describe('Hoge.vue', () => {
  it('hoge', () => {
    const wrapper = shallowMount(Hoge)
  })
})

package.json は下記の通りです。

"jest": {
  "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
},

babel.json は下記の通りです。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ]
}

試したこと

同じ設定でテストできたコードがありました。
下記コードはテストすることが出来ました。

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

example.spec.ts

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, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

テストが出来たコードとできなかったコードの違いも正直なところわかっておりません。
わかる方がいらっしゃいましたら、ご教授願いたく思います。

Answer 1

設定ファイルは関係ありませんでした。
.vue ファイルの script タグの属性として lang="ts" を指定したら通りました。